CODEWITHSUNDEEP
javascriptajax
murum
murum

Reputation: 575

values won't get updated in a function because of a ajax call

I'm writing a javascript function that should change the view of a postcard depending on which case is selected.

My problem is that the old values of the object "m_case" is getting used. If I press the button with class "case-btn" twice I get the right case selected in my postcard view. But I want it to be triggered when I press the button once.

I guess I have to do something like a callback function in the m_case.setCase() function call, but I can't get it working, 

$('.case-btn').on('click', function() {
    remove_active_state_from_cases();

    m_case.setCase($(this).data('case'));

    // Changes the view of the postcard
    m_postcard.changeBackground(m_case.getPhoto());
    m_postcard.changeMessage(m_case.getMessageText());
    m_postcard.changeFullName(m_case.getFullName());
    m_postcard.changeCountry(m_case.getCountry());

    $(this).toggleClass('active');
});

The setCase() function

this.setCase = function(id) {
    // Set ID
    this.setID(id);
    var that = this;

    $.ajax({
        url: 'get_case_by_id.php',
        type: 'get',
        dataType: 'json',
        data: {id: that.getID() },
        success: function(data) {
            if(data.success) {
                that.setFirstName(data.first_name);
                that.setFullName(data.full_name);
                that.setAdress(data.adress);
                that.setCountry(data.country);
                that.setStamp(data.stamp);
                that.setPhoto(data.photo);
                that.setSummary(data.summary);
                that.setStory(data.story);
                that.setMessageText(data.message_text);
                that.setDefaultMessageText(data.default_message_text);
                that.setMessageImg(data.message_img);
            } else {
                console.log('failure');
            }
        }

EDIT The problem might be in my AJAX call, I have to wait till the ajax have been called. but how do I continue the first flow when my Ajax is done and not before?

SOLUTION

I made it working by adding a callback parameter and calling that function in the ajaxs complete function.

$('.case-btn').on('click', function() {
    remove_active_state_from_cases();
    var that = this;

    m_case.setCase($(this).data('case'), function() {

        m_postcard.changeBackground(m_case.getPhoto());
        m_postcard.changeMessage(m_case.getMessageText());
        m_postcard.changeFullName(m_case.getFullName());
        m_postcard.changeCountry(m_case.getCountry());

        $(that).toggleClass('active');
    }); 
});

// Sets the whole case from an id.
this.setCase = function(id, callback) {
    // Set ID
    this.setID(id);
    var that = this;

    $.ajax({
        url: 'get_case_by_id.php',
        type: 'get',
        dataType: 'json',
        data: {id: that.getID() },
        success: function(data) {
            if(data.success) {
                that.setFirstName(data.first_name);
                that.setFullName(data.full_name);
                that.setAdress(data.adress);
                that.setCountry(data.country);
                that.setStamp(data.stamp);
                that.setPhoto(data.photo);
                that.setSummary(data.summary);
                that.setStory(data.story);
                that.setMessageText(data.message_text);
                that.setDefaultMessageText(data.default_message_text);
                that.setMessageImg(data.message_img);
            } else {
                console.log('fail big time');
            }
        },
        complete: function() {
            callback();
        }
    });
}

Upvotes: 0

Views: 52

Answers (1)

Patrick Evans
Patrick Evans

Reputation: 42736

Your m_postcard.changeBackground and other calls should be in the success callback, or in another function that is called from the success callback, as those values aren't set till the async ajax call is done.

With the way your code is now the m_postcard.changeBackground and other calls are called immediately after your setCase function is done executing. This means your methods are executed before the data has arrived from the server

While the ajax is processing you probably should show a loading message on the screen to let the user know they have to wait till the processing is done. Show the message before calling the .ajax call and hide it in the success/error callbacks.

Any changes to the site content should be done from the success callback, ie changing active states, changing content, etc.

Upvotes: 1

Related Questions