Html5 data attribute not updating when javascript polling

Question

I'm polling the status of a background process. I'm trying to use the HTML5 data attribute to pass the :status(model attribute) of the background process to the js polling function. The status successfully updates when the background job is finished, but my javascript is not retrieving the updated status.

<div class="report" data-report-id="<%= @report.id %>" data-report-completed="<%= @report.completed? %>">
  <% if @report.completed? %>

I'm certain that the @report.completed? method works correctly. Here is my javascript. Accessing the data-report-completed attribute is not returning the updated status.

$(document).ready(function() {
  if ($(".report-loading").length > 0) {
    showActivityIndicator();
    console.log("Loading...");
    setTimeout(checkReportStatus, 3000);
  }
});

function checkReportStatus() {
  var report_completed = $(".report").attr("data-report-completed");
  if (report_completed == true) {
    console.log("Completed");
    var report_id = $(".report").attr("data-report-id");
    location.reload();
  }
  else {
    console.log("In progress...");
    setTimeout(checkReportStatus, 3000);
  }
}

I'm not very familiar with jQuery. What's the difference? I changed to data() and still no luck. — mnort9
– mnort9, Commented Aug 6, 2013 at 17:59

bluetoft · Accepted Answer · 2013-08-06 20:50:56Z

1

you're comparing a boolean but you should be checking the string value as you're checking an attribute value. Try changing your comparison like so:

if (report_completed === 'true') {

if you need to get a value back from the server to update your html you can do something like the following ajax call.:

function checkUpdated(){
   $.get('pathToCheckIfYourJobIsDone',function(isUpdated){ // isUpdated is what your server response
      if(isUpdated){
         $(".report").attr("data-report-completed",true);
         // do whatever else you want to do when it is complete.
      }else
      {
           setTimeout(checkUpdated,3000);
      }
   });
}

edited Aug 6, 2013 at 20:50

answered Aug 6, 2013 at 17:52

bluetoft

5,4432 gold badges25 silver badges27 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

mnort9 Over a year ago

It didn't fix my issue, but you're right about it returning a string instead of a bool.

bluetoft Over a year ago

How are you setting the data-report-completed property?

mnort9 Over a year ago

I'm using a delayed_job success hook to set the property to the Report model. I've confirmed that this works... I think I'm missing something in javascript to actually refresh the data-report-completed property which would then check the report.completed? condition again and return the updated value.

bluetoft Over a year ago

do you have an ajax call updating in the background that you haven't added to your question?

mnort9 Over a year ago

No I don't. I'm using delayed_job to process data in the background, but I've included all of my code involved in the front-end. Can you point me to an example? I have very little experience with jquery.

|

Collectives™ on Stack Overflow

Html5 data attribute not updating when javascript polling

1 Answer 1

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related