class not updating via jquery

Question

$(document).ready(function() {
    var session = {};
    // Getting PHP session variables into javascript object in order to restric actions for certain users.
    $.getJSON('session.php',function(data){
       session = data;
       console.log(session.role); // currently showing 2.
    });
    // Display datagrid on page
    getRecords();
    // If not admin, disable certain actions
    if(session.role != 1){ // means it is 2
        $("#deletecustomer").attr('class','btn btn-danger disabled');
    }
    });

Hi,

i m trying to disable the delete record button based on the user role. But i dont know why it is not updating the class of my button even though the console is showing role = 2.

Thanks

read about ajax respobse handling http://stackoverflow.com/questions/14220321/how-to-return-the-response-from-an-ajax-call — Arun P Johny, Jan 11 '14 at 15:06

Louis XIV · Accepted Answer · 2014-01-11T15:17:56.573

1

Since AJAX is asynchronous, please play with it in the callback:

$(document).ready(function() {
    var session = {};
    // Getting PHP session variables into javascript object in order to restric actions for certain users.
    $.getJSON('session.php',function(data){
       session = data;
       console.log(session.role); // currently showing 2.
       // Display datagrid on page
       getRecords();
       // If not admin, disable certain actions
       if(session.role != 1){ // means it is 2
           $("#deletecustomer").attr('class','btn btn-danger disabled');
       }
    });

});

EDIT: Without possibility to put thisinside the same parts of code, you can do:

var session = {};

var getSessionData = function(callback) {
    $.getJSON('session.php',function(data){
       session = data;
       console.log(session.role); // currently showing 2.
       // Display datagrid on page
       callback.call();
    });
}

var updateButton = function() {
    getRecords();
    // If not admin, disable certain actions
    if(session.role != 1){ // means it is 2
        $("#deletecustomer").attr('class','btn btn-danger disabled');
    }
}

getSessionData(updateButton);

edited Jan 11 '14 at 15:17

answered Jan 11 '14 at 15:08

Louis XIV

2,224
13
16

but i declared var session before ajax call so as to make it global ?? – Raheel Jan 11 '14 at 15:10
The thinkg is, if you don't put session in the callback, it will be read before AJAX will update it. But if you put it in the callback and make it global, you will be able to read it in future click events (for example). – Louis XIV Jan 11 '14 at 15:12
and due to my code structure i cannot include my getRecords(); function within the getJson.. – Raheel Jan 11 '14 at 15:13
1

@Raheel That's not how AJAX or globals work. The AJAX callback will run, setting `session = data`, **after** your entire function has completely finished and returned. – user229044 Jan 11 '14 at 15:17
OK I edited my answer to explain how to do on different parts of code. – Louis XIV Jan 11 '14 at 15:18
@meagar as per your guideline i updated my code i replaced getJson with simple ajax call with async:false. I checked the console and THIS PROVES IT is now executing after my ajax call but still i am not getting my class udpated :( – Raheel Jan 11 '14 at 21:02
@Raheel: check if there is no typo in deletecustomer, check if this id is unique ([explainations](http://webdesign.about.com/od/css/f/blfaqmultiIDs.htm)) and have a look on [addClass](http://api.jquery.com/addclass/) – Louis XIV Jan 11 '14 at 21:09

class not updating via jquery

1 Answers1