JavaScript: Timer to refresh content of elements with same class

Question

There is a web app I am designing. I'm using AngularJS on the front-end with a Java back-end. The web app is being deployed in a war file to a local JBoss server. I currently have a Java class that performs a series of calculations and sends that data as JSON to the client every 10 seconds. This works, but I want to update the elements that contain this data with AJAX(?).

In Angular I have a few $resource services that consume the Java RESTful API. This is all JSON data, which is the being propagated into the view by a single controller. I then have some HTML elements generated by ng-repeat that all have the same classes. I wanted to use one of these classes to trigger a refresh on all of the elements every 10 seconds. Here is a snippet with the ng-repeat I am talking about:

<div ng-repeat="mq in mqDepth">
     <progressbar class="mq" max="max" value="dynamic" ng-init="dynamic=mq.currentDepth" type="info>
        <span>
            {{dynamic}} / {{max}}
        </span>
     </progressbar>
</div>

In the above snippet, the data that's being updated is mq.currentDepth.

And this is the code I am using to refresh:

function refreshQueue() {
    $('.mq').load('', function() {
        $(this).unwrap();
    });
}

refreshQueue();
setInterval(function() {
    refreshQueue();
}, 10000);

I get a warning that basically states the way I am implementing AJAX will break my user interface, which it does after a series of updates.

Synchronous XMLHttpRequest on the main thread is deprecated because of its detrimental effects to the end user's experience. For more help, check http://xhr.spec.whatwg.org/.

I have a few questions

Can you update the contents of an element with a class in AJAX, or does that only work with IDs?
Should I be using AJAX to refresh the page?
If not, then how would I implement that with Angular?

Jos · Accepted Answer · 2015-09-18 17:52:31Z

1

Doing synchronous network calls from javascirpt will block the main thread, which may block your UI and hence is not adviced. To answer your questions.

When you are using angular, you shouldn't access the elements using class or ids (using selectors), the way we use to do with jQuery. Instead you should use data-binding.
You do not need AJAX to refresh the page.
You can use your existing $resources for retrieving data. Once you have the data in controller, save that in a scope variable. Then you can use the same variables in your HTML using angular-expression to update the data.

$scope.mqDepth = MqDepth.get({ id: id });

edited Sep 18, 2015 at 17:52

answered Sep 18, 2015 at 17:32

Jos

2,0131 gold badge18 silver badges23 bronze badges

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

Collectives™ on Stack Overflow

JavaScript: Timer to refresh content of elements with same class

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related