jQuery: Refresh HTML elements of same class

Question

This simple problem has flustered me this morning. I've searched for a solution to this problem on SO, but have only found solutions which involve loading data into HTML, or a refresh for the whole page. I'm trying to use jQuery's $.ajax function to refresh certain HTML elements. These elements have the same class. I don't want to load new data into these elements with jQuery; that is being handled by Angular. If I manually refresh the page (without jQuery at all), the new data is there. However, I want to refresh this part of the page automatically. I don't want to refresh the whole page.

So far I have this:

setInterval('reloadPage()', 10000);

function reloadPage() {

    $.ajax({
        async: true,
        dataType: 'json',
        type: 'GET',
        url: 'http://localhost:8080/app/rest/json',
        error: function(err) {
                console.log(err.statusText);
            },
        success: function() {
                $('.mq').location.reload(true); 
                console.log($('.mq').location);         
            }
    });
}

$('.mq').location.reload(true); is undefined. I know that I'm using reload incorrectly in two ways:

You can't use it with ('.mq').location oddly enough... I feel like that should be a feature.
reload(true) forces to reload the page from the server, but I'm not sure the page is being served by the server on each reload, it's only being updated... I don't know, I'm fuzzy on this.

I've also tried $('.mq').load(url), but that just inserts the first JSON element from the URL for all of the HTML elements being updated. This isn't what I want since the proper values are being controlled by Angular directives in the HTML (yes, I know I should probably use a controller for this instead).

So, how to refresh multiple HTML elements at once with jQuery's $.ajax function?

@Malkus I have it bound initially with `ng-init=mq.currentDepth`, where `mq` is defined in a parent `ng-repeat` and `currentDepth` is the JSON key whose value is being used. But it seems that the `ng-init` has been working so far since the data from the server is being on a 10 second timer as well. I'm just trying to sync it on the client side automatically. — UltraSonja, Sep 21 '15 at 17:01
You're using angular, stop thinking in terms of 'refreshing the page' and start thinking in terms of 'updating your data model'. Angular will redraw data-bound elements when the data changes. — Daniel Beck, Sep 21 '15 at 17:01
@DanielBeck OK, so can I take care of this with a simple directive like `ng-model` or `ng-bind`? — UltraSonja, Sep 21 '15 at 17:02
...sort of? `ng-model` lets you bind data to form elements, but that's tangential to what you seem to be asking here. I think you might want to start here http://stackoverflow.com/questions/14994391/thinking-in-angularjs-if-i-have-a-jquery-background?rq=1 and then work through some angular tutorials (preferably without jQuery at all; it's more of a hindrance than a help in angular.) Angular takes quite a bit of getting used to; it's not well suited to the just-dive-in-and-try-stuff approach. — Daniel Beck, Sep 21 '15 at 17:17
@DanielBeck Thanks for pointing me in a direction. After I figure this out I'll post an answer. — UltraSonja, Sep 21 '15 at 17:20

score 1 · Answer 1 · edited May 23 '17 at 11:59

I sort of have a working version of what I want, this time in an Angular controller. Thanks to @DanielBeck for pointing me in the right direction.

function QueueDepthCtrl($scope, $http, $timeout) {

    $scope.max = 20000;

    $scope.getData = function() {
        $http.get('http://localhost:8080/app/rest/json')
            .success(function(data, status, headers, config) {

                $scope.dynamic = data[0].currentDepth;
                $scope.xsiteStatus = status;
                console.log($scope.xsiteStatus);
            });
    };

    $scope.intervalFunction = function() {
        $timeout(function() {
            $scope.getData();
            $scope.intervalFunction();
        }, 10000)
    };

    $scope.intervalFunction();
}

In the getData function, $scope.dynamic should be set to the first value in the JSON file for all of my elements. Thus, I expected to see the same value in all of my HTML elements. I am using a random number generator on the backend to add values into the JSON data. However, my controller is embedded in an ng-repeat, so I guess it called the Java function for each and every element, which created a different value for each element. I didn't think that Angular was that powerful. I thought that it just consumed data that Java spat out (instead of actually calling a Java function repeatedly). Maybe that's not what is going on, but it seems like it. So, I'll just have to add a separate controller [ that loops through the JSON instead of just calling the first element ] outside of the repeat scope, and I think that should fix things.

score 0 · Answer 2 · answered Sep 21 '15 at 17:22

You want to bind the value to the $scope so that instead of reloading the page you really are updating the model so that your view is updated.

It is worth noting that because you are using jQuery ajax calls and not angular $http calls (angular's wrapper for ajax calls). You would need to do an extra $scope.$apply() to force the scope to refresh. This would not be needed when using $http.

setInterval('reloadPage()', 10000);

function reloadPage() {

    $.ajax({
        async: true,
        dataType: 'json',
        type: 'GET',
        url: 'http://localhost:8080/app/rest/json',
        error: function(err) {
                console.log(err.statusText);
            },
        success: function(result) {
                $scope.someValue = result;
                $scope.apply();  //Needed because you are not using $http     
            }
    });
}

jQuery: Refresh HTML elements of same class

2 Answers2