Adding callback parameter to $.ajax with jsonp

Question

I am trying to implement jQuery ajax call for cross domain call using jsonp, and the code is like -

$.ajax({
    async:true,
    cached:true,
    url: 'cfcs/TempRepository.cfc?method=getAllCategories'
        +'&storeID='+ storeId
        +'&callback=?',
    type: 'get',
    data: '',
    dataType: 'jsonp',
    success: PopulateCategoryObject,
    error: function (xhr, status, error) {
        console.log(xhr + ',' + status + ',' + error);
    }
});

function PopulateCategoryObject(results) {
    //populate the categories
}

I am confused here with the use of callback. If I remove success attribute of $.ajax and use callback=PopulateCategoryObject in place of callback=? like -

$.ajax({
    async:true,
    cached:true,
    url: 'cfcs/TempRepository.cfc?method=getAllCategories'
        +'&storeID='+ storeId
        +'&callback=PopulateCategoryObject',
    type: 'get',
    data: '',
    dataType: 'jsonp',
    error: function (xhr, status, error) {
        console.log(xhr + ',' + status + ',' + error);
    }
});

the difference it makes is, it returns result like -

PopulateCategoryObject, jQuery172012112959187034678_1376976441013( // data here )

And, the function PopulateCategoryObject is not executed.

I am unable to figure it out how to set the callback function here? and why is "jQuery172012112959187034678_1376976441013" getting added here with the result?

Thanks In Advance.

I want to call "PopulateCategoryObject" directly, rather than through success, because each time "jQuery172012112959187034678_1376976441013" is added to the url and the ajax call is not getting cached here. Keeping callback=PopulateCategoryObject, may keep it cached. I am not sure about it. — Ashmah
– Ashmah, Commented Aug 20, 2013 at 6:10

Arun P Johny · Accepted Answer · 2013-08-20 05:59:35Z

1

Try

$.ajax({
    cached:true,
    url: 'cfcs/TempRepository.cfc?method=getAllCategories' + '&storeID=' + storeId,
    jsonpCallback: 'PopulateCategoryObject',
    dataType: 'jsonp',
    error: function (xhr, status, error) {
        console.log(xhr + ',' + status + ',' + error);
    }
});

answered Aug 20, 2013 at 5:59

Arun P Johny

389k68 gold badges532 silver badges532 bronze badges

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

1 Comment

Ashmah Over a year ago

Hi Arun, it's returning PopulateCategoryObject(//result), but the function is not getting called, is there anything else we need to set?

BorisD · Accepted Answer · 2013-08-27 05:37:46Z

0

If you don't want your ajax call to cache: set the "cache" parameter to false... otherwise set it to true.

Another thing...if you don't want to use "success" parameter to trigger your callback, try jquery $.deffer: Read this! : http://learn.jquery.com/code-organization/deferreds/examples/

answered Aug 27, 2013 at 5:37

BorisD

2,2615 gold badges25 silver badges36 bronze badges

Collectives™ on Stack Overflow

Adding callback parameter to $.ajax with jsonp

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related