"Utilizing the Bootstrap framework to enhance the functionality

Question

"Utilizing the Bootstrap framework to enhance the functionality

I have a bootstrap table containing data that needs to be edited, with certain fields not displayed in the table.

To enable editing, I have added an edit button to each row along with a modal form. The button successfully loads the modal form without any issues.

There are 3 questions I have:

How can I load the modal form with the data corresponding to the row associated with the clicked button?
What is the process for saving the edited data when the save button within the modal is clicked?
How do I refresh the table after the modal closes upon clicking the save button?

While I believe a tutorial would be beneficial, I am unable to locate one at the moment.

The current code for the button is as follows:

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

Below is the current code snippet for the modal (with irrelevant fields removed for brevity):

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

javascript ajax twitter-bootstrap

Answer 1

Answer №1

Take a look at this jsfiddle

Question 1: The task at hand involves finding the parent row, extracting necessary data, and assigning values to the inputs. Utilizing frameworks like handlebars or underscore.js can simplify this process by using templates to populate 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: (Please clarify if referring to database). To save data from the modal, follow a similar approach as with the row. Select the relevant values from the modal, send them through an 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: (Assuming data is sourced externally). Implement a function that retrieves data via HTTP request. Trigger this function periodically to update the table with the latest information fetched from the datasource.

// Populate the table
$.ajax({
    type: "GET",
    url: "http://yoururl.io/api/location",
    success: function(data) {
        // Update the table by iterating over the response items and creating appropriate table cells
    }

});

Answer 2

Take a look at this jsfiddle

Question 1: The task at hand involves finding the parent row, extracting necessary data, and assigning values to the inputs. Utilizing frameworks like handlebars or underscore.js can simplify this process by using templates to populate 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: (Please clarify if referring to database). To save data from the modal, follow a similar approach as with the row. Select the relevant values from the modal, send them through an 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: (Assuming data is sourced externally). Implement a function that retrieves data via HTTP request. Trigger this function periodically to update the table with the latest information fetched from the datasource.

// Populate the table
$.ajax({
    type: "GET",
    url: "http://yoururl.io/api/location",
    success: function(data) {
        // Update the table by iterating over the response items and creating appropriate table cells
    }

});

Answer 3

Answer №2

Check out this interactive fiddle solution for your issue.

You can view the example on JSFiddle by following this link: https://jsfiddle.net/YameenYasin/gk22kvyw/17/

In this demonstration, I have set up a sample table containing two columns - Name and Address. Each row has an Edit button that triggers a popup modal display. I've also included a hidden radio button to indicate the selected row.

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

Check out this interactive fiddle solution for your issue.

You can view the example on JSFiddle by following this link: https://jsfiddle.net/YameenYasin/gk22kvyw/17/

In this demonstration, I have set up a sample table containing two columns - Name and Address. Each row has an Edit button that triggers a popup modal display. I've also included a hidden radio button to indicate the selected row.

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

Answer №3

When you click on the edit button, you should locate the nearest element in relation to that button. Using jQuery, you can achieve this:

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


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

Afterwards, you can iterate through all the cells and extract their contents to populate the modal body section.

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 needs to be linked to an ajax request. You will have to create a JSON object from the gathered data. Then, utilize 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 update the table with the new values.

    })

});

On the server side, you must receive the JSON object, parse it, store it in a database, and then return the new values back to the ajax callback.

Answer 6

When you click on the edit button, you should locate the nearest element in relation to that button. Using jQuery, you can achieve this:

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


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

Afterwards, you can iterate through all the cells and extract their contents to populate the modal body section.

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 needs to be linked to an ajax request. You will have to create a JSON object from the gathered data. Then, utilize 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 update the table with the new values.

    })

});

On the server side, you must receive the JSON object, parse it, store it in a database, and then return the new values back to the ajax callback.

"Utilizing the Bootstrap framework to enhance the functionality

Answer №1

Answer №2

Answer №3

Similar questions

Error encountered when utilizing the Omnifaces::Ajax::update() method: NoClassDefFoundError Exception

Swapped out image hyperlink for a clickable button

Expanding the number of buttons for <ul> in creating a responsive navigation system using Angular

One approach could be utilizing either JavaScript object notation or jQuery code to establish class properties that are also classes in their own

What is the process for sending an Ajax request to transfer the data from a table row column to PHP when clicking on the table row?

Monitoring alterations in dynamically produced input fields using jQuery

The appearance of HTML varies depending on the type of mobile device being used

The angular event broadcaster controller is currently unavailable

Why is it important to understand the meaning of variable = [...variable] in Javascript ES6?

Adding unique parameters to a rails form

Attempting to download an image through an axios fetch call

Error encountered: TypeError: Unable to access attributes of null object (attempting to read 'useMemo')

Issue with jsPDF rendering Japanese characters when printing

sort by the last element in the array

I attempted to upload an image using the Google Drive API, but encountered an error in the response

Obtaining the calculated background style on Firefox

How can you effectively close an automatically opening dialog during AngularJS testing with Protractor in order to proceed with test execution seamlessly?

Double the names in a single <input>

What is the best way to display a component based on a certain condition?

Showing post response (XMLHttpRequest) on Chrome extension interface instead of Python console