Ajax call return fail using deferred objects / promises

Question

I just been frustrated with it for couple of hours, need some help from real expert. In below code, I expect clicking on the button with class fb_detail_btn to be appended with the data result returned from .ajax function. However, what happened is that the previously non ajax appended data ($(this).append("<div>aaaaaa</div>");) will always be erased once the ajax run. My test shows the php file has run correctly so the problem is why ajax returned data is not able to be appened to $(this) which assigned as a variable.

JavaScript

//GET FEEDBACK DETAIL METHOD//
function get_feeback_detail(result) {
    alert('inside get_feeback_detail, btn_clicked_id is '+btn_clicked_id);
    return $.ajax ({
        type: "POST",
        url: "../x_get/get_feedback_detail.php",
        data:{fb_id: btn_clicked_id},
    }).then(function(data) {
                alert('then ran!');
                //loading_effect_hide();
                var dataSplit = data.split("|");
                commCode = dataSplit[0];
                //alert(dataSplit[1]);
                if(commCode !=1){
                    $('#testInfo').html(dataSplit[1]);
                    $('#testInfo').addClass("errorRed");
                    //$('.fb_review_table_section').empty();
                    alert('returned false for then in ajax!');
                    return false;
                }else{
                    result =dataSplit[1];
                }   
                alert('result inside then is...   '+result);
                //alert(selectedDiv.attr('class'));
                //return result;
                selectedDiv.append(result);
            //loading_effect_hide();    

    }).fail(function(x,s,e) {
            alert(s+": "+e);
            alert('detail button failed!');// an error occurred

            //alert(result);
        });//$.ajax END

    alert('inside get_feeback_detail, result is...   '+result);


};//get_feeback_detail() END



//Detail Button
$(document).on('click','.fb_detail_btn',function(){
    selectedDiv=$(this);
    selectedDiv.append("<div>aaaaaa</div>");
    elementPropertyName = selectedDiv.attr('name');
    btnNames = $(this).attr("name").split("_");
    btn_clicked_id=btnNames[1];
    result="";
    get_feeback_detail();
    selectedDiv.append("<div>bbbbbbb</div>");
});

HTML

<div class="fb_detail_btn" name="detail_68">aaadadadadadad</div>

=Update= Currently, the result of the work will reach .then but result will not be appended.

possible duplicate of [How to return the response from an AJAX call?](http://stackoverflow.com/questions/14220321/how-to-return-the-response-from-an-ajax-call) — Bergi, Aug 14 '13 at 17:34
@Bergi, I came up my solution actually was inspired by the post you referred, but I do not think I used it correctly. If you could, help me on fixing this speicifc problem will be appreciated — ey dee ey em, Aug 14 '13 at 18:02
Then use `.fail(function(x,s,e){alert(s+": "+e);})` to see *why* it's failing not only *that* it's failing. Probably your server is not responding as expected, use the network inspector in your devtools. — Bergi, Aug 14 '13 at 18:31
@Bergi, the new updated version works, but still, result can not be appended — ey dee ey em, Aug 14 '13 at 18:35

score 0 · Answer 1 · answered Aug 14 '13 at 16:13

0

You're misusing promises.

You need to return your new result from a then() callback:

    return $.ajax ({
        type: "POST",
        url: "../x_get/get_feedback_detail.php",
        data: 'fb_id='+btn_clicked_id,
        dataType:'json',//ACW-soemthing new!
    }).then(function(data) {
        ...
        return result;
    });

answered Aug 14 '13 at 16:13

SLaks

868,454
176
1,908
1,964

I am a bit confused on when to accept the btn_clicked_id as a variable for ajax in get_feeback_detail but after the result is returned from the function get_feeback_detail, where should I put the returned result? as btn_clicked_id ? I am confused... – ey dee ey em Aug 14 '13 at 16:30
1

@Chen: You should not be calling `ajaxComplete`. The `then()` callback runs after you get the response, and you need to return your transformed value directly from it. – SLaks Aug 14 '13 at 16:54
I just updated again, fixed fail issue, but still, its can not be appended while data appearantly there. Thanks! – ey dee ey em Aug 14 '13 at 18:35
Thanks for your help, but in more detail,my work do take the string, but it will not load into corosponding cell. Thanks! – ey dee ey em Aug 15 '13 at 12:52
@Chen: Use the debugger to find the problem. – SLaks Aug 15 '13 at 13:52
but the problem is that NO errors return for the Chrome Inspector – ey dee ey em Aug 15 '13 at 14:28
@Chen: Use the **debugger** (Scripts tab) to see what your variables are. – SLaks Aug 15 '13 at 16:05

score 0 · Answer 2 · edited May 23 '17 at 11:49

0

This code cannot work:

return $.ajax ({
    …
}).then(function(data) {
    … // callback
    return result;
}); //$.ajax END

alert('inside get_feeback_detail, result is...   '+result);
selectedDiv.append(result);

Ajax is asynchronous! As you see in the alert, the result is undefined when that part runs. It is available only in the callback! Read How do I return the response from an asynchronous call?, and use

return $.ajax ({
    …
}).then(function(data) {
    … // callback
    // return result; 
    alert('inside ajax callback, result is...   '+result);
    selectedDiv.append(result); // works now!
});

edited May 23 '17 at 11:49

Community

1
1

answered Aug 14 '13 at 18:45

Bergi

630,263
148
957
1,375

I fixed code according to your method, but I am more confused now. Do you mean to run selectedDiv.append(result); inside .then and take out return result? I tried it and updated code, its not working still – ey dee ey em Aug 14 '13 at 18:57
Could you assist me find the error in the code? I did many hours yesterday, I still can't find why. – ey dee ey em Aug 15 '13 at 12:51
Yes, exactly that is what I suggested. – Bergi Aug 15 '13 at 13:08
did you tried to actually execute the code? I tried your solution, it did not work... – ey dee ey em Aug 15 '13 at 13:28
Of course I didn't try it, I don't know what your `data` is. If you don't tell me *what* did not work, I cannot help you… – Bergi Aug 15 '13 at 15:33

Ajax call return fail using deferred objects / promises

2 Answers2