If I have to leverage niceties of jQuery AJAX API and set my own custom settings for each ajax call my app makes like below:

Say I have a page which displays employee information within table by making ajax calls to some API.

define(["jQuery"], function($) {
    var infoTable = function (options) {

        function init() {
            // Provide success callback
            options.success_callback = "renderData";
            getData();
        }

        function renderData() {
            // This callback function won't be called as it is not 
            // in global scope and instead $.ajax will try to look 
            // for function named 'renderData' in global scope.
            // How do I pass callbacks defined within requirejs define blocks?
        }

        function getData() {
            $.ajax({
                url: options.apiURL,
                dataType: options.format,
                data: {
                    format: options.format,
                    APIKey: options.APIKey,
                    source: options.source,
                    sourceData: options.sourceData,
                    count: options.count,
                    authMode: options.authMode
                },
                method: options.method,
                jsonpCallback: options.jsonpCallback,
                success: options.success_callback,
                error: options.error_callback,
                timeout: options.timeout
            });
        }
    }

    return {
        init: init
    }
}

How do I achieve this?

I know we can use JSONP request as require calls but that restricts me to using jsonp, making GET requests and all other features $.ajax offers.

If I have to leverage niceties of jQuery AJAX API and set my own custom settings for each ajax call my app makes like below:

Say I have a page which displays employee information within table by making ajax calls to some API.

define(["jQuery"], function($) {
    var infoTable = function (options) {

        function init() {
            // Provide success callback
            options.success_callback = "renderData";
            getData();
        }

        function renderData() {
            // This callback function won't be called as it is not 
            // in global scope and instead $.ajax will try to look 
            // for function named 'renderData' in global scope.
            // How do I pass callbacks defined within requirejs define blocks?
        }

        function getData() {
            $.ajax({
                url: options.apiURL,
                dataType: options.format,
                data: {
                    format: options.format,
                    APIKey: options.APIKey,
                    source: options.source,
                    sourceData: options.sourceData,
                    count: options.count,
                    authMode: options.authMode
                },
                method: options.method,
                jsonpCallback: options.jsonpCallback,
                success: options.success_callback,
                error: options.error_callback,
                timeout: options.timeout
            });
        }
    }

    return {
        init: init
    }
}

How do I achieve this?

I know we can use JSONP request as require calls but that restricts me to using jsonp, making GET requests and all other features $.ajax offers.

• javascript
• jquery
• ajax
• callback
• requirejs

Share Improve this question Follow edited Sep 10, 2013 at 9:51 Melwyn Furtado asked Sep 9, 2013 at 18:09 Melwyn FurtadoMelwyn Furtado 34044 silver badges1212 bronze badges 5

• 3 What does not work in this code? And what does this have to do with require.js? – Bergi Commented Sep 9, 2013 at 18:29
• Why are you using JSONP instead of plain JSON? Can you post a sample response? – Pedro L. Commented Sep 9, 2013 at 19:17
• Sorry for not being clear, I have updated the question. Whole reason is passing callbacks within requirejs define blocks. – Melwyn Furtado Commented Sep 10, 2013 at 9:49
• 1 Pass function references to the success, etc, callbacks, rather than strings. – Paul Grime Commented Sep 10, 2013 at 9:57
• You are returning init:undefined - that can't help your situation. – Adam Jenkins Commented Sep 11, 2013 at 13:14

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 5

This example would let you either use a default success callback, or provide an override, using:

success: options.successCallback || renderData

(The example uses jsfiddle rest URLs - this fact is unimportant, and stripped out the data object to keep the example short)

define("mymodule", ["jquery"], function($) {
    function renderData() {
        console.log("inside callback");
    }

    function getData(options) {
        $.ajax({
            url: options.apiURL,
            dataType: options.format,
            method: options.method,
            jsonpCallback: options.jsonpCallback,
            success: options.successCallback || renderData,
            error: null,
            timeout: options.timeout
        });
    }

    return {
        getData: getData
    }
});

require(["mymodule"], function(m) {
    console.log(m, m.getData({
        apiURL: "/echo/json/"
    }));
    console.log(m, m.getData({
        successCallback: function() { console.log("outside callback"); },
        apiURL: "/echo/json/"
    }));
});

Would print:

GET http://fiddle.jshell/echo/json/ 200 OK      263ms
Object { getData=getData()} undefined
GET http://fiddle.jshell/echo/json/ 200 OK      160ms
Object { getData=getData()} undefined
inside callback
outside callback