How to dynamically submit changes in a form or in a content editable table?

[justinweb]

Hi everyone,

I am looking for the best solution for dynamically updating changes on a MySQL Database every time someone makes a change to a record.

Here is some context:

I am building a large CRM for a client. I would like a record to be modified without the need of a separate edit.php page or submit button. I have tried using the onchange in javascript but it keeps refreshing the page and does not provide a good user experience.

Thanks for the help!

[justinweb]

Oh and I am organizing the information in both html inputs and tables.

[DADE]

Ajax is the answer. If you are using jQuery look at this:

http://api.jquery.com/load/

http://api.jquery.com/jQuery.ajax/

// JS
$(form).on(‘submit’, function(e) {

e.preventDefault();

var firstName = $(input).val(),
lastName = $(input).val();

$.ajax(
type: ‘post’,
url: ‘submit.php’,
data: { name : firstName, surname : lastName }
).done(function(html) {
$(element).html(html);
});

// in submit.php you’ll get this $_POST value, in our case $_POST, $_POST;
});

[justinweb]

And because its using Ajax it doesn’t refresh the page and does this all in the background right?

[DADE]

Yeap.

http://en.wikipedia.org/wiki/Ajax_(programming)

See this .done() function will return html result of your submit.php file in ‘html’ (in this case) variable. So you can select element and replace it’s content with $(element).html(html).

And e.preventDefault() will disable default form submit. So your page won’t start loading after you click .

[justinweb]

Hypothetically, if I wanted the piece of code you wrote to upload a change in an input once the user clicks out of it, would I do:

$(form).on(‘blur’, function(e) {}

And then send the info to a submit.php which handles the data transmission behind the scene? Then I guess I could just have a little notification popup to confirm the changes.

[DADE]

Exactly.

[justinweb]

Nice, much easier then I thought! Thanks a whole lot!

[JohnMotylJr]

Now this thread is the definition of TEAMWORK!! Nice work!!

[justinweb]

If I didn’t want to use JQuery, what would be the equivalent of the first code in JS ?

[justinweb]

Oh never mind, I think it will be much simpler using JQuery.

[Author]

Posts