1

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?

Improve this question
6
  • Are you binding the result to a value in your scope? Commented Sep 21, 2015 at 16:54
  • @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. Commented Sep 21, 2015 at 17:01
  • 2
    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. Commented Sep 21, 2015 at 17:01
  • @DanielBeck OK, so can I take care of this with a simple directive like ng-model or ng-bind? Commented Sep 21, 2015 at 17:02
  • 1
    ...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 stackoverflow.com/questions/14994391/… 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. Commented Sep 21, 2015 at 17:17

2 Answers 2

Reset to default
1

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.

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

Comments

0

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     
            }
    });
}
Improve this answer

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.