Ajax jquery <a> to update database

Question

I have a view_mine_and_others.php file that outputs this html

<div class="rec" id="1">
 <div class="val">343</div>
 <a class="change">Change</a>
</div>
<div class="rec" id="2">
 <div class="val">12001</div>
 <a class="change">Change</a>
</div>
<div class="rec" id="3">
 <div class="val">4233</div>
 <a class="change">Change</a>
</div>

I have the links (<a class="change">) bound to a js function function change() that reads the id and val of the record involved, with the attention to send this data off to an update.php script.

$("a.change").click(change);

function change(){
   var id = $(this).parent().attr('id'); 
   var val = $(this).siblings('.val').html();

   /* this I'm guessing is where I call the ajax code */

   /* I then have some code here to udpate the interface if successful *
}

update.php will check if the user is authorized to make this change and will make the change if so. It will also set $success = 0 or 1 depending as a success indicator. This $success isn't returned in any way since it's not a function, it's just an internal variable that I have in the update script that could be used if needed.

• How do I make the ajax call such that I get feedback whether the update was allowed ($success=1 in update.php) or not (success = 0 in update.php). I'll use that feedback to update the interface differently.

Extra info:

• Note that I opted not to use a form :) just doing with the <a>

• The update.php script is expecting a $_POST['id'] and $_POST[val] (I'm not going to post the code for update.php here since it's not the point, I'm sure you can imagine what it looks like and what it does)

Answer 1

Emit the value of that success variable as output from the Ajax script and check the value in the Ajax callback.

Answer 2

In a similar vein to Karim79

I do it as follows:

Javascript

function change(){
   var id = $(this).parent().attr('id'); 
   var val = $(this).siblings('.val').html();

   $.ajax({
       url: 'view_mine_and_others.php',
       dataType:"json",
       type: 'POST',
       data: 'id=' + id + '&val=' + val,
       success: function(resp) {
           if($.isFunction(resp.successFunction)) {
               successFunction.apply();
           } else if($.isFunction(resp.failureFunction)){
               failureFunction.apply();
           }
       }
   });
}

PHP

$id=$_POST["id"];
$val=$_POST["val"];
//Do something with these variables
if($success==1){
  echo '{successFunction:function(){
      updateSuccessful();
        }}';
}else{
  echo '{successFunction:function(){
      updateFailed();
        }}';
}

And then again in javascript

function updateSuccessful(){
  //do something because the server returned a success
}

function updateFailed(){
  //do something else because the server returned a failure
}

of course, you do not need the extra "updateSuccessful" and "updateFailed" functions in javascript, because, you can encapsulate whatever these functions do in the functions returned from PHP

so instead of doing this in PHP

echo '{successFunction:function(){
          updateSuccessful();
      }}';

You can do

echo '{successFunction:function(){
    //do something because the operation was successful
      }}';

A sort of javascript code within PHP code....

Answer 3

Here's the quick rundown since the above solutions seemed to miss a few steps and this code handles sanitizing your $_POST data and is perhaps slightly easier to follow:

JAVASCRIPT:

function change() {
   var id = $(this).parent().attr('id'); 
   var val = $(this).siblings('.val').html();

   $.post('/view_mine_and_others.php', { id: id, val: val }, function(data) {
      if (data == '1') {
         alert('success');
      } else {
         alert('error');
      }
   });
   // you MUST return false or the A button will still fire the click event
   return false;
}

PHP:

// assumes both id and val are integer values (sanitizes data)
$id   = (isset($_POST["id"])) ? (int) $_POST['id'] : null;
$val  = (isset($_POST['val'])) ? (int) $_POST['val'] : null;

// do your database work here
// and assume that you create a variable
// called $success which is either true or false
// depending on if the update was successful

// echo the response to be picked up by the AJAX request
echo ($success) ? 1 : 0;
die;