Why doesn't JSON data load immediately in my HTML page?

Question

This is my controller, that takes JSON data to Wordpress :

app.controller('AboutController', function($scope, $http) {

$scope.device=device;
var page_id = 2;

$.ajax({
        url: 'http://davidemilone.com/provawp/?json=get_page&page_id='+page_id+'&callback=?',
        dataType: 'jsonp',
        type: 'GET',
        success: function(data) {

                $scope.page=data.page;
                console.log("contenuto" + $scope.page.content);
        }
});
});

Now, this is my HTML page:

<ons-page ng-controller="AboutController" >
  <ons-toolbar modifier="opacity">
    <div class="left">
      <ons-toolbar-button ng-click="menu.toggle()"><ons-icon icon="ion-navicon-round" fixed-width="false"></ons-icon></ons-toolbar-button>
    </div>
    <div class="center">{{page.title}}</div>
  </ons-toolbar>

  <div class="app-page-content">
    <p class="page-content" ng-bind-html="page.content"></p>
  </div>

Why data doesn't load immediately, it loads only after I click back or when carousel auto slide; what I am doing wrong?

Tomek Sułkowski · Accepted Answer · 2015-06-25T09:53:43.053

3

You're not using Angular's own tools (e.g. $http service) to comunicate with the server, so the framework doesn't know that the data has changed.

To let Angular know that something on $scope has changed in non-angular way, you should run $scope.$apply(); after you assign the new data.

(To explain the "clicking outside" part: it simply triggers the digest loop - same result as $apply(), that's why the value was updating then)

It would be preferable to use $http service though. I can see you've already injected it into the controller, so it may be a simple mistake, that you used jQuery's ajax function insted. (see Angular docs for $http service for details)

app.controller('AboutController', function($scope, $http) {
    $scope.device=device;
    var page_id = 2;

    var url = 'http://davidemilone.com/provawp/?json=get_page&page_id='+page_id+'&callback=?';
    $http.jsonp(url).then(function(response) {
        console.log(response.data);
        $scope.page = response.data.page;
    });

});

edited Jun 25 '15 at 09:53

answered Jun 25 '15 at 09:38

Tomek Sułkowski

7,081
2
17
15

How to get a single page with angular in the same way of jquery? – pinostack Jun 25 '15 at 09:48
@pinostack I updated the answer with the code sample. You can `console.log` the response returned to be sure what's the exact format of it (I'm not sure if the response body is not keept in `response.data` in this case ;) ) – Tomek Sułkowski Jun 25 '15 at 09:55
howewer with $scope.$apply() it works perfectly; thanks a lot for the support; I will wait your answer for $http request single page. – pinostack Jun 25 '15 at 09:58
the result is this Uncaught SyntaxError: Unexpected token < at http://.........com/provawp/sample-page/:1 Note: we have already a plugin json installed in wordpress and the link to request data is http://davidemilone.com/provawp/api/get_page/?page_id=2; – pinostack Jun 25 '15 at 10:21
It looks like a typo somewhere. Make sure you made is exactly as in the docs (I also tried to be thorough, but it's always better to skip the intermediator and rely directly on the source of documentation ;) ) – Tomek Sułkowski Jun 25 '15 at 10:57
sorry but now No longer works, even as before ...why this? – pinostack Jun 25 '15 at 11:28
It really should work. But at this moment I don't know how does your code looks after implementign changes. – Tomek Sułkowski Jun 25 '15 at 12:07
There was a problem with lib, but now it's seems all ok..thanks for the support – pinostack Jun 26 '15 at 07:18

Why doesn't JSON data load immediately in my HTML page?

1 Answers1