Question

I have a small problem in my code.
I have a function, which require loadData AJAX page.
This result puts checkboxes on my pages. (this is OK)

Now I want when I click a checkbox, executes an AJAX request is to change a value in the database (this is also ok).

The problem is:
When I click on a checkbox (unchecked) it tick and execute the ajax, once the ajax executed, the box is uncheck all alone.

I made several tests and I realized that the problem occurs only when the checked boxes from an Ajax request.

Note : I’ve tried to add the $(selector).attr(‘checked’, true) and false, but nothing work.

Jquery (The Problem is in loadData Function when Ajax is executed, the checkbox uncheck alone) :

 $(document).ready(function()  {
    $('#TableContainer .RCkbox').live('click',function(){

        var idOperation = 550;
        if($(this).is(":checked")){

            $.ajax({
                type: "POST",
                url: "includes/ajax/OperationRapprochement.php",
                data: "sessionId=" + <?php echo $User->getId(); ?> + "&AccountNumber=" + <?php echo $compte->getId(); ?> + "&idOperation=" + idOperation + "&action=rapproche",
                success: function(msg)
                {
                    //TODO  

                }
            });
        }
        else{

                $.ajax({
                type: "POST",
                url: "includes/ajax/OperationRapprochement.php",
                data: "sessionId=" + <?php echo $User->getId(); ?> + "&AccountNumber=" + <?php echo $compte->getId(); ?> + "&idOperation=" + idOperation + "&action=derapproche",
                success: function(msg)
                {
                      //TODO

                }
            });
       }
    });


    function loadData(){
    $.ajax({
            type: "POST",
            url: "includes/ajax/test.php",
            data: "sessionId=" + <?php echo $User->getId(); ?> + "&AccountNumber=" + <?php echo $compte->getId(); ?>,
            success: function(msg){
                    $("#TableContainer").ajaxComplete(function(event, request, settings){
                           $("#TableContainer").html(msg);
                    });
            }
        });
    }

    loadData();
});

I’ve make video to show you the problem in action : http://youtu.be/nG9XF2f4M18

Thanks for your help.

Answer 1

** Answer was updated from the information I got in the comments **

I found the problem in your files.

The thing is that you use the event “.ajaxComplete”.
If you read the documentation correctly, it says that the event gets call everytime an ajax call gets made.

So since you make an ajax call when you click on a checkbox, when you receive the result, the callback in the loadData function gets called again meaning that it executes $("#TableContainer").html(msg); again… in other words, it replaces the content again.
That’s why you lose the checked checkboxes.

All you have to change in your code is remove the events .ajaxComplete since you don’t need them.

This is your code:

function loadData(){
    $.ajax
    ({
        type: "POST",
        url: "includes/ajax/test.php",
        data: "number=" + number,
        success: function(msg)
        {
            $("#TableContainer").ajaxComplete(function(event, request, settings) {
                $("#TableContainer").html(msg);
            });
        }
    });
}

It should be:

function loadData(){
    $.ajax
    ({
        type: "POST",
        url: "includes/ajax/test.php",
        data: "number=" + number,
        success: function(msg)
        {
                $("#TableContainer").html(msg);
        }
    });
}

Same thing for your other 2 ajax requests.
The code in success gets executed when it receives a result.