CODEWITHSUNDEEP
jqueryajaxruby-on-rails-3json
fearless_fool
fearless_fool

Reputation: 35169

how do I set up client-side AJAX polling

I've beat my head on this until it's gone soft. Time to consult with the experts!

My app spawns a number of Delayed::Jobs. I'd like to provide the user with visual feedback on the state of those jobs as they are running. So assume I have a Job < ActiveRecord::Base model that has a name, a state (IDLE, QUEUED, RUNNING, SUCCEEDED, FAILED) and a status string, and that the state and status are typically updated asynchronously.

Also assume a view template with a <div id='job-status'></div> element as a place to display the Jobs status. Oh, also assume I'm using Rails3 with jQuery.

For maximum portability, I'd like to use javascript-initiated client-side polling. I know a bit of javascript (jQuery methods, setTimeout, etc), but I haven't found the blend of Rails and jQuery functions to do this in a sensible way.

Succinctly, if you had an ActiveRecord Job model with name, state, and status, what would you put in your controllers/jobs_controller.rb and what views/jobs/ would implement? And does the server generate html or JSON or XML to update the #job-status div? (I realize this is a broad set of questions -- I'm not expecting a full answer, just enough pointers to piece it together.)

Thanks.

Upvotes: 0

Views: 377

Answers (1)

Jahan Zinedine
Jahan Zinedine

Reputation: 14874

You should make an ajax call by jquery to a json enabled method on you controller which send back data.

Using that data you can update the contents of div element with effect by method like $("#somediv").html(ajax_result)

Here is a real sample:

var linkHtml = $("#searchNumber").html();
$("#message").empty();
var aurl = "/Prospect/SearchNumberAuth?number=" + $("#MSISDN").val() ;
$.ajax({
    dataType: 'json',
    type: "GET",
    url: aurl,
    async: false,
    contentType: "application/json; charset=utf-8",
    beforeSend: function() {
        $("#holdNumber").fadeOut("slow");
        $("#searchNumber").empty().html("<image src='../../Content/images/jquery-ui/load-indicator.gif'/>");
    },
    success: function(response) {
        $("#message").fadeIn(1500).html(function() {
            if (response[0] == "Exist") {
                $("#holdNumber").fadeIn("slow");
                $("#MSISDN").attr("readonly", "readonly");
                $("#searchNumber").fadeOut("slow");
                return existMsg;
            } else if (response[0] == "Sold") {
                $("#searchNumber").empty().html(linkHtml).fadeIn("slow");
                return soldMsg;
            } else if (response[0] == "Hold") {
                $("#searchNumber").empty().html(linkHtml).fadeIn("slow");
                return holdMsg;
            } else
                $("#searchNumber").empty().html(linkHtml).fadeIn("slow");
            return notExistsMsg;
        });
    },
    error: function(jqXHR, textStatus, errorThrown) {
        $("#searchNumber").empty().html(linkHtml).fadeIn("slow");
    },
    complete: function() {
    }
});

And here is the server side code in controller class that can be easily ported to Rails:

    public JsonResult SearchNumberAuth(long number)
    {
        return this._searchNumber(number);
    }

which in _searchNumebr method I will return a JsonResult.

You can see more details in website although it's in Persian but you can see the js code by FireBug in ProspectView.js and the result in second tab.

Upvotes: 2

Related Questions