How to add functions in Bootstrap modal - Laravel

Question

I'm currently developing a system with Laravel framework. Though, I'm not very familiar with MVC architecture yet.

When I'm developing the system, I come across a problem which relates with this bootstrap modal that has a form in it. I'd like to put functions in it so that it could be submitted to the database.

I have followed several tutorials, but didn't come up with a solution because they're all using pages instead of modals.

So, here is the HTML of the modal:

<div class="modal hide fade" id="linkSettings">
  <div class="modal-header">
    <button type="button" class="close" data-dismiss="modal">×</button>
    <h3>Add New Link</h3>
  </div>

  <div class="modal-body">
      <div class="control-group">
      <label class="control-label" for="focusedInput">Add A Link:</label>
      <div class="controls">
        <textarea class="autogrow"></textarea>
      </div>
      </div>
  </div>
  <div class="modal-footer">
    <a href="#" class="btn" data-dismiss="modal">Close</a>
    <a href="#" class="btn btn-primary">Save changes</a>
  </div>
</div>

Here is the Javascript of the above modal:

$('.btn-settingLink').click(function(e){
    e.preventDefault();
    $('#linkSettings').modal('show');
});

Now, how do I put the function in the Controller so that whenever a user presses Save Changes button, it will store the value in <textarea> into the database? Is there anything to do with the Javascript code? and Do I need to use {{Form::open('main/addLink','POST')}} at the form to pass its values to the controller and model?

Basically, all I ever wanted was to have the CRUD functions by using modal.

Kylie · Accepted Answer · 2013-06-08T23:40:27.493

2

First you need to create a form with a route....

<form method="post" action="{{URL::to('Link/addlink')}}>

Or like you showed above, with your Blade {{Form}} ...either way

Then your textarea needs an id and name

<textarea id="mytext" name="mytext"></textarea>

So your HTML becomes...

<form method="post" action="{{URL::to('Link/addlink')}}>
  <div class="modal-body">
      <div class="control-group">
      <label class="control-label" for="focusedInput">Add A Link:</label>
      <div class="controls">
        <textarea id="mytext" name="mytext" class="autogrow"></textarea>
      </div>
      </div>
  </div>
  <div class="modal-footer">
    <a href="#" class="btn" data-dismiss="modal">Close</a>
    <input type="submit" id="submit" name="submit" class="btn btn-primary">Save changes</input>
  </div>
</form>

Then in your Link controller...or wherever you're actually sending this form..no idea what your controllers are named :)

public function addlink(){

$input = Input::all();
//whatever validation you wanna do, with error handling etc...not gonna provide that,            thats up to you

$yourmodel = New Model;
$yourmodel->text = $input['mytext'];
$yourmodel->save();

Return Redirect::back();

 }

EDIT (for Ajax)

Add this script at the bottom of your page...

<script>
$(document).ready(function(){

$('input#submit').click(function(e){
   e.preventDefault();
   var text = $('#mytext').val();
   var url = 'your url' //we were using Link/addlink in the other example

  $.ajax({
   type: "POST",
   url: url,
   data: { mytext: text },
   success: function(){
        //Probably add the code to close your modal box here if successful
        $('#linkSettings').hide();
   },
   });
 });
});
</script>

PS Completely untested....you will need some tweaking, plus the fact that your controller has the Redirect will probably make it not work since this will just be expecting an echoed Json string

But these are the nuts and bolts, and the foundation is there for you to continue on your own I would think...

edited Jun 08 '13 at 23:40

answered Jun 08 '13 at 22:55

Kylie

11,421
11
47
78

Of course, its more indepth than this, with error handling, etc, to actually process the data, but thats a seperate issue...your main question is answered by just giving the form an action.....unless you actually wanted to post the form via ajax, and not actually do a real form submit, then thats different... – Kylie Jun 08 '13 at 23:02
Excuse this dumb question, but what's the difference between ajax and the method you've shown – emen Jun 08 '13 at 23:16
1

Ajax will submit to the server behind the scenes, so that when you click save it will simply close the modal, and stay exactly where you were before you opened the modal......the way you have it like Ive done, the SAVE button will submit to the server, and refresh the page. Tho only real difference in this case, is a 20ms screen flash, as opposed to just a modal window closing.....understand? Also if you're scrolled down on a page, and open a modal, and hit save, the page will jump to the top....whereas the ajax way, the modal just closes, and youre exactly in the same spot. – Kylie Jun 08 '13 at 23:17
It just provides a more user friendly interface, that acts more responsive. Its not necessary, but worthwhile implementing if you want to provide a fast and seamless user experience....the best way is to do both, and then do a preventDefault() on the button, so that if they have JS, it ajaxes, and if they don't it falls back onto the regular way...... – Kylie Jun 08 '13 at 23:21
Alright, I got that and it sounds pretty cool. Now, how do I implement ajax in my form? A link to a tutorial might help too though. – emen Jun 08 '13 at 23:26
Hey KyleK thanks a lot for these solutions. I will try it later after taking my breakfast. Will bump this thread if there are errors. – emen Jun 08 '13 at 23:42
let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/31477/discussion-between-amnbhrm-and-kylek) – emen Jun 09 '13 at 11:08

How to add functions in Bootstrap modal - Laravel

1 Answers1