CODEWITHSUNDEEP
javascriptphpjqueryhtmlmysql
palci12
palci12

Reputation: 319

Update data in mysql with html form inside jquery dialog

I need a help in making a page where you can see data from a mysql query. Every row is echoed as a div with a unique id. 

<div class="column" id="<?php echo $row['id']; ?>">

It has the same id as the data in the mysql database. Every div contains an edit button: 

<a href="edit_column.php?id=<?php echo $row['id'] ?>" class="edit">Edit</a>

After clicking 'edit', a jQuery script is executed: 

$('.edit').on('click', function() {
            var url = this.href;
            var dialog = $("#dialog");
            if ($("#dialog").length == 0) {
                dialog = $('<div id="dialog" style="display:hidden"></div>').appendTo('body');
            }
            dialog.load(
                url,
                {},
                function(responseText, textStatus, XMLHttpRequest) {
                    dialog.dialog();
                }
                );
            return false;
        })

Then, a dialog box pops up with a HTML form and I even managed to put MySQL data into that form to edit it. But now I don't know how to continue. How should I continue to update the data in the database? I know how to update it with PHP and I even have a PHP script update_column.php but I don't know how to execute it from the dialog box and refresh the respective div element with updated data without refreshing the whole page in the browser. In edit_column.php, I only have the HTML form and the PHP script which returns data from the MySQL database.

Upvotes: 2

Views: 1345

Answers (3)

talsibony
talsibony

Reputation: 8756

all you have to do is to add event to submit the edit form on one of your items in the ajax form you got from the first ajax call, you will also have to save the edit id you can do it by save it to global var,

var editId;
$('.edit').on('click', function() {
        var url = this.href;
        editId = $(this).attr('id');
        var dialog = $("#dialog");
        if ($("#dialog").length == 0) {
            dialog = $('<div id="dialog" style="display:hidden"></div>').appendTo('body');
        }
        dialog.load(
            url,
            {},
            function(responseText, textStatus, XMLHttpRequest) {
                dialog.dialog();
            }
            );
        return false;
    });

/*
this is the event that will submit the ajax form
*/
    $('body').on('click', '#elementToSubmit', function() {
      formData = $('#ajaxForm').serialize();
      formData.id = editId;
      $.post('proccessEdit.php', formData, function(result) {// do something like hiding the modal or showing loading image

      });
    });

in your php file the one which generate the dynamic form for the specific id will have to look like this

<form id="ajaxForm">
<!-- some inputs -->
</form>
<!-- this will submit the ajaxForm -->
<a id="elementToSubmit">Save modifications</a>

Upvotes: 1

Ovidiu Badita
Ovidiu Badita

Reputation: 143

If you want to update the data without reloading the page, you will need to use an ajax request. I see you use jQuery, so you can look at jQuery.ajax(). Somehing like $.ajax({ ... }). I see you have no problem finding how to use an API, and you can find the details here: http://api.jquery.com/jquery.ajax/

You will have the URL set to an address where you send some params via POST, and then, at that URL, you will have a PHP function that will parse those params and get data from MySQL and return the data that you need in your JavaScript.

Upvotes: 0

Careen
Careen

Reputation: 567

To solve this issue you will need to use ajax, ajax calls can communicate to your server php script back and forth with out refreshing the page.

http://www.w3schools.com/ajax/

http://www.w3schools.com/ajax/ajax_php.asp

Upvotes: 0

Related Questions