current community

your communities

more stack exchange communities

Stack Exchange
tour help
careers 2.0
Take the 2-minute tour ×
Stack Overflow is a question and answer site for professional and enthusiast programmers. It's 100% free, no registration required.
up vote 0 down vote favorite

So I have a to-do list of items that are dynamically populated by user input. Each has a checkbox next to it, when checked, the status of the to-do item in MySQL database should be modified.

I thought of doing it this way:

echo "<input type='checkbox' onclick='changeState($theid);' />";

where $theid is the row id in the table.

What would the javascript/jquery changeState() function look like to be able to update the database properly?

Here is the javascript code that seems to not work at all (it is placed in the <head> of the HTML file:

<script language="javascript">

function changeState()
{
    jQuery('body').delegate('input[type="checkbox"][data-state-id]', 'change', function(event){
    jQuery.post('updatedata.php', {
        'rowid': jQuery(this).attr('data-state-id')
        //'state': jQuery(this).is(':checked')
    });
});

}

</script>

any ideas why?

share|improve this question
    
Any details about the MySQL table containing states to be changed? –  Tadeck Jun 8 '11 at 22:48
add comment

2 Answers

up vote 2 down vote accepted

You should read more about AJAX calls, preferably with .post() function, and then update the data in database on the server side.

Good luck.

Based on the examples from the documentation of jQuery's .post(), you can implement something like this (in JavaScript with jQuery):

var changeStatus = function(id){
    $.post("updateState.php", { 'id': id } );
};

and on the server side (eg. in updateState.php):

$id = (int)$_POST['id'];
// here make some query using $id to update the state
// in a manner you prefer

EDIT:

But I would prefer something like that:

1) on server side, displaying the checkbox (notice different quotes and (int) cast):

echo '<input type="checkbox" data-state-id="' . (int)$theid . '" />';

2) somewhere in JavaScript (see jsfiddle as a proof):

jQuery(main_container).delegate('input[type="checkbox"][data-state-id]', 'change', function(event){
    jQuery.post('update_state.php', {
        'id': jQuery(this).attr('data-state-id'),
        'state': jQuery(this).is(':checked')
    });
});

3) somewhere on server side (in update_state.php):

$id = (int)$_POST['id'];
$state = (bool)$_POST['state'];
$query = 'UPDATE `states` SET `state`="' . $state . '" WHERE `id`="' . $id . '";';
// here execute the query, obviously adjusted to your needs
share|improve this answer
    
except i guess it would be $_POST['id']...okay this looks interesting, going to try it now.. –  Sev Jun 8 '11 at 22:56
    
@Sev Yes, you are correct - I made a mistake. If you will follow the edited version, please keep in mind there may be some errors (maybe $state is reverted, I am not sure), but are some improvements, such as: 1) getting rid of inline JS, 2) delegating events, 3) using HTML5's custom data, 4) passing current state with the ID, 5) using onchange instead of onclick, 6) casting as protection from SQL Injection etc. –  Tadeck Jun 8 '11 at 23:03
    
@Sev Regarding $state being reverted - I have checked it, it is not reverted (see jsfiddle), so you may wish to pass updated state along with the ID. –  Tadeck Jun 8 '11 at 23:09
    
I just tried what you said...didn't work. I've updated my post above to the javascript code I'm using. Any ideas? –  Sev Jun 8 '11 at 23:09
    
@Sev As I have proved with jsfiddle, my JS is working perfectly fine. You should not enclose this code within changeState() function. You should also get rid of onclick event in the <input> field. You should also check, where your request goes (eg. with Firebug in Firefox or Developer Tools in Google Chrome) - it probably goes to the wrong place (the URL in .post() was relative). Also this may be something on the server-side, with the query. Just fix the JS part and check, whether correct data goes to correct location. –  Tadeck Jun 8 '11 at 23:17
add comment
up vote 1 down vote

You don't need to think of this as: "JavaScript will update the SQL Record", think of this as "JavaScript will tell a API to update that id."

So basically what you have to do is make an API with PHP; and then make JavaScript do the correct API Call via $.ajax, that should do the trick.

$.ajax({
  url: '/path/to/api.php',
  type: 'POST',
  dataType: 'xml/html/script/json/jsonp',
  data: {param1: 'value1'},
  complete: function(xhr, textStatus) {
    //called when complete
  },
  success: function(data, textStatus, xhr) {
    //called when successful
  },
  error: function(xhr, textStatus, errorThrown) {
    //called when there is an error
  }
});
share|improve this answer
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.