2014-08-30 157 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