AJAX POST with php and sql-query works only once

Question

i want to delete an item from a list with ajax,php and mysql. When i reload the page the AJAX request works perfectly. But the second time AJAX returns success but the item won't be deleted from the database. When i reload again the AJAX request works again.

This is my html:

<ul>
    <li>
        Name1
        <input type="hidden" name="job_id" value="1">
        <input type="hidden" name="job_name" value="Name1">
        <input type="hidden" name="job_delete_from_list" value="true">
        <input type="submit" title="Löschen" class="btn-del-job" value="1">
    </li>
    <li>
        Name2
        <input type="hidden" name="job_id" value="1">
        <input type="hidden" name="job_delete_from_list" value="Name1">
        <input type="hidden" name="job_delete_from_list" value="true">                      
        <input type="submit" title="Löschen" class="btn-del-job" value="1">
    </li>
</ul>

My AJAX looks like this:

$( ".btn-del-job" ).click(function(e) {

    var target = $(this);
    var postData = $(this).closest("form").serialize();
    var formURL = "ajax.test.php";

    $.ajax({
        type: 'POST',
        url: formURL,
        data: postData,
        cache: false,
        success: function(data){
            console.log(data);
            target.closest("li").hide("slow");
        },
        error:  function(jqXHR, textStatus){
            alert("Status: "+ jqXHR.status);
            alert("textStatus: " + textStatus);
        }
    });     
    e.preventDefault(); 
});

And this is my php (I know this is crap and deprecated, not my fault):

if($_POST['job_deleting']) { 

    $jobId = $_REQUEST['job_id'];

    $jobs = new Jobs;
    $deleteJob = $jobs->__deleteJob($jobId);

}

This is the function:

public function __deleteJobFromList($jobId,$jobName) {
    $jobs_query = "SELECT jobs FROM table WHERE id='$jobId'";
    $jobs_result = mysql_query($jobs_query);
    $jobs_row = mysql_fetch_assoc($jobs_result);

    $jobs_imploded = implode(',', $jobs_row);

    $jobs_exploded = explode(',', $jobs_imploded);

    if(($key = array_search($jobName, $jobs_exploded)) !== false) {
        unset($jobs_exploded[$key]);
    }

    $newJobs = implode(',', $jobs_exploded);

    $job_query = "UPDATE table 
                  SET jobs='$newJobs'
                  WHERE id='$jobId'";

    $result = mysql_query($job_query) OR die(mysql_error());

}

My database looks like this:

table: id,name,jobs(Name1,Name2) // comma seperated list

Where is my error?

Thanks in advance and best regards

Answer 1

Set no-cache headers on the page doing the work serverside.

  header('Cache-Control: no-store, no-cache, must-revalidate, post-check=0, pre-check=0');
  header('Pragma: no-cache');

IE in particular loves to cache Ajax returns. You will have to use the most forceful no-cache headers to stop it from doing so.

When not using jQuery you would also want to pass a parameter in to Ajax that is just random or a timestamp to trick IE into not caching. You're already using the jQuery methods that does the same thing, but probably you still need the no-cache headers.

Answer 2

The problem was just the html-code. I'm sorry, i didn't post the complete html-code.

It was a foreach loop which constructs my html:

print '<ul>';

$first = true;
foreach ($jobs_exploded as $row ) {
     if ($first) {
         echo '<li>'.$row;
         print '<form class="deleteJobFromList" method="post"><input type="hidden" name="job_id" value="'.$jobId.'">
         <input type="hidden" name="job_name" value="'.$row.'">
        <input type="hidden" name="job_delete_from_list" value="true">
        <input type="submit"  title="Löschen" class="btn-del-job" value="1">';
        echo '</form></li>';
        $first = false;
     } else {
         echo '<li>'.$row;
        print '<form class="deleteJobFromList" method="post"><input type="hidden" name="job_id" value="'.$jobId.'">
         <input type="hidden" name="job_delete_from_list" value="'.$row.'">
         <input type="hidden" name="job_delete_from_list" value="true">                     
         <input type="submit" title="Löschen" class="btn-del-job" value="1">';
         echo '</form></li>';
    }
    }; 
    echo '</ul></p>'."\n";

The else part was corrupt. Two fields got the same name. Sometimes one can't see the wood for the trees.

Thank you anyways!