Assigning a value to a global variable inside an ajax call and using it in a separate .js file

Question

I have two separate .js files and I want to assign the value of a global variable called citId inside an ajax call in my first .js file and then use that variable in my second .js file.

The code is too long to post, so I've put an example of what I'm trying to do.

My first .js file is main.js :

var citId = "";
$(document).ready(function($) {
var url = some url;

$.ajax({
    type: 'GET',
    url: url,
    jsonpCallback: 'getSBJSON',
    contentType: "application/json",
    dataType: 'jsonp',
    success: function(json) {
                  //Does some stuff

                   urlId = product of some stuff;

        $.ajax({
            type: 'GET',
            url: url + urlId,
            jsonpCallback: 'getSBJSON',
            contentType: "application/json",
            dataType: 'jsonp',
            success: function(json) {

                if (json.length > 0) {
                    citId = urlId;
                    window.open('Citations.html', '_self');
                } else {
                var page = linkBase + urlId;
                window.open(page);
                }  
            },
            error: function(e) {
                console.log(e.message);
            }   
         });  

    });   
    },
    error: function(e) {
        console.log(e.message);
    }
});
});

and my second .js file is citations.js :

$(document).ready(function($) {

    var itemLnkId = citId;
    $.ajax({
        type: 'GET',
        url: url + citId,
        jsonpCallback: 'getSBJSON',
        contentType: "application/json",
        dataType: 'jsonp',
        success: function(json)
        // more stuff

    });
});

I've read a lot of answers that either show how to assign the global variable inside the ajax call or how to use a global variable across .js files but nothing that shows how to do both combined.

When I've simply used a global variable, it works for the original value but does not show the value being changed inside the ajax call. Is there some way to do both assigning a value and then using it in a different .js file?

Answer 1

Instead of using a global variable why don't you pass the variable that you need using invokedata of the ajax call?

to use it in the success call.

Example http://weboutofthebox.com/en-GB/28/Article/Ajaxinvokedataparameter

Answer 2

Javascript does not 'hold' when the AJAX call is executed, it is asynchroneous and for the second ajax call, the variable is not set yet. So... Try this:

citations.js:

$(document).ready(function($) {
var url = some url;
$.ajax({
    type: 'GET',
    url: url,
    jsonpCallback: 'getSBJSON',
    contentType: "application/json",
    dataType: 'jsonp',
    success: function(json) {
                  //Does some stuff

                   urlId = product of some stuff;

        $.ajax({
            type: 'GET',
            url: url + urlId,
            jsonpCallback: 'getSBJSON',
            contentType: "application/json",
            dataType: 'jsonp',
            success: function(json) {

                if (json.length > 0) {
                    readyToGo(citId);
                    window.open('Citations.html', '_self');
                } else {
                var page = linkBase + urlId;
                window.open(page);
                }  
            },
            error: function(e) {
                console.log(e.message);
            }   
         });  

    });   
    },
    error: function(e) {
        console.log(e.message);
    }
});
});

main.js:

var readyToGo = function() {

    var itemLnkId = arguments[0];
    $.ajax({
        type: 'GET',
        url: url + citId,
        jsonpCallback: 'getSBJSON',
        contentType: "application/json",
        dataType: 'jsonp',
        success: function(json)
        // more stuff

    });
}

Something like this will do :)

Answer 3

$('.actived').click(function(){         
            var status = "Actived";
            var register_id=1;
            (function(status){              
                $.ajax({                
                    //url: "<?php echo base_url();?>index.php?admin/home/toggleActive",
                    type: "POST",
                    data: {                     
                        "register_id" : register_id,
                        "status":status
                    },
                    //datatype: 'json',
                    success: function(data){

                    },
                    error:function(){
                        alert("failure");
                    }
                });         
            })(status);

        });


I hope that it will help you...