Bootstrap model ajax

Question

I have a bootstrap table with data. Need to edit that data and set the value of some fields that are not displayed with the table.

I added a edit button to each row, and a modal form. The button is loading the modal form with no issue.

I have 3 questions.

1. How to load the modal with the data for the row associated with the button.
2. How to save the edited data in the modal when the save button is clicked.
3. How to refresh the table after the modal closes when the save button was clicked.

I'm assuming that I'd be better off with a tutorial, but I'll be danged if I can find one.

The table code is just basic bootstrap table.

Current code for the button.

<button type="button" class="btn btn-warning btn-xs" data-toggle="modal" data-target="#checkInModal">Check In</button>

Current code for the modal. (for brevity sake i removed all the fields from the snippet.)

  <!-- Modal -->
    <div class="modal fade" id="checkInModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title" id="myModalLabel">Check In</h4>
                </div>
                <div class="modal-body">
                    ...
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                    <button type="button" class="btn btn-primary">Save changes</button>
                </div>
            </div>
        </div>
    </div>

Answer 1

Check out this jsfiddle

Question 1: You need to identify the parent row and grab the data you need and set the values of the inputs. A framework such as handlebars or even underscore.js provide the use of templates which make this process simpler in terms of populating the DOM.

var elButton = $(this);
var id = elButton.data('id');
var row = elButton.closest('tr');        
var data = {
    firstName: row.find('.firstName').text(),
    lastName: row.find('.lastName').text(),
    handle: row.find('.handle').text(),
    id: id        
}

Question 2: (Note: I'm assuming you mean to a database). You'll need to collect the data from the modal in much the same way we did for the row. Select the values from the modal you want to save and send them via a HTTP request to your server.

var data = {
    firstName: $('#firstName').val(),
    lastName: $('#lastName').val(),
    handle: $('#handle').val(),
    checkinId: $('#checkinId').val()
};

$.ajax({
    type: "POST",
    url: "http://yoururl.io/api/location",
    data: data
});

Question 3: (Note: I'm assuming your data is coming from a data source). You can have a function which loads the data using a HTTP request. Simply call this function again which will pull the latest data from your datasource.

// Populate the table
$.ajax({
    type: "GET",
    url: "http://yoururl.io/api/location",
    success: function(data) {
        // Populate the table. e.g. loop over all data items in request response
        // and create a td for each item
    }

});    

Answer 2

Here is the working fiddle for your problem.

Refer to this fiddle example https://jsfiddle.net/YameenYasin/gk22kvyw/17/

I have created a test table with two columns Name and Address. It has an Edit link that shows the popup modal. I have created a hidden radio button that shows which row was selected.

<table class="table table-bordered table-stripped">
    <tr>
        <th>Name</th>
        <th>Address</th>
        <th>Action</th>
    </tr>
    <tr>
        <td class="name">Name1</td>
        <td class="address">Address1</td>
        <td class="edit"><a href="javascript:void(0);">Edit</a>
            <input hidden type="radio" name="select">
        </td>

    <tr>
    <tr>
        <td class="name">Name2</td>
        <td class="address">Address2</td>
        <td class="edit"><a href="javascript:void(0);">Edit</a>
            <input hidden type="radio" name="select"></td>
    <tr>    
</table>

<!-- Modal -->
    <div class="modal fade" id="checkInModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title" id="myModalLabel">Check In</h4>
                </div>
                <div class="modal-body">
                    <div class="row">
                        <div class="col-md-12">
                            <label>Name:</label>
                            <input type="text" class="form-control" id="editName">
                        </div>
                        <div class="col-md-12">
                            <label>Address:</label>
                            <input type="text" class="form-control" id="editAddress">
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                    <button type="button" class="btn btn-primary btn-save">Save changes</button>
                </div>
            </div>
        </div>
    </div> 

$(document).ready(function(){    
    $('.edit').click(function(){
            var that = this;
            $(this).find(':radio').prop("checked",true);
            loadData(that);
            $('#checkInModal').modal({                 
            });
    });

    function loadData(that){
        $('#editName').val($(that).parent().find('.name').html());
        $('#editAddress').val($(that).parent().find('.address').html());
    }

    $('.btn-save').click(function(){
        // Update the new values inside the Table
        var row = $('input[name=select]:checked').parent().parent();        
        $(row).find('.name').html( $('#editName').val());
        $(row).find('.address').html( $('#editAddress').val());
        $('#checkInModal').modal('hide');

        //Create an object with the saved values and post it to server


    });
});

Answer 3

When the edit button is clicked you would need to find the closest element relative to the button. In jQuery you can do it like this:

<button type="button" data-toggle="modal" data-target="#myModal"></button>


$('.btn').on('click', function(){
   var $row = $(this).closest('tr');
})

Then you can loop through all the cells and retrieve the contents and place them into the modal body area.

var $row = $(this).closest('tr');

var $modalContentArea = $('#myModal .modal-body');

$row.find('td').each(function(){

   var $cell = $(this);

   var cellContents = $cell.text();

   $modalContentArea.append('<input type="text" value="' + cellContents +'"/>');

});

The save button would need to be connected to an ajax request of some sort. You would need to construct a JSON object from the data collected. Then you could use the $get function of jQuery to send the request with the JSON object as the parameter.

$('btn-primary').on('click', function(){

    $.get( "process.php", function( data ) {

        //The ajax callback can populate the table with the new values.

    })

});

In the backend you would need to retrieve the JSON object, parse it, and save it to a database. Then return the new values to the ajax callback.