Question

我正在尝试为旧的periodic_call_remote实现jquery替换。我从另一个stackoverflow线程here获得了以下代码：

$(document).ready(
  function(){
    setInterval(function(){
      $('#mydiv').load('/controller/action');
    }, 3000);
  });

但我正努力让它发挥作用。如果我理解UJS，如果我做了以下事情：

将脚本放在application.js
在我的布局中包含application.js（javascript_include_tag：defaults确实如此）
在我的视图模板中有一个DOM元素，其中id ='mydiv'

然后该函数应自动绑定到'mydiv'并在页面加载后执行，对吗？我缺少一步吗？我不应该在视图中命名该函数或直接调用它，对吗？

其次，如何动态更新加载URL。例如，我有一个带有路径'/ controller /：id / action'的嵌套资源...如何在渲染时将：id值动态插入到加载路径中？

Answer 1

在您的功能中添加以下内容。

$('#mydiv').css("background", "red");

div的颜色有变化吗？如果是，请调试服务器端代码。

如果您知道如何在浏览器中打开JavaScript控制台，请打开它并查看是否有任何错误。

Answer 2

不显眼地执行此操作的方法是在div标记中设置要加载的属性，然后从application.js文件中获取该属性。

some.html

<div data-delay-load="<%= url_for() %>"></div>

的application.js

$(function() {

    $('div[data-delay-load]').each( function() {
        var url = $(this).attr('data-delay-load'),
            $element = $(this);

        var _func = function() {
           $element.load(url);
        }

        setTimeout(_func, 3000);
    });
});

唯一的好处是，只要包含data-delay-load属性，就可以对同一页面上的任何页面或多个元素进行延迟加载。

调用并动态更新jquery函数

2 个答案: