JQuery MySql update

Question

Hi, im trying to adapt this little snippet:

$("#checkbox_id").change(function(){
     /* CODE HERE */
 });

I have a series of checkboxes that are dynamically generated and their id's are always like "hug3443" were "hug" is the column in the DB and "3443" is the unique id for each row.

My objective would be that every time the checkbox changes state to update it own state in the DB.

Can it be accomplished with jQuery?

Thank you.

Answer 1

Yes. Use live events to attach the change event handler to your checkboxes (so that dynamically added checkboxes will be handled also). Then simply do a AJAX request inside the event handler passing your script the new state and the name/id of the checkbox (you can then "parse" the id and column name in the script).

Answer 2

Not without a server side script that would deal with the data changes.

jQuery is a client side javascript framework and doesn't have direct access to mysql, which is a server side daemon.

Have a look into pairing jQuery with php and mysql.

Answer 3

Code in javascript you write with the use of jQuery is executed on the client-side in a browser. A solution is from your script to make a call to a server page that will execute a MySQL update . For example like this.

$("#checkbox_id").change(function(){
   $.ajax({
      type: "POST",
      url: "/page-that/makes/update.php",
      data: {param1:value1}
   });
});

Answer 4

You should write some server-side code for managing database (php, ruby, whatever). You should create something like API, which means, that server-side script needs to get some variables, which sended to it from clients (id's of rows, name and value of columns for example).

And after that you should write your jQuery frontend script, which will request server-side script for managing database tables. For requests you can use AJAX technology, something like this:

$.ajax({
    url: 'http://somesite.com/path/to/server/side/script',
    type : 'POST',
    success: function (data, textStatus) {
        alert('yahoo! we get some data from server!' + data);
    }
});

Answer 5

You can get the value of the id of the checkbox using javascript you can then split the name into the field name and id value. For this example I've added a - into id to give a seperator

(I think you may need to use the click event rather than change, think change may only work for drop down menus)

$("#checkbox_id").click(function(){

   var checkbox_id = $(this).attr("id");
   var id_bits = checkbox_id.split("-");
   // this would split hug-3443 into hug and 3443 setting id_bits[0] = hug and id_bits[1] = 3443

   $.post("update,php",
     {
       row: id_bits[0],
       id: id_bits[1]
     }
   );

});