在jquery对话框中用html表单更新mysql中的数据

Question

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.

Answer 1

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>