How to use global variable in JavaScript?

Question

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?

brk · Accepted Answer · 2018-03-17T03:23:34.073

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

    })

})

That's a good answer, but I've already done it. But when I do this, the first line of the DataTable shows 'no data available in table'. So before the ajax form works, the datatable.js file is working namely The system can not read any data in the DataTable. Then when the ajax form run , my data is saved in the datatable, but the first line shows 'no data available in table'.And the data is dysfunctional. So I can not press the update and delete buttons. — Engr. Arda, Mar 17 '18 at 03:43

score 1 · Answer 2 · answered Mar 17 '18 at 03:10

1

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

answered Mar 17 '18 at 03:10

kshetline

12,547
4
37
73

So how can I do for this ? – Engr. Arda Mar 17 '18 at 03:16

score 0 · Answer 3 · answered Mar 17 '18 at 03:21

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.

    }
})

score 0 · Answer 4 · answered Mar 17 '18 at 03:32

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++;

                });

            });

}

})

How to use global variable in JavaScript?

4 Answers4