CODEWITHSUNDEEP
jquerycordovajquery-mobile
Ethan Richardson
Ethan Richardson

Reputation: 491

pageinit event not working when calling a function

I have a html page that is called from a main html page and this works fine. I want to fire an function that calls a remote server php script and builds the list view items. I am using phone gap, jquery mobile 1.2.0 and jquery 1.8.3

In the called html page i have the following code: 

<!DOCTYPE HTML>
<html>
<head>

<title>Search by area</title>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" href="jquery.mobile.structure-1.2.0.min.css" />
<link rel="stylesheet" href="jquery.mobile-1.2.0.min.css" />
<script type="text/javascript" charset="utf-8" src="cordova-2.2.0.js"></script>
<script type="text/javascript" src="jquery-1.8.3.min.js"></script>
<script type="text/javascript" src="jquery.mobile-1.2.0.min.js"> </script>
<link rel="stylesheet" href="custom.css" />

<script type="text/javascript">

function getAreas() {
   $.ajax({
       type:'GET',
       url:'http://localhost/getData.php',
       dataType:'jsonp',
       jsonp: 'jsoncallback',
       timeout: 5000,
       success: function(data, status){ 
              $.each(data, function(i,item){
        $('#list').append("<li><a href='#' data-transition='slidedown'>" + item.area_name + "<span class='ui-li-count'>" + item.deal_count + "</span></a></li>");
        $("#list").listview("refresh");


                });

       },
       error: function(data){
           // error on loading data
           alert('error');

       }
    });
};
</script>

</head>
<body> 

    <div id="areas" data-role="page" data-add-back-btn="true">
    <script type="text/javascript">
            $("#areas").on('pageinit', function() {
                // get the areas from the database 
                getAreas();

            });
    </script>
        <div data-role="header">

            <h1> Bucuresti deals</h1>

        </div>

        <div data-role="content">

        <div class="choice_list">

        <h1> In which town do you want to eat? </h1>
</div>
        </div>
   </div>

</body>
</html>

I have read the actual bind needs to be placed in between the div with the specific id as shown below:

<div id="areas" data-role="page" data-add-back-btn="true">
<script type="text/javascript">
        $("#areas").on('pageinit', function() {
            // get the areas from the database 
            getAreas();

        });

In fire bug i get the following message

ReferenceError: getAreas is not defined

I am not sure why this is when the function exists and works

Upvotes: 1

Views: 1413

Answers (1)

Jai
Jai

Reputation: 74738

On the jQuery mobile docs:

Because the mobileinit event is triggered immediately, you'll need to bind your event handler before jQuery Mobile is loaded. Link to your JavaScript files in the following order:

<script src="jquery.js"></script>
<script src="custom-scripting.js"></script>
<script src="jquery-mobile.js"></script>

so in your case this should be like this:

<script type="text/javascript" src="jquery-1.8.3.min.js"></script>
<script type="text/javascript" src="script.js"> </script>
<script type="text/javascript" src="jquery.mobile-1.2.0.min.js"> </script>

script.js will be your externalize scripts which you are having in the page currently:

function getAreas() {
  $.ajax({
   type:'GET',
   url:'http://localhost/getData.php',
   dataType:'jsonp',
   jsonp: 'jsoncallback',
   timeout: 5000,
   success: function(data, status){ 
          $.each(data, function(i,item){
    $('#list').append("<li><a href='#' data-transition='slidedown'>" + item.area_name + "<span class='ui-li-count'>" + item.deal_count + "</span></a></li>");
    $("#list").listview("refresh");


            });

   },
   error: function(data){
       // error on loading data
       alert('error');

   }
 });
};

and 

$("#areas").on('pageinit', function() {
        // get the areas from the database 
        getAreas();

    });

you can use these ways too:

$(document).bind("mobileinit", function(){
   getAreas();
});

$(document).live( 'pageinit',function(event){
  getAreas();
});

Upvotes: 2

Related Questions