如何使用 ujs、jquery 和 Rails 加载内容？

Question

我正在尝试找出使用 Rails UJS 将内容插入灯箱的最佳方法。我有一个看起来像这样的链接：

<%= link_to "login", login_path, :remote => true %>

它会生成这样的html：

<a data-remote="true" href="/login">login</a>

所以这一切都很好，并且我创建了视图文件： user_sessions/new.js.erb 它也加载得很好，但我的问题是将 html 插入页面的首选方法是什么？就像我已经在非 js 页面上有了登录表单，那么我不能将部分加载到页面中吗？

任何想法都会受到欢迎。

Answer 1

我不完全确定我明白你在问什么，但一般来说，你可以将 HTML 片段填充到一些现有容器中，如下所示：

$('div#yourDiv').html(blob_of_HTML);

你可以使用以下命令从服务器端操作加载 HTML 片段：

$('div#yourDiv').load(yourURL, function() {
  // stuff to do when the content has been loaded
});

如果您有一个完整的页面，并且您只想将其部分加载到另一个页面中，您可以尝试以下操作：

$('div#yourDiv').load(yourUrl + ' #something', function() {
  // stuff to do ...
});

这告诉 jQuery 获取加载的整个页面内容，然后查找“#something”位于整个页面内，并且仅将页面的该部分加载到目标容器中。

Answer 2

我最终这样做了，有点依赖于 ujs 的 jQuery 插件：

这在我的 user_sessions/new.js.erb 中

$(this).modal("<%= escape_javascript(render 'form') %>");

，然后我制作了一个这样的 jQuery 插件：

jQuery.fn.modal = function(content) {
  var modal_screen = $(document.createElement('div')).addClass("modal_screen");

  var modal_container = $(document.createElement('div')).addClass("modal_container");
  var modal_outer_border = $(document.createElement('div')).addClass("modal_outer_border").appendTo(modal_container);
  var modal_inner_border = $(document.createElement('div')).addClass("modal_inner_border").appendTo(modal_outer_border);
  var modal_contents = $(document.createElement('div')).addClass("modal_contents").appendTo(modal_inner_border);

  $(modal_screen).appendTo('body');
  $(modal_container).appendTo('body');
  $(modal_contents).append(content);
}

是的，我知道那是很多容器但我必须这样做才能使模态窗口垂直居中并提供良好的双边框情况。

让我知道你对这些人的看法！

---

也许另一个问题是，在制作 jQuery 插件时，我该如何制作它，以便我可以仅使用 $.modal("<%= escape_javascript(render 'form') %>");< 来调用插件/code>，没有对象 this 并只调用 jQuery 对象本身的方法？