带有 datatype=script 的 jquery post 和带有 rails 的 jquery mobile答案

【问题标题】：jquery post with datatype=script and jquery mobile with rails带有 datatype=script 的 jquery post 和带有 rails 的 jquery mobile
【发布时间】：2012-12-21 11:16:51
【问题描述】：

我有一个同时具有移动和 html 格式类型的应用程序；

在表单中有一个字段必须用远程 Web 服务计算的值填充。使用 jquery，我使用 $(post) API 来调用调用 Web 服务的控制器操作

    $.post(url, $(this).serialize(), null, "script");

控制器计算实例变量...

@myvar = myvalue
....
respond_to do |format|
  format.js 
end

然后返回一个 .js.erb 模板。我在表单中设置字段的值

$('#mymodel_myfield').val('<%= @myvar %>');

这就像 html 中的魅力一样，但我无法让它在移动视图中工作，我正在将 Jquery Mobile 与 Mobylette gem 一起使用。

js.erb 模板中的 jquery 函数没有被执行，因为 rails 需要一个 .mobile.erb 文件。

我也在尝试对移动视图使用不同的方法，即使用 json 或 html 数据类型调用 $.post 并使用回调函数在我的 jqm 视图中注入 .mobile.erb 模板，但找不到让它工作的方法。

有什么提示吗？

【问题讨论】：

标签： jquery ruby-on-rails jquery-mobile

【解决方案1】：

好的，使用了稍微不同的方法，但问题解决了。

注意：我必须使用 wireshark 才能看到到底发送了什么通过rails到移动设备，因为移动设备上没有萤火虫浏览器......当查看发回的数据时，解决方案变得清晰到浏览器，我看到响应包括应用程序布局，而我期望只接收 json 字符串。

1）用于调用控制器动作的jqm形式的按钮是：

<div class="ui-block-c">
  <%= link_to "compute", '#', class: 'compute-myval',:"data-role" => "button", :"data-ajax" => false  %>
</div>

2) 控制器动作将结果保存在实例变量和respond_to json中（控制器名称为“visits_controller”，控制器操作为“compute”）

@total = "value returned from web service"
...
respond_to do |format|
  format.js     #used for HTML views
  format.json
end

3) 有一个视图名为

app/views/visits/compute.json.erb

谁的内容

{ "total": "<%= @total %>" }

4) 按下按钮时执行的jquery代码是

$('form').on('click', '.compute-myval', function(event) {
  var url;
  url='/visit/compute';
  url += '/' + $('#visit_field1').val();
  url += '/' + $('#visit_field2').val();
  url += '/' + $('#visit_field3').val();
  $.ajax( {
    url: url,
    data: $(this).serialize(),
    success: function (mydata) {
      $('#visit_resultfield').val(mydata.total);
    },
    dataType: 'json'
  });
  return event.preventDefault();
});

5) 要管理 :mobile 格式，我使用 Mobylette gem。为了避免通过 Ajax 触发控制器动作使用移动格式并且应用了 application.mobile.erb 模板我必须为 Mobylette 设置几个配置（在 application_controller.rb 中）

include Mobylette::RespondToMobileRequests
mobylette_config do |config|
  config[:skip_xhr_requests] = false
  config[:fallback_chains] = { mobile: [:mobile, :html, :json] }
end

需要的其他事情是在 app/layouts 下有一个名为 application.json.erb 的文件只包含一行

<%= yield %>

因为没有 compute.mobile.erb 视图所以它可以工作，后备是 :json 并且模板没有添加任何东西

6) rails 日志中的输出是

Started GET "/visit/compute/3/78/66" for 192.168.1.7 at 2012-12-22 00:13:35 +0100
Processing by VisitsController#compute as JSON
  Parameters: {"field1"=>"3", "field2"=>"78", "field3"=>"66"}
  Rendered visits/compute.json.erb within layouts/application (0.1ms)
Completed 200 OK in 1335ms (Views: 5.4ms | ActiveRecord: 1.0ms)

7) Jqm 表单中的“resultfield”字段填充了total值。

任务完成...

【讨论】：