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.

Answer 1

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...