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.

why are you setting an ajaxComplete callback when your ajax request is already done? when the success function runs that is the end of the request you already have your data no need to set ajaxComplete. — Patrick Evans
– Patrick Evans, Commented Jan 29, 2014 at 20:17
Every time you call .ajaxComplete() you're establishing another handler for all AJAX calls. — Barmar
– Barmar, Commented Jan 29, 2014 at 20:19
BTW, .live() was deprecated in jQuery 1.7, and removed in 1.9. Unless you're using an old version of jQuery, you should recode it using .on. — Barmar
– Barmar, Commented Jan 29, 2014 at 20:20
The first charge doesn't work without the ajaxcomplete. I don't know how to do the first charge differently, but I can't run this way the second — Rodrigo
– Rodrigo, Commented Jan 29, 2014 at 20:25

rescuecreative · Accepted Answer · 2014-01-29 20:19:46Z

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.

answered Jan 29, 2014 at 20:19

rescuecreative

3,8893 gold badges21 silver badges28 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Rodrigo Over a year ago

Thanks, you've been very helpful. I deleted the ajaxComplete and it worked correctly

Collectives™ on Stack Overflow

Jquery Ajax call inside Jquery Ajax call

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related