CODEWITHSUNDEEP
javascripthtmlscopeglobal-variables
Engr. Arda
Engr. Arda

Reputation: 177

How to use global variable in JavaScript?

I want to change a global variable in the top ajax form and use it in the bottom ajax form. This is not working when I do like this:

var xGlobalTitle; //global variable that I want to use
$.ajax({
    type: 'GET',
    url: '/Home/postInformationofConferenceTitle',
    dataType: "JSON",
    success: function (data) {

            xGlobalTitle = data.xglobalTitle; //I want to change the value of the variable in here.

    }
})


    alert(window.xGlobalTitle); //And I want to use this value in here
    $.post("/Home/selectRooms", { xtitle: xGlobalTitle }, function (data) {

            var ndx = 0;
            $.each(data.xroom_name, function (key, value) {

                var Xroom_name = data.xroom_name[ndx];
                var Xroom_plan = data.xroom_plan[ndx];

                var column =
                  ('<tr>' +
                    '<td>' +
                    '<div class="img-container">' +
                    '<img src="../../assets/img/room-plan/' + Xroom_plan + '" alt="..." id="imgsrc">' +
                    '</div>' +
                    '</td>' +
                    '<td id="imgname">' + Xroom_name + '</td>' +
                    '<td class="text-right">' +
                    '<a href="#" class="btn btn-simple btn-warning btn-icon edit" data-toggle="modal" data-target="#myModal"><i class="fa fa-edit"></i></a>' +
                    '<a href="#" class="btn btn-simple btn-danger btn-icon remove" ><i class="fa fa-times"></i></a>' +
                    '</td>' +
                    '</tr>');

                document.getElementById('colmn').innerHTML = document.getElementById('colmn').innerHTML + column;

                ndx++;

            });

        });

How can I do this . Is there anyone in this regard who will support me?

Upvotes: 1

Views: 58

Answers (4)

k-kundan
k-kundan

Reputation: 46

Your second request is happening without waiting for the data coming from the the first one(async call),so there are many ways to do this also one of that

var xGlobalTitle; //global variable that I want to use $.ajax({ type: 'GET', url: '/Home/postInformationofConferenceTitle', dataType: "JSON", success: function (data) {

        xGlobalTitle = data.xglobalTitle; //I want to change the value of the variable in here.

        alert(window.xGlobalTitle); //And I want to use this value in here

        $.post("/Home/selectRooms", { xtitle: xGlobalTitle }, function (data) {

                var ndx = 0;
                $.each(data.xroom_name, function (key, value) {

                    var Xroom_name = data.xroom_name[ndx];
                    var Xroom_plan = data.xroom_plan[ndx];

                    var column =
                      ('<tr>' +
                        '<td>' +
                        '<div class="img-container">' +
                        '<img src="../../assets/img/room-plan/' + Xroom_plan + '" alt="..." id="imgsrc">' +
                        '</div>' +
                        '</td>' +
                        '<td id="imgname">' + Xroom_name + '</td>' +
                        '<td class="text-right">' +
                        '<a href="#" class="btn btn-simple btn-warning btn-icon edit" data-toggle="modal" data-target="#myModal"><i class="fa fa-edit"></i></a>' +
                        '<a href="#" class="btn btn-simple btn-danger btn-icon remove" ><i class="fa fa-times"></i></a>' +
                        '</td>' +
                        '</tr>');

                    document.getElementById('colmn').innerHTML = document.getElementById('colmn').innerHTML + column;

                    ndx++;

                });

            });

}

})

Upvotes: 0

brk
brk

Reputation: 50291

This will not work because ajax being asynchronous.There is no certainty when the first ajax will be success

So in order to use the value in the second ajax you need to wait till the first ajax is successful. This issue can be solved chaining all the ajax or by using Promise & .then

Also .done method of jquery ajax can be helpful.Put the $.post inside the .done callback function

var xGlobalTitle; //global variable that I want to use
$.ajax({
    type: 'GET',
    url: '/Home/postInformationofConferenceTitle',
    dataType: "JSON",
    success: function (data) {
        xGlobalTitle = data.xglobalTitle; //I want to change the value of the variable in here.
    }
}).done(function(data){
    alert(window.xGlobalTitle)
    $.post("/Home/selectRooms", { xtitle: xGlobalTitle }, function (data) {
     //rest of the code

    })

})

Upvotes: 2

Ariel Pepito
Ariel Pepito

Reputation: 659

In your ajax you should used async: false

follow this link from stockoverflow answer

var xGlobalTitle; //global variable that I want to use
$.ajax({
    type: 'GET',
    async: false,
    url: '/Home/postInformationofConferenceTitle',
    dataType: "JSON",
    success: function (data) {

            xGlobalTitle = data.xglobalTitle; //I want to change the value of the variable in here.

    }
})

Upvotes: 0

kshetline
kshetline

Reputation: 13682

This is an issue of timing, not of access to the global variable. Your alert executes before xGlobalTitle = data.xglobalTitle; executes.

Upvotes: 1

Related Questions