CODEWITHSUNDEEP
javascripthtmlangularjsjson
Parth Bhoiwala
Parth Bhoiwala

Reputation: 1322

Refresh Div Content Automatically

So I have an HTML page which displays several boxes. Those boxes have data which I load from a json (url file). That JSon changes every 2 minutes and hence I need to update the data but I don't want to refresh the entire page. I tried using Ajax and Jquery but it was too confusing. Someone told me that I can do it using AngularJS $http service. If so, can anyone show me an example of how to do it?

This is what I have so far:

This is my 'index.html'

    <html ng-app="myApp">

    <head>        
    <title>My data page</title>       
    <script data-require="angular.js@*" data-semver="1.4.0-beta.6" src="https://code.angularjs.org/1.4.0-   beta.6/angular.js"></script>
    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
    </head>

     <body ng-controller="myCtrl"> 

        <div class ="squareBox" ng-repeat="app in myArray">
            <p>{{app.name}} </p>
            <!--Some more data here -->
          This entire div tag needs to be refreshed every 2 minutes
       </div>
    </body>

This is my 'script.js' file

angular.module('myApp', []);
angular.module('myApp').controller('myCtrl', ['$scope', '$http', function ($scope, $http) {

    $http({
        method: 'GET',
        url: '/MyWebApp/JsonData'

    }).then(function successCallback(response) {
        console.log("Success yay!");
        console.log(response);
        $scope.myArray = response.data;

    }, function errorCallback(response) {
        console.log("Oops in error!");
    });
}]);

Again, what I want to do is auto-refresh the div content every 3 minutes. So when the json file is changed, myArray should have updated data which then should be displayed in the boxes. Thanks in advance :)

Upvotes: 3

Views: 3458

Answers (2)

Kyle
Kyle

Reputation: 5557

Here's the solution without using jQuery. Try to not mess with the DOM using jQuery; it is not the angular way.

angular.module('app', []).controller("MainCtrl", ["$scope", "$http","$interval",
    function($scope, $http, $interval) {
        //store your data
        $scope.myArray = [];

        //store the interval promise in a variable
        var promise;

        //stops the interval
        function stop() {
                $interval.cancel(promise);
            }

        //starts the interval
        function start() {
            //stops any running intervals to avoid two intervals running at the same time
            stop();
            //kick off the interval and store it in the promise
            promise = $interval(refreshItems, 180000); //3 minutes in millisecs = 180000
        }

        //this function is used to get your data
        function refreshItems() {
            $http.get('MyWebApp/JsonData').then(function(data,
                status, header, config) {
                $scope.myArray = data;
            }, function(data, status, header, config) {
                //an error occurred
            });
        }

        //function to kick off when the page renders
        function init() {
            start();
            //do other things here
        }

        //kick off the page when the controller is fully loaded
        init();
    }
]);

Upvotes: 2

Marcel Kohls
Marcel Kohls

Reputation: 1897

You can use the setInterval() to make the ajax request every 3 minutes:

$( document ).ready(function() {
    setInterval(function(){ updateDiv(); }, 10000); // this example is for each 10 seconds. change as you need
});

function updateDiv(){
    getJSONByAJAX();
}

function getJSONByAJAX(){
// request ajax
    $.ajax({
        type : 'post',
        url : 'yourPageThatSendJSON.php',
        dataType: 'json',
        success : function(data){
          setContentOnDiv(data);
        }
    });
}

function setContentOnDiv(data){
    $('div.squareBox').html(data);
}

Upvotes: 2

Related Questions