【问题标题】:How to replace the div in Rails 3 using AJAX?如何使用 AJAX 替换 Rails 3 中的 div?
【发布时间】:2011-07-20 11:20:08
【问题描述】:

我试图使用 RJS 替换 DOM 中的 div。这是我试过的代码, 控制器有这个方法:

def change
  render :update do |page|
    page.replace(:test_id, :partial => "input",:locals =>{ :type => 'text', :name => 'user[user][contactinfo][city]', :val => "", :size => '244', :placeholder_text => 'Yes it is working...'})
  end
end

视图包含:

<div id = "test_id"></div>
<%= link_to "AJAX", "/poc/change", :remote => true %>

现在我想用提到的部分替换div id="test_id"

我得到的输出是:

try {
Element.replace("test_id", "<input type=\"text\" id=\"user[user][contactinfo][city]\" name=\"user[user][contactinfo][city]\" value=\"\" placeholder=\"Yes it is working...\" style=\"width:244px; height:33px; border:0; color:#646464; background:url(/images/form_textfield_244.png) 0 5px no-repeat; padding:12px 5px 0 5px; margin:0 0 10px 0;\" />\n");
} catch (e) { alert('RJS error:\n\n' + e.toString()); alert('Element.replace(\"test_id\", \"<input type=\\\"text\\\" id=\\\"user[user][contactinfo][city]\\\" name=\\\"user[user][contactinfo][city]\\\" value=\\\"\\\" placeholder=\\\"Yes it is working...\\\" style=\\\"width:244px; height:33px; border:0; color:#646464; background:url(/images/form_textfield_244.png) 0 5px no-repeat; padding:12px 5px 0 5px; margin:0 0 10px 0;\\\" />\\n\");'); throw e }

这是在浏览器中看到的。谁能解释我哪里出错了?预期的输出是 div 应该被替换为任何给定的替换。

【问题讨论】:

    标签: ajax ruby-on-rails-3 rjs


    【解决方案1】:

    我建议你不要再使用 RJS。更好的是生成一个 JS 视图,你想要你的 javascript 做。

    例如,如果你使用 jQuery,你可以添加一个文件:

    changes.js.erb

    在你里面添加你的Javascript:

    $('#test_id').html("<%= escape_javascript(render :partial => "input",:locals =>{ :type => 'text', :name => 'user[user][contactinfo][city]', :val => "", :size => '244', :placeholder_text => 'Yes it is working...'}) %>")
    

    现在,如果您调用 /proc/change.js,您可以看到生成的 JS,就像您在页面中执行一些 JS 一样。

    【讨论】:

    • RJS有什么问题?
    • @AashishP RJS 已被弃用且存在缺陷,因为它会为您生成 JS。使用不显眼的 JS 模式,您可以编写自己的 JS,因此您可以控制事件绑定。 RJS 还强制您通过网络发送 JS,这是一个坏主意,因为它依赖于浏览器来正确执行 JS,而它从来没有这样做过。通过网络发送 JSON 或 HTML 数据更可靠,然后对 ajax:success 回调进行任何额外处理。你应该永远在同一个响应中发送 HTML 和随附的内联 JS,除非你喜欢解决 $ is not defined 错误...
    • 有没有也可以替换div的id??
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2020-03-19
    • 2012-09-01
    • 2011-03-26
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多