jQuery Mobile Silex example

<!DOCTYPE html>
<html>
    <head>
        <title>Silex Demo</title>
        <meta http-equiv='Content-Type' content='text/html; charset=utf-8'/>
        <meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; minimum-scale=1.0; user-scalable=no; target-densityDpi=device-dpi"/>
        <link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.css" />
        <script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
        <script src="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.js"></script>   
        <script src="script.js"></script>    
    </head>
    <body>    
        <div data-role="page" id="index" data-theme="a" >
            <div data-role="header">
                <h3>
                    User List
                </h3>
            </div>
             
            <div data-role="content">
                <ul data-role="listview" id="user-list">
 
                </ul>
            </div>
             
            <div data-role="footer" data-position="fixed">
                 
            </div>
        </div>
        <div data-role="page" id="second" data-theme="a" >
            <div data-role="header">
                <h3>
                    Second Page
                </h3>
                <a href="#index" class="ui-btn-left">Back</a>
            </div>
             
            <div data-role="content">
                <ul data-role="listview" id="personal-data" data-theme="a">
  
                </ul>
            </div>
             
            <div data-role="footer" data-position="fixed">
                 
            </div>
        </div> 
    </body>
</html>

$(document).on('pagebeforeshow', '#index', function() {
  ajax.ajaxCall("http://example.gajotres.net/php/silex_demo/handler.php/", true);

});

$(document).on('click', '#user-list li', function() {
  ajax.ajaxCall("http://example.gajotres.net/php/silex_demo/handler.php/" + $(this).data('listid'), false);
});

var ajax = {
  parseJSON: function(result) {
    $('#user-list').empty();
    $.each(result, function(key, row) {
      $('#user-list').append('<li data-listid="' + key + '"><a href="" data-id="' + row.id + '"><img src="http://example.gajotres.net/php/silex_demo/' + row.image + '"/><h3>' + row.name + '</h3><p>' + row.description + '</p></a></li>');
    });
    $('#user-list').listview('refresh');
  },
  parseJSONDetails: function(result) {
    $('#personal-data').empty();
    $('#personal-data').append('<li><img src="http://example.gajotres.net/php/silex_demo/' + result.image + '"></li>');
    $('#personal-data').append('<li>Name: ' + result.name + '</li>');
    $('#personal-data').append('<li>Title: ' + result.description + '</li>');
    $('#personal-data').listview().listview('refresh');
    $.mobile.changePage("#second");
  },
  ajaxCall: function(url, initialize) {
    $.ajax({
      url: url,
      type: 'get',
      async: 'true',
      dataType: 'jsonp',
      success: function(result) {
        if (initialize) {
          ajax.parseJSON(result);
        } else {
          ajax.parseJSONDetails(result);
        }
      },
      error: function(request, error) {
        alert('Network error has occurred please try again!');
      }
    });
  }
}