jQuery Forum

Hi Luke,

Appreciate your response,

As you may have observed, my build was done with the Adobe DW CS 5.5 PG extension. Today I figured out that Adobe delivered old PG code with CS 5.5 and they have not delivered an update. As Adobe delivered a version with no explicit version number I compared the sizes of the Adobe version and the PG Site version 0.9.6 with the following observation:

Adobe PG JS            103 kb
PG site JS 0.9.6        130 kb

Have not verified if there is a notable difference in function in my case.

Any way I may proceed as you suggest: that is running the build with PG directly from Eclipse

Thanks
/Ralf

Hi Sheldon,

Take a look at the app working live (code further down):

url:                             http://privacia.se/em.htm
userId (e-post) field:     alf.and@mcd.se
passw(Lösenord) field: bm

Here's the code for the first 2 pages:
Go down to the page code (HTML) then up to look at the related Javascript
Remember that the PHP/MySQL call is AJAX
My Jquery Mobile app does have 1 initial page load (6 JQM pages). All data fetching to
subsequent pages are AJAX calls.

<script type="text/javascript">
//
// BEGIN - CUSTOMER DATA OBJECT - ONLY ONE INSTANCE
// FETCH FROM custMgr LIKE SO: custMgrObj.mgrFname
function custMgr(em,fn,ln,br,co) {
    this.mgrEmail = em;
    this.mgrFname =  fn;
    this.mgrLname = ln;
    this.mgrBranch = br;
    this.mgrCompany = co;
}
// END - CUSTOMER DATA OBJECT
//
// BEGIN - SET UP CUSTOMER PRIMARY MENU DATA OBJECT REPOSITORY
function menuData(mi) {
    this.menuItem = new Array();
    for ( i = 0; i < mi.length; i++ ) {
      this.menuItem[i] = mi[i];
    }
}
//
// BEGIN GENERATE MANAGERS SELECTION MENU
function insertMgrSelMenu() {
  var insertHTML = "<li data-role=\"list-divider\"></li>";
  for ( i=0 ; i < menuDataObj.menuItem.length ; i++ ) {   
     insertHTML = insertHTML + "<li class=\"imsmClicked\"><a>" +
     menuDataObj.menuItem[i] + "</a></li>" +
     "<li data-role=\"list-divider\"></li>";
  }
  $("#mgrSelectionMenu").html( insertHTML );
}
// END GENERATE MANAGERS SELECTION MENU
//
// BEGIN GOTO NEXT PAGE IN PROCESSING ORDER
function changeToNextPage(em) {
    if ( em != "notfound" ) {
        $(".messages").empty().append( custMgrObj.mgrFname + " " + custMgrObj.mgrLname + " : " + custMgrObj.mgrCompany + " AB");
        $.mobile.changePage( "#logonPassed" , "slide" );
    } else {
        $.mobile.changePage( "#logonFailed" , "slide" );
    }
}
// END GOTO NEXT PAGE IN PROCESSING ORDER
//
// BEGIN - AJAX CUSTOMER LOGIN AND DATA FORM POST HANDLING
function processFormData() {
// POST FORM PARAMETERS AND RECEIVE XML RESULT FROM PHP
$.post("loginscript-em4.php", $("#loginForm").serialize(),
 function(xml) {
    // EXTRACT CUSTOMER CREDENTIALS FROM PHP XML
    $(xml).find("login").each( function() {
        email = $(this).find("email").text();
        name = $(this).find("name").text();
        lname = $(this).find("lname").text();
        branch = $(this).find("branch").text();
        company = $(this).find("company").text();
        custMgrObj = new custMgr(email,name,lname,branch,company);
//        alert( "email = " + email + " password = " + password + " Submitdata =" + submitdata );
//        alert( "email= " + custMgrObj.mgrEmail );
    });
    // EXTRACT CUSTOMER MENU DATA FROM PHP XML
    menuitem = new Array();
    $(xml).find("menuitem").each( function(i) {
        menuitem[i] = $(this).text();
    });
    menuDataObj = new menuData(menuitem);
//    alert( "menuitem = " + menuDataObj.menuItem[0] );
    insertMgrSelMenu();
//    setInputAttrValues();
    changeToNextPage(custMgrObj.mgrEmail);
  }
 , "xml");
// alert( "email= " + custMgrObj.getCustMgr()[0] );
}
// END - AJAX CUSTOMER LOGIN
//
// BEGIN JQuery Init Handling
$(document).bind("mobileinit", function(){
      $('#logonPassed').live('pagebeforeshow',function(event,ui){
      $('#mgrSelectionMenu').listview('refresh');
  });
});
//
// END JQuery Init Handling
</script>
<!- ***************************** -->
<!- ***PAGE 1 MAIN LOGIN PAGE *** -->
<!- ***************************** -->
<div data-role="page" id="loginIndex">
  <div data-role="header">
    <h1><img src="images-em/jobcoach-logo.png" width="145" height="30" alt="Emperator AB"></h1>
  </div><!-- /header -->
 
  <div data-role="content" data-theme="b" >
  <p class="myclass">Välkommen till Emperators på-minuten bemanningssystem. Knappa in din e-post adress och ditt lösenord för att börja</p>
<form action="javascript:processFormData()" method="post" id="loginForm">

    <label for="loginEmailId" id="lloginEmailId">E-post:</label>
    <input type="email" name="email" id="loginEmailId" value="">

    <label for="loginPw" id="lloginPw">Lösenord:</label>
    <input type="password" name="password" id="loginPw" value="">

    <input type="hidden" name="submitFlag" id="submitFlag" value="Submitted">
    <label for="submitFormData" id="lsubmitFormData">Klicka för att skicka</label>
    <input type="submit" name="submitFormData" id="submitFormData" value="Skicka">

</form>

  </div><!-- /content -->
 
  <div data-role="footer">
    <p class="h2head">För assistans ring: <a href="tel:0735-123456">0735-123456</a></p>
  </div><!-- /footer -->
 
</div><!-- /page -->

<!- ********************************* -->
<!- ***PAGE 2 ROLE SELECTION MENU *** -->
<!- ********************************* -->

<div data-role="page" id="logonPassed" data-title="Roller Emperator">
  <div data-role="header">
    <p class="h2head">Logged On</p>
  </div><!-- /header -->
 
  <div data-role="content">
  <p class="messages"></p>
    <p class="myclass">Hej, Gör dina val nedan så får du en lista med upp till 10 av våra vassaste kandidater för jobbet<span class="floaticonright"><a href="#mgrpage-help" data-rel="dialog"><img src="images-em/icons/info.png" width="12" height="12" alt="help"></a></span></p>
    <br>
    <ul data-role="listview"  data-theme="a" id="mgrSelectionMenu">
<!-- GENERATE MANAGERS SELECTION HERE -->   
    </ul>

  </div><!-- /content -->
 
 <div data-role="footer" class="footer">
   <p class="h2head">För assistans ring: <a href="tel:0735-123456">0735-123456</a></p>
 </div><!-- /footer -->
 
</div><!-- /page -->

Explanation:

The first page is the login page containing a form with 2 fields (userid and password) and a submit button.
The form executes the script:
  processFormData()
This follows:
1. JQ method post is executed with parameters
    a) url to PHP/MySQL ( loginscript-em4.php )
    b) serialized form data ( $("#loginForm").serialize() )
    c) call back function to process XML PHP reply
        data extracted from XML stored in object custMgrObj
        and MenuDataObj
  2) insertMgrSelMenu() is called to inject menudata (listview li) in next page
  3) changeToNextPage() is executed to load next page

This is it

If you need just download the page from the server. Pages, additional css and javascript are embedded

/Ralf

Hi Sheldon,
I will take a look at what you are suggesting which I understand as "manually" taking care of the AJAX call/processing.

Did you see my post about that Adobe DW CS 5.5 deliver old PG JS code. I discovered that today.

Thanks
/Ralf

I love to hike to,

Hi,

Did you see my post where I declare my problems are solved (to Sheldon)?
My JQM web works on different real mobile device and on emulators too (Adobe and Android SDK).
It is now converted with PhoneGap and runs as an application (.apk) on Android.

Anyway,

I saw things in your post that I have observed through my own journey, so I'll write down a few things that you may try, in order of importance:

1) The "submit button": Spell without capitalize the "s" (the case without binding the "click")
    (why did you say "onclick"? do you bind inline? if binding, use an event handler with "click"
     and stick the hanlder into the "mobileinit" code)
    (if you use event handlers for the capturing of human interaction, don't use tap, swipe etc with
     the Android AVD, it doesn't work)
2) Refreshing the page: use "pagebeforeshow" not "pageshow" or "pagecreate"
  $('#yourPage').live('pagebeforeshow',function(event,ui){
      $('#yourNavList').listview('refresh');
  });
  ( eg this code should be wrapped in the mobileinit...
       $(document).bind("mobileinit", function(){
          // your handlers here like so
         $('#yourPage').live('pagebeforeshow',function(event,ui){
            $('#yourNavList').listview('refresh');
         });
       });
3) The Javascript reference for JQM should be the last JS page fetch and must come after the "mobileinit" code
    otherwise the mobile inits will have no effect.
   The mobile init should come after the JQ $(document).ready(function() { .. })

A few simple things that may have dramatic impact on your app.

You can try this out and it just does take a few simple edits. Let me know,

Regards
/Ralf

Jealous!  Awaiting cooler weather so we can hit the trails again, soon I hope.