jQuery Forum

1. <div class="m-card">     
     <div class="m-header">       
       <div class="m-options"><span class="ui-icon-star"></span></div>       
       <img class="m-profile" src="http://domain.com/images/users/me.jpg" />       
       <div class="m-dname"><a href="#">@PPetree</a></div>       
     </div>     
     <div class="m-content">       
       <p>yum yum yum - nom nom nom</p>     
     </div>   
     <div class="m-restaurant">     
       <img class="m-restaurant-thumb" src="http://domain.com/images/meals/bobs.jpg" />     
       <div class="m-restaurant-content">       
         <div class="m-restaurant-name">Bob's Burgers</div>       
         <div class="m-restaurant-address"><p>1400 Glades Rd<br>Boca Raton, FL 33431 USA<br>561-555-1212</p></div>       
       </div>   
     </div>   
   </div>

1. http://domain.com/images/meals/bobs.jpg?1
2. http://domain.com/images/meals/bobs.jpg?t=1524835702353

1. <script src="jquery.mobile/jquery-2.1.4.min.js"></script>
   <script src="jquery.mobile/jquery.mobile-1.4.5.min.js"></script>
2. <script src="jquery.mobile/jquery.validate.min.js"></script>
   <script src="jquery.mobile/additional-methods.min.js"></script>

1. json: {"status":"OK","userid":3,"text":"Welcome to MyCoolApp!"}

1.   $.ajax({
         type: 'POST',
         url: siteURL,      // mycoolsite.com/endpoint.php
         data: strData,      first=firstname&last=lastname&email=abc@email.com&password=abcdefghi
         datatype: 'json',
         beforeSend: function() {
           //Show spinner
            $('body').addClass('ui-loading');
            $.mobile.loading('show');
         },
         timeout: 15000,
         cache: false
     }).done(function(json, textStatus, jqXHR) {
             if(json.status == "OK")
             {
               $("#profile_status").html(json.text);         // what the server said
               setUserID(json.userid);   // save the userid
               setUserState(1);          // show the user as logged in
               setFirstTime(1);          // set this here so if user restarts app before onboarding, they come back to here
2.             if(photo)
               {
                 // if join was successful (we have a userid)
                 // then we can save any photo we may have
                 console.log("upload the photo to userid" +userid);
3.               // set upload filename to userid.   
               }
4.          }
             if(json.status == "FAILED")
             {
               $("profile_status").html("Your profile was not updated! The server said: " +json.text);         // what the server said
             }
     }).fail(function(xhr, textStatus, error) {
             $("profile_status").html("There was an error communicating with our server, your device said" +textStatus);         // what the server said
             console.log("saveProfile: " +textStatus);
             console.log("saveProfile: " +error);
     }).always(function(jqXHR, textStatus) {
            $.mobile.loading('hide'); 
            $('body').removeClass('ui-loading');
     });

Am I missing something here? (Well obviously I am, but what? 

1. <link rel="stylesheet" type="text/css" href="css/jquery.mobile.flatui.css" />
   <script src="jquery.mobile/jquery-2.1.4.min.js"></script>
   
2. <script src="jquery.mobile/jquery.mobile-1.4.5.min.js"></script>
   

1.   <div id="creditsPage" data-role="page"  data-theme="b" data-quicklinks="true">
       <div role="main" class="ui-content">
       <!-- Start of tabs navbar --> 
       <div data-role="tabs"> 
         <div data-role="navbar">
           <ul>
             <li><a href="#" class="ui-btn-active" data-href="buymore">Buy More</a></li>
             <li><a href="#" data-href="transfer">Transfer</a></li>
             <li><a href="#" data-href="history">History</a></li>
           </ul>
         </div>
         <div id="buymore" class="tab-content">
             <p>Pick your package:</p>
             <p>3 credits = $0.99</p>
         </div>
         <div id="transfer" class="tab-content">
             <p>Donate credits.</p>
             <p>Send credits to a friend.</p>
         </div>
         <div id="history" class="tab-content">
             <p>History</p>
             <p>Starter allotment: 3</p>
         </div>
       </div>
       <!-- end of tabs widget -->
       </div> <!-- end of main -->
       <div data-role="footer" data-position="fixed" data-theme="b">
         <h1>Credits Page</h1>
       </div><!-- /footer --> 
     </div> <!-- end of page -->

1.   $("#credits").enhanceWithin().tabs();
   
   

1.   // $( "#aboutPage" ).on("pagecontainerbeforeshow", function( event ) {
     $("body").on("pagecontainerbeforeshow",
       function( event, ui ) {
           console.log("Going to: " +ui.toPage[0].id);
       });
      
     $(document).on('pagecreate', function(){
       $(':mobile-pagecontainer').on('pagecontainerbeforeshow', function(event, ui){
           alert('pagecontainerbeforeshow triggered');
           console.log("Going to: " +ui.toPage[0].id);
       });
     });
2.   $( "#aboutPage" ).on("navigate", function( event ) {
       console.log("aboutPage Ready!");
       initMenu();
       onAboutReady();
      
       $('#aboutPage').on("swiperight", function () {
         window.location.href = 'index.html';
       }); 
     });
   

1.         <a href="#homeMenu" id="menu" data-rel="popup" data-transition="slidedown" data-position-to="#position-header" class="ui-btn ui-corner-all ui-shadow ui-btn-inline ui-btn-right ui-icon-bars ui-btn-icon-right ui-btn-b">Menu</a>
           <div data-role="popup" id="homeMenu" data-theme="b">       
             <ul data-role="listview" data-inset="true" >
2. 
              <li><a href="about.html" class="ui-icon-info">About</a></li>
3.            .
4.            .
5.            .

1. <link rel="stylesheet" href="jquery.mobile/jquery.mobile.icons.min.css" /> 
   <link rel="stylesheet" href="jquery.mobile/jquery.mobile-1.4.5.min.css" />
   <link rel="stylesheet" href="mytheme.css" />
   <script src="jquery.mobile/jquery-2.1.4.min.js"></script>
   <script src="jquery.mobile/jquery.mobile-1.4.5.min.js"></script>

1. <div id="homePage" data-role="page" data-content-theme="b" data-theme="b">   
       <div class="ui-grid-solo">
       <input type="button" id="my_id" class="alert" data-theme="e" value="My Button">         
       </div>
   </div>

1. #my_id .ui-page .ui-content .ui-btn .ui-btn-inner
   {
       color      : black;
       background :darkorange !important;
   }
2. #my_id .ui-btn {
      background: #ffa500 !important;
      background-image: -moz-linear-gradient(top, #ffa500, #ffa500) !important;
      background-image: -webkit-gradient(linear,left top,left bottom, color-stop(0, #ffa500), color-stop(1, )) !important;
      color: black;
      text-shadow: 0px 0px 0px ;
      font-size: 40px;
      border: none;
   }

1.   $('#shooter').parent().find('.ui-btn-inner').css("background-color", "orange !important");

1. <!DOCTYPE HTML>
   <html>
   <head> 
   <meta http-equiv="Content-type" content="text/html; charset=utf-8"> 
   <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0, user-scalable=no">
   <title>Width Test</title> 
   <link rel="stylesheet" href="jquery.mobile/jquery.mobile-1.1.1.min.css" />   
   <script src="jquery.mobile/jquery-1.7.1.min.js"></script>
   <script src="jquery.mobile/jquery.mobile-1.1.1.min.js"></script>    
   </head>
   <body id="widthTest"> 
     <div id="widthPage" data-role="page">   
       <div data-role="header" data-position="fixed">
         <h1>Width Test</h1>
       </div>
       <div data-role="collapsible" data-collapsed="true" data-inset="true" data-theme="b" data-content-theme="b">
         <h3>Collapsible</h3>   
         <div class="ui-grid-solo">
           <div class="ui-block-a">
             <a href="#" data-role="button" data-theme="e">Test Button 1</a><br>
           </div>
         </div>
         <div class="ui-grid-solo">
           <div class="ui-block-a">
              <a href="#" data-role="button" data-theme="e">Test Button 2</a><br>
           </div>
         </div>
       </div> <!-- end of collapsibles -->
       <div class="ui-grid-solo">
      <div class="ui-block-a">
        <a href="#" data-role="button" rel="external" data-theme="e">Another Button</a>
         </div>
       </div>   
       <div id="widthtest-message"></div>
     </div><!-- end of page div -->
   </body>
   </html>

2. document.addEventListener("backbutton", function(e) {
3. if($('.ui-page-active').attr('id') == "main");
4. {
5.   if(confirm("Really exit blah blah?\n\nIf you do, you will no longer receive messages!") )
6.   {
7.     device.exitApp();
8.   }
9.   else
10.   {
11.     navigator.app.backHistory();
12.   }
13. }
14. navigator.app.backHistory();
15. }, false);

I'm using jquery.mobile-1.1.0.min.js and cordova-2.0.0.js (phonegap).

In my setup for my $.ajax call I set my params like this:

1.       success: onFetchOK,   // saves everything to the database
         complete: function(jqXHR, textStatus) {
             // show everything in the database
             showAllHeaders();
         },
         error: function(xhr, textStatus, errorThrown) {
             alert("onFetchFailure: There was an error retrieving messages: \n"
                   +"xhr: " + xhr.statusText
                   +"\nstatus: " +textStatus
                   +"\nerror: " +errorThrown.message);
             $('#fetch-result').html(textStatus);
         },

The function onFetchOK gets 18 message headers back from the server, each message header has an id, subject and a date/time and these get stored in the webdb using the phonegap webdb storage API.

If I drop and recreate the message table and run the app fresh, the ajax complete: function gets called once for each of the 18 messages I receive so 342 message headers gets displayed (18x18+18).

No where in my code other than this one $.ajax complete: does showAllHeaders(); get called.

I placed an alert inside the showAllHeaders() and that alert gets triggered 19 times.

To narrow this down further I placed a loop counter inside my $.ajax success: onFetchOK() like this:

1.     var loopCount = 0;
       // process each message
       $.each(json.messages, function(index, msg)
       {       
           // save each alert before displaying it
           webdb.addAlert(msg.msg_id, msg.title, msg.when);
           loopCount++;
       });
       alert("loopCount = " +loopCount);

When this alert is called it shows "loopCount = 18" and this is called/displayed only once.

If I exit the app, reload it and no new messages are pulled from the server then 18 message headers are displayed, which is exactly as it should be.

So, it appears that my complete: function() is being called repeatedly... once as it should and then 18 more times (effectively once for each message header retrieved).

Anyone have any idea why this would be?

1.  <script type="text/javascript" src="javascript/jquery/jquery-1.4.2.js"></script>
    <script type="text/javascript" src="javascript/jquery/ui/jquery.ui.core.js"></script>
    <script type="text/javascript" src="javascript/jquery/ui/jquery.ui.widget.js"></script>
    <script type="text/javascript" src="javascript/jquery/ui/jquery.ui.datepicker.js"></script>
    <link type="text/css" href="javascript/jquery/themes/ui-lightness/jquery.ui.datepicker.css" rel="stylesheet" />
    <script type="text/javascript">
    $(function() {
     $('#datepicker').datepicker({
      changeMonth: true,
      changeYear: true
     });
    });
    </script>

The html looks like this:

1.   <tr>
       <td>Date of Birth MM/DD/YYYY<br>(Restrict kids from some areas)</td>
       <td><input type='text' id='datepicker' name='dob' maxlength='12' /></td>
     </tr>
     <tr>
       <td>Lived here since?</td>
       <td><input type='text' id='datepicker' name='since' maxlength='12' /></td>
     </tr>