calling and dynamically updating jquery functions

I am trying to implement jquery replacement开发者_运维知识库 for the old periodically_call_remote. I got the following code from another stackoverflow thread here:

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

But I am struggling to make it work. If I understand UJS correctly, if I do the following things:

• Place the script in application.js
• include application.js in my layout (which javascript_include_tag :defaults does)
• have a DOM element in my view template with id='mydiv'

Then the function should automatically bind to 'mydiv' and execute after the page is loaded, right? Is there a step I am missing? I should not have to name the function or call it directly in the view, correct?

Second, how can I dynamically update the load URL. For instance, I have a nested resource with the path '/controller/:id/action' ... how do I dynamically insert the :id value into the load path at render time?

The way to do this unobtrusively is to set an attribute in the div tag that you want to load and then grab it from within the application.js file.

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);
    });
});

What is nice is that you can have a delay load on any page or multiple elements on the same page just by including the data-delay-load attribute.

Add the following inside you functions.

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

Did the color of the div change? If it did, debug your server side code.

If you know how to open a JavaScript console in your browser, open it and see if there are any errors.