2014-08-30 254 views
1

所以我似乎無法得到這些數據來填充我的選擇菜單。我收到了ajax呼叫的迴應,但.html調用似乎忽略了它。有趣的是我注意到,我試過success:.done,但那些實際上是阻塞的,並且根本沒有發射。

$ -> 
    $('#vehicle-query #make').on 'change', -> 
    $.ajax 
     type: 'get' 
     dataType: 'script' 
     url: '/vehicles/model_query' 
     data: 
     make: $(this).val() 
    .complete (opt) -> 
     $('#vehicle-query #model').html opt 
     $('#vehicle-query #model').prop 'disabled', false 
     $('#vehicle-query #year').val '' 
     $('#vehicle-query #year').prop 'disabled', true 
     $('#vehicle-query #style').val '' 
     $('#vehicle-query #style').prop 'disabled', true 

另外要注意的,我正在Rails中這個請求,並從控制器響應:

render partial: 'vehicles/query_menu', 
     object: @models, 
     as: :options, 
     locals: {select: 'Model'}, 
     layout: false 

,建設從HAML文件的響應。

證明,我得到我要的一個迴應:根據文檔

enter image description here

+0

Function(Event event, jqXHR jqXHR, PlainObject ajaxOptions) 

這意味着你會從這樣做中獲益圖像它看起來像你正在使用某種插件來修改''元素。沒有插件,在這裏......你正在看着它。如果我將原始html寫入'.html'方法,它會更新它的方式。我只能想,也許這是haml文件渲染它的方式?線斷了嗎? – Dudo 2014-08-30 21:41:26

+0

換行符在html中是完全有效的 – charlietfl 2014-08-30 21:43:16

回答

0

jQuery的AJAX complete

這個函數會得到兩個參數:jqXHR (在jQuery 1.4.x, XMLHTTPRequest中)對象和將請求的狀態(「成功」,「未修改」,「錯誤」,「超時」,「中止」或 「p arsererror「)。

所以你沒有直接得到html響應。在你的情況下,第一個參數opt將是jqXHR對象。請致電opt.responseText獲取html。

+0

我懷疑'成功'不工作的原因是由於格式不正確的迴應。但無論如何,我上面的解決方案應該工作,雖然它不處理「悲傷的路徑」(當發生錯誤)。 – Ahmed 2014-08-31 02:53:53

0

阿賈克斯

你得到的主要問題是,你的ajaxsuccess功能不起作用

我只學會最近,successerror之間的區別無關與響應類型;這一切都與ajax請求是否擊中目標做

有趣的是,.complete爲你工作,因爲按照由Ahmed提供的參考,這將捕獲successerror回調 - 這表明,我認爲你已經有一個問題,無論是反應,或你的Ajax請求

-

首先,我會改變你的JS(以確保它會與Turbolinks工作):

#app/assets/javascripts/application.js 
$(document).on 'change', '#vehicle-query #make' -> 
    $.ajax 
     type: 'get' 
     dataType: 'script' 
     url: '/vehicles/model_query' 
     data: 
     make: $(this).val() 
     success: (data) -> 
     alert data 
     $('#vehicle-query #model').html data 
     $('#vehicle-query #model').prop 'disabled', false 

     $('#vehicle-query #year').val '' 
     $('#vehicle-query #year').prop 'disabled', true 
     $('#vehicle-query #style').val '' 
     $('#vehicle-query #style').prop 'disabled', true 

其次,僅僅因爲你的.html方法不起作用,並不意味着這件事情無法修復。它只是意味着你可能不會調用正確的功能。

由於您試圖填充您的<select>輸入,我最初對.html函數持懷疑態度。但是,當我在JSFiddle上測試它時,我發現它是一個有效的用例。

所以我實際上看看Ahmed在說什麼 - 很可能是您沒有撥打正確的data回撥。嘗試使用如上success功能,或者您可能想看看引用由complete方法發送不同的數據對象:從

.complete: (opt, data, x) -> 
    //use data