Forums

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['name'], $_POST['surname'];
  });

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.

treehouse : what would you like to learn today?

Forums

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