Jquery Ajax call inside Jquery Ajax call

Question

I'm loading a part of a page using ajax with this script:

<script type="text/javascript">
    $(document).ready(function(){
        $('#btn_new').live('click',function(){
            var parameter = 1;
            $.ajax({
                type: "POST",
                url: "new_message.php",
                data: {
                        parameter:parameter,
                },
                success: function(msg)
                {
                    $("#lib_container").ajaxComplete(function(event, request, settings)
                    {
                        $("#lib_container").html(msg);
                    });
                }
            });
        });
    });
</script>

Inside the lib_container div I have a text input with this script:

<script type="text/javascript">
function searchUsers(str) {
        $.ajax({
            type: "POST",
            url: "users_ajax.php",
            data: {
                    search:str
            },
            success: function(msg)
            {
                //console.log(msg);
                //$("#users_lst").html(msg.response);
                $("#users_lst").ajaxComplete(function(event, request, settings)
                {
                    $("#users_lst").html(msg);
                });

            }

        });
}
</script>

When I load some text in the input, the second ajax script loads the msg variable in the div but then also reloaded the lib_container div. I've tried many ways to prevent the lib_container ajax trigger but it was in vain. Just putting the input in new page works correctly.

Can anyone help me solve this?

Thanks.

Answer 1

Your problem seems to be that you are registering a new ajaxComplete handler every time you get a successful response from the ajax call. Since it seems like you want to update the html, I'm not sure why you need those ajaxComplete handlers anyway.

Try it like this:

$(document).ready(function(){
    $('#btn_new').live('click',function(){
        var parameter = 1;
        $.ajax({
            type: "POST",
            url: "new_message.php",
            data: { parameter:parameter },
            success: function(msg) {
                $("#lib_container").html(msg);
            }
        });
    });
});

And by the same token:

function searchUsers(str) {
    $.ajax({
        type: "POST",
        url: "users_ajax.php",
        data: { search:str },
        success: function(msg) {
            $("#users_lst").html(msg);
        }

    });
}

On another note, .live is deprecated and you really ought to be using ajax promises rather than a success callback. See the jQuery api for more info on that.