2013-08-19 53 views
0

我在寫一個javascript函數,它應該根據選擇哪種情況更改明信片的視圖。由於ajax調用,值不會在函數中得到更新

我的問題是對象「m_case」的舊值正在被使用。如果我按下類「case-btn」兩次的按鈕,我會在我的明信片視圖中選擇正確的案例。但是當我按下一次按鈕時,我希望它被觸發。

我想我必須做一些像m_case.setCase()函數調用回調函數,但我不能讓它工作,

$('.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'); 
}); 

的setCase()函數

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'); 
      } 
     } 

編輯問題可能出在我的AJAX調用中,我必須等到ajax被調用。但是當我的Ajax完成而不是之前,如何繼續第一個流程?

SOLUTION

我把它加入了回調參數,並呼籲在ajaxs是功能完整的功能工作。

$('.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(); 
     } 
    }); 
} 

回答

1

m_postcard.changeBackground和其他呼叫應在success回調,或在從成功回調調用,因爲這些值都沒有設置,直到異步Ajax調用所做的另一項功能。

隨着您的代碼現在的方式m_postcard.changeBackground和其他調用立即在setCase函數完成執行後調用。這意味着您的方法在數據從服務器到達之前執行

ajax正在處理時,您可能應該在屏幕上顯示一條加載消息,讓用戶知道他們必須等待處理完成。在調用.ajax調用之前顯示消息並將其隱藏在成功/錯誤回調中。

到網站內容的任何改變應該從成功回調來完成,即改變active狀態,改變內容等

+0

謝謝你的回答,我把它加入一個回調函數作爲PARAM工作,在ajaxes函數中調用這個函數,你對這個答案有什麼看法? – murum

相關問題