CODEWITHSUNDEEP
jqueryjsonangularjsionic-framework
WebDevDanno
WebDevDanno

Reputation: 1122

Get JSON response not working on mobile device with Ionic framework and jQuery

I am using the following script to get a JSON response from my server and append a HTML element in my mobile app.

I am using the Ionic framework but ideally would like to build using jQuery instead of the AngularJS modules (although I may have to just lump it and learn them).

The script works fine on the web but when I test it on my Nexus 5 there is no joy and the table cells aren't printed out.

HTML

<ion-pane>
  <ion-header-bar class="header bar-stable">
    <h1 class="title">GeoSnap</h1>
  </ion-header-bar>
  <ion-content>
      <table class="table table-striped">
          <thead>
              <th>Name</th>
              <th>Description</th>
          </thead>
          <tbody>

          </tbody>
      </table>
  </ion-content>
</ion-pane>

jQuery code

jQuery(document).ready(function() {
jQuery.getJSON("http://webdevdanno.com/php-services/DataHandler.php", function(records) {
    var recordsHTML = ''; 
    for(var i=0; i<records.length; i++) {
        var name = records[i].heading;
        var description = records[i].desc;
        recordsHTML += '<tr>' + '<td>' + name + '</td>' + '<td>' + description + '</td>' + '</tr>';
    }
    angular.element("tbody").html(recordsHTML);
});
});

Does anyone have any ideas why this wouldn't print out the table records when I build it onto my mobile device?

Is there a way in AngularJS I can achieve the JSON request functionality?

Upvotes: 1

Views: 481

Answers (1)

M92
M92

Reputation: 66

I assume you use cordova, you need to whitelist the url's you want to use in your config.xml like this. (Also see cordova whitelisting)

<access origin="*" />
<allow-navigation href="http://somesite.com/*" />
<allow-intent href="http://somesite.com/*" />

Upvotes: 1

Related Questions