Ajax .done function is executing before success in Laravel project

Question

The alert from done function is executing before success. Please help me. What am I doing wrong here:

function load_organization()
{
    return $.ajax({
        url: '/partials/structure',
        method: "GET", 
        data: {id:id},
        success: function (data) {
            $(data.organizations).each(function(index, organization) {
                $("#organization").append(new Option(organization));
            });
        }
    });
}

$(document).ready(function(){
    load_organization().done(function(){
        alert('Success');
    });
});

I think done and success are the same in ajax. see http://stackoverflow.com/a/8847853/3263778 — Sherif, Aug 30 '16 at 12:09
I need to load 3 dependent select boxes (organization, department and section) with informations from mysql. After the first select box is loaded, I need to load the second select box which is dependent on the selected option from the first select box. — grigore16, Aug 30 '16 at 12:20
`var load_organization = $.ajax({ url: '/partials/structure', method: "GET", data: {id:id, organizations:'organizations'}, success: function (data) { 　 $(data.organizations).each(function(index, organization) { $("#organization").append(new Option(organization)); }); } }); load_organization.done(function(){ alert('Success'); });` — grigore16, Aug 30 '16 at 12:51

score 0 · Answer 1 · answered Aug 30 '16 at 12:54

0

"Done" is a callback triggered from a running XHR instance with jQuery.

The doc says:

jqXHR.done(function( data, textStatus, jqXHR ) {}); An alternative construct to the success callback option, refer to deferred.done() for implementation details.

Take a look:

function load_organization()
{
    $.ajax({
        url: '/partials/structure',
        method: "GET", 
        data: {id:id},
        success: function (data) {
            $(data.organizations).each(function(index, organization) {
                $("#organization").append(new Option(organization));
            });
        }
    })
    // Use done here -> look official API doc for some explanations: http://api.jquery.com/jQuery.ajax/
    .done(function(){
        alert('Success');
    });
}

$(document).ready(function(){
    load_organization();
});

Hope this could help you in your solution

answered Aug 30 '16 at 12:54

RPichioli

3,245
2
25
29

Thank you but it still executing alert before populating the select box. I think the problem is in success function. I send an array with json from controller: return response()->json(['organizations'=>$organizations]); So, the select box is populated ok, but only after the alert. What I want, is to populate the second select box, only after the first is loaded, dependent of the value of selected option. – grigore16 Aug 30 '16 at 13:06
You're welcome! With 'done' callback you can remove the 'success', this way you'll load the second box just when you finish the response and have data in hand. Use done with like: .done(function( data ) { .... }, please tell me if this works. – RPichioli Aug 30 '16 at 13:19
I use the _success_ to populate the first select box with json data received from controller. Is there a better way for that? – grigore16 Aug 30 '16 at 13:43
I guess it's your decision, we have a lot of possibilities and you must analyze whats's the best for your need. You can use the callbacks separately like: success or done, fail and always. If you have a sequence of dependents – RPichioli Aug 30 '16 at 13:51

Sanzeeb Aryal · Answer 2 · 2016-08-30T13:42:30.257

You are executing alert('Success'); when load_organization() is called. so irrespective of ajax, the message is displaying. You can alert the success in same single function. And .done() has only one callback and it is the success callback.

function load_organization()
{
    return $.ajax({
        url: '/partials/structure',
        method: "GET", 
        data: {id:id},
        success: function (data) {
            $(data.organizations).each(function(index, organization) {
                $("#organization").append(new Option(organization));
                alert('Success');
            });
        }
    });
}

Ajax .done function is executing before success in Laravel project

2 Answers2