2 ways to load external html file

First way:

function load1Content() {

$('.ui-content').load('1.html');

$('[data-role=listview]').listview(); // premature execution

window.scrollTo(0, 0);

}

Second way:

function loadHomeContent() {

$.ajax('home.html')

.done(function(home) {

$('.ui-content').html(home);

$('[data-role=listview]').listview();

})

.fail(function() {

console.log('ajax home content error');

});

window.scrollTo(0, 0);

$('#top-title').html('PhoneGap AdMob');

}

Which way to use?

First way is shorter and simpler but it won't format the markup if there are ul or li. That is because premature execution of listview() happens even before the html is loaded. The .load() is asynchronous.

Therefore, the second way is the correct way if your html has ul, li or other markup which needs to be formatted. It ensures that .listview() is executed ONLY AFTER the html has loaded.

How to return something from ajax

Use a callback:

function something(callback){
 $.ajax({
        'url':'/some/url',
        'type':'GET',
        'data':{'some':'data'},
        'success': callback
   });
}

something(function (data) {
    data['id']; // use it here
})

See:

https://stackoverflow.com/questions/8187201/return-value-from-inside-of-ajax-function

Ajax: Simplest json call

The simplest of all:

var url = 'http://test.com/php/getnews.php';

  $.getJSON(url, function(result) {
    console.log(result);
    $.each(result, function(i, field) {
      console.log(i + ':' + field.title);
    });
  });

and the corresponding php on the server:

$query = "SELECT * FROM news";
  $rows = array();

  if($result = mysqli_query($link, $query)) {
      while($r = mysqli_fetch_assoc($result)) {
        $rows[] = $r;
      }
   
      header('Content-Type: application/json');
      print json_encode($rows,
      JSON_HEX_APOS | JSON_HEX_AMP | JSON_HEX_QUOT | JSON_HEX_TAG | JSON_FORCE_OBJECT );
   
  }

Ajax with Cross Domain

Another ajax example:


var url = 'http://test.com/php/getnews.php';


$.ajax({
   type: 'GET',
   url: url,
   crossDomain: true,
   cache: false,
   success: function(result) {

        / / var obj = $.parseJSON(result[0]);
        console.log(result);
 
         $.each(result, function(i, field) {
              console.log(i + ':' + field.title);
         });
     }
});

Ajax Simple Example

$.ajax(
  'https://api.wmata.com/Rail.svc/json/jStations?LineCode=BL&api_key=' + key
)
.done(function(data) {
     console.log(data);
     var stationList = new Array();
     console.log('Length: ' + data.Stations.length);
     for (var x = 0; x < data.Stations.length; x++) {
     console.log(x);
     var name = data.Stations[x].Name;
     var id = data.Stations[x].Code;
     var thisStation = new Station(name, id);
    stationList.push(thisStation);
}

for (var x = 0; x < stationList.length; x++) {
   var out = "<option value='" + stationList[x].stationId + "'>";
   out += stationList[x].stationName;
   out += '</option>';
   document.getElementById('stationListSelector').innerHTML += out;
}
})
.fail(function() {
   alert('error');
});

Ajax Complete Example: Full Headers

$.ajax({
    url: 'https://api.wmata.com/Rail.svc/json/jStations?' + $.param(params), //LineCode=BL
    beforeSend: function(xhrObj) {
      //Request headers
      xhrObj.setRequestHeader('api_key', key);
    },
    type: 'GET',
    // Request body
    data: '{body}'
  })
    .done(function(data) {
      console.log(data);
      var stationList = new Array();
      console.log('Length: ' + data.Stations.length);
      for (var x = 0; x < data.Stations.length; x++) {
        console.log(x);
        var name = data.Stations[x].Name;
        var id = data.Stations[x].Code;
        var thisStation = new Station(name, id);
        stationList.push(thisStation);
      }
      for (var x = 0; x < stationList.length; x++) {
        var out = "<option value='" + stationList[x].stationId + "'>";
        out += stationList[x].stationName;
        out += '</option>';
        document.getElementById('stationListSelector').innerHTML += out;
      }
    })
    .fail(function() {
      alert('error');
    });

Ajax Basic Template

$.ajax('http://www.somewebsite.com')
.done(function(){})
.fail(function(){});

Ajax: Search Pokemon

https://github.com/paulchin/hc-webdev-notes/blob/master/4-jquery/searchpokemon.html

Creating APK file with PhoneGap

See this sample project:

https://github.com/paulchin/Get-PokeDetails

When creating a new app, be sure to download the jquery-mobile libraries instead of using links to cdn.   You can download jquery-mobile here.  After unzipping, be sure to delete the demo folder.

You also need jquery. Be sure to get the correct version 1.11.1 as at time of writing.
You can get the correct jquery  here.

Then, add a whitelist plugin in the config.xml otherwise your app won't be able to connect to any websites.

Also be sure to target sdk 26 in the config.xml as this is mandated by google.

Use png 144 x 144 pixel for the icon.

See this config.xml file.

Follow the instructions here for creating keystore:

http://docs.phonegap.com/phonegap-build/signing/android/

https://www.youtube.com/watch?v=7iAPWc8IGb0

Ajax: Search Pokemon

https://github.com/paulchin/hc-webdev-notes/blob/master/4-jquery/searchpokemon.html

Ajax examples

See:

https://hjunotes.blogspot.com/

Basic template:

$.ajax('http://www.somewebsite.com')
.done(function(){})
.fail(function(){});