2012-12-28 51 views
1

我正在使用phonegapJQuery Mobile Android混合應用程序。我的申請涉及用戶註冊,登錄和付款。我面臨的問題是,當我嘗試從一個頁面導航到另一個時,我收到消息error loading page錯誤加載頁面,而從一個頁面過渡到另一個jquery移動+ Phonegap

我正在創建數據角色頁面並使用changepage方法導航到不同的頁面。

這裏是數據角色頁面和js文件,我得到這個錯誤。

首先js文件bookingSearchResult.js

var jsonData=new Array(); 

$(document).ready(function(e) { 


$(".radioCheck").live("change",(function(event, ui){ 

     var value=$(this).val(); 
     value=value.split("_"); 
     var str=value[0]+ "(INR"+value[1]+"/-)"; 
     var tempid=this.id; 
     tempid=tempid.split("_");   
     $("#spRoomType_"+tempid[2]).html(str); 
    })); 




    $("#bookingform").live("pagebeforeshow",function(e){ 

     loadpagedata(); 


    }); 

    $("#btnFormSubmit").live("click",function(){ 

     $.blockUI({ message: '<div class="loading-text">Please wait...</div>' }); 
     var roomsData=$('#selectmenu2').val(); 
     var aduldetails=$('#selectmenu3').val(); 
     for(var i=1;i<=roomsData;i++){ 

     for(var j=1;j<=aduldetails;j++){ 
      var fname=$('#Fname_'+i+'_'+j+'').val(); 

      var lname=$('#Lname_'+i+'_'+j+'').val(); 

      var email=$('#Email_'+i+'_'+j+'').val(); 
      var mobile=$('#Monumber_'+i+'_'+j+'').val(); 


      if(fname=="") 
       { 
       $.unblockUI(); 
       jAlert('Please enter First Name','Alert',function(){ 
        $(".valFname").focus(); 
        });  
       return false; 
       } 
       else if(!fname.match(/^[A-Za-z]+$/)) 
       { 
        $.unblockUI(); 
        jAlert('First Name can have alphabets only','Alert',function(){ 
        $(".valFname").focus(); 
       });  
       return false; 
       } 
       else if(fname.length>15) 
       { 
        $.unblockUI(); 
        jAlert('First Name cannot be greater than 15 alphabets','Alert',function(){ 
         $(".valFname").focus(); 
        });   
        return false; 
       } 
      if(lname=="") 
       { 
        $.unblockUI(); 
        jAlert('Please enter Last Name','Alert',function(){ 
        $(".valLname").focus(); 
       }); 
       return false; 
       } 
       else if(!lname.match(/^[A-Za-z]+$/)) 
       { 
        $.unblockUI(); 
       jAlert('Last Name can have alphabets only','Alert',function(){ 
        $(".valLname").focus(); 
       }); 
       return false; 
       } 
       else if(lname.length>15) 
       { 
        $.unblockUI(); 
       jAlert('Last Name cannot be greater than 15 alphabets','Alert',function(){ 
        $(".valLname").focus(); 
       });  
       return false; 
       } 
      if(email=="") 
      { 
       $.unblockUI(); 
       jAlert('Please enter Email Address','Alert',function(){ 
        $(".valEmail").focus(); 
       }); 
       return false; 
      } 
      else if(!email.match(/^(([^<>()[\]\\.,;:\[email protected]\"]+(\.[^<>()[\]\\.,;:\[email protected]\"]+)*)|(\".+\"))@((\[(2([0-4]\d|5[0-5])|1?\d{1,2})(\.(2([0-4]\d|5[0-5])|1?\d{1,2})){3} \])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/)) 
      { 
       $.unblockUI(); 
       jAlert('Enter valid Email Address','Alert',function(){ 
        $(".valEmail").focus(); 
       }); 
       return false; 
      } 
      if(mobile=="") 
      { 
       $.unblockUI(); 
       jAlert('Please enter Mobile Number','Alert',function(){ 
        $('.valMobile').focus(); 
       });  
       return false; 
      } 
      else if(!mobile.match(/([0-9]{10})$/)) 
      { 
       $.unblockUI(); 
       jAlert('Enter valid 10-digit Mobile Number','Alert',function(){ 
        $('.Monumber').focus(); 
       });  
       return false; 
      } 
     }   
    } 
     $.unblockUI(); 
     $.mobile.changePage("#bookingConf");  
    }); 
}); 


$('#bookingSearchResult').live('pagebeforeshow',function(event){ 

    $('#hotelListDiv').empty(); 
    $('#hotelList').empty(); 
    $('#detailsDiv').empty(); 

    $('#hDisplay').text("Hotels Available in "+$('#Cityname option:selected').text()); 

    var dayWise=''; 
    var priceBreakup=''; 
    var dataRetrieved=new Array(); 
    var dynHotels=""; 
    dataRetrieved=JSON.parse(localStorage['search']); 

    $.each(dataRetrieved, function (index, status) { 
     var cinDate=JSON.parse(localStorage['search'])[index].checkInDate; 
     var checkinDate=displayDate2(cinDate); 
     $('#topDate').text(checkinDate[0]); 
     var nights=$('#nights').val(); 
     var rooms=new Array(); 
     var pax=new Array(); 
     var roomDetails=''; 
     var numAdults=new Array(); 
     numAdults[0]=$('#selectmenu3').val(); 

     if($('#selectmenu2').val()>1){ 
      for(var i=1;i<$('#selectmenu2').val();i++){ 

       numAdults[i]=$("#"+"selectmenu3"+i).val(); 
      } 
     } 
     for(var i=0;i<$('#selectmenu2').val();i++) 
     { 
      roomDetails="<br>"+roomDetails+"Room "+(i+1)+": "+numAdults[i]+" Adult</br>"; 
     } 


     $.each(this.availabilityList, function (index, status) { 

      var dynRates=''; 
      var hotel=this.hotelName; 
      var hotelId=this.hotelId; 
      var priceString=""; 

      $.each(this.rate, function (index, status) { 
       var offerPrice=this.price; 
       var rateId=this.rateId; 
       var rateDesc=this.rateIdTypeDesc; 
       var roomVisited=0; 
       var daySplit=''; 
       var dayWisePrice=''; 

       $.each(this.roomGrid.room, function (index, status) { 

        if(roomVisited !=this.roomNumber){ 
         var roomNo=this.roomNumber; 
         var roomType=this.roomType; 
         var numOfPax=this.numOfPax; 
         $.each(this.daywiseRates, function (index, status) { 
          var dateVisited=0; 
          $.each(this.forday, function (index, status) { 
           if(dateVisited !=this.date){ 
            var day=this.date; 
            var dayWiseTotal=this.price; 
            dayWisePrice=dayWisePrice+roomNo+"%"+numOfPax+"_"+day+":"+dayWiseTotal+"#"; 
            dateVisited=this.date; 
           } 
          });  
         }); 
        } 
        roomVisited=this.roomNumber; 
       }); 
       var buttonId="btnBooknow_"+hotelId+"_"+rateId; 
       var priceBreakupId="priceBreakupText$"+hotelId+"$"+rateId+"$"+dayWisePrice; 

       dynRates=dynRates+'<li class="pricebreakup"><div class="pricebreakup-strip">'+rateDesc+' &#x20B9; '+offerPrice+'/-<br><span>(Lux. Tax Excl.)</span></div> <span class="priceBreak" id='+priceBreakupId+'>Price Breakup</span> <div class="submit-btn-wrap"><input name="Booknow" type="button" class="button-bg" id='+buttonId+' value="BOOK NOW"/></div></li>'; 
      });//end of rate 
      dynHotels=dynHotels+'<div class="booking_search_result_hotel_item_wrap"><a id="info_popup" href="#info_popup" data-rel="dialog" class="info_btn"><img src="images/i_ico.png" width="18" height="18" alt="Info"></a><div data-role="collapsible" id="hotelList" data-collapsed="true"><h3 id="hName">'+hotel+'</h3><ul class="form-list-item booking_search_result"><li class="booking_terms">Service tax @ 7.42% will be charged (As per new notification).</li><li class="check-in-details"><a id="policy_popup" href="#policy_popup" data-rel="dialog" class="info_btn"><img src="images/p_ico.png" width="27" height="26" alt="i_ico" class="i_ico"></a> Check in: '+checkinDate[1]+', '+nights+' Nights</span><br>'+roomDetails+'</li>'+dynRates+'</ul></div></div> '; 
     });//end of availabilityList 
    }); 
    $(dynHotels).appendTo('#hotelListDiv'); 

    $('div[data-role=collapsible]').collapsible({refresh:true}); 
    $('input[type=button]').button({refresh:true}); 

    $('input[name="Booknow"]').click(function(){ 

     var btnId=this.id.split('_'); 
     hotelIdSelected=btnId[1]; 
     rateIdSelected=btnId[2]; 
     $.mobile.changePage('#bookingform'); 
    }); 

    $('.priceBreak').click(function(){ 
     var id=this.id; 
     if(typeof(Storage)!=="undefined") 
     { 
      localStorage.priceBreakId=id; 
     } 
     $.mobile.changePage('#priceBreakup'); 
    }); 
}); 

js文件:bookingGuestDetails.js

$(document).ready(function(){ 
    $("#bookingConf").live("pagebeforeshow",function(e){ 

     loadBookingConfData();    
    }); 

    $(".edit-btn1").live("click",function(){ 

     var imgId=this.id; 

      imgId=imgId.split('_'); 
     var str=imgId[1]; 

     $("#ulBookingConf li").empty(); 
     loadBookingConfDataForEdit(); 
    }); 


    $("#btnSubmitConf").live("click",function(){ 
     $.blockUI({ message: '<div class="loading-text">Please wait...</div>' }); 
     var conFname=$(".clsConName").val(); 
     var conEmail=$(".clsConEmail").val(); 
     var conMobile=$(".clsConMobile").val(); 


     if(conFname=="") 
      { 
      $.unblockUI(); 
      jAlert('Please enter First Name','Alert',function(){ 
       $(".clsConName").focus(); 
       });  
      return false; 
      } 

      else if(!conFname.match(/^[a-zA-Z ]*$/)) 
      { 
       $.unblockUI(); 
       jAlert('First Name can have alphabets only','Alert',function(){ 
       $(".clsConName").focus(); 
      });  
      return false; 
      } 

      else if(conFname.length>15) 
      { 
       $.unblockUI(); 
       jAlert('First Name cannot be greater than 15 alphabets','Alert',function(){ 
        $(".clsConName").focus(); 
       });   
       return false; 
      } 


     if(conEmail=="") 
     { 
      $.unblockUI(); 
      jAlert('Please enter Email Address','Alert',function(){ 
       $(".clsConEmail").focus(); 
      }); 
      return false; 
     } 
     else if(!conEmail.match(/^(([^<>()[\]\\.,;:\[email protected]\"]+(\.[^<>()[\]\\.,;:\[email protected]\"]+)*)|(\".+\"))@((\[(2([0-4]\d|5[0-5])|1?\d{1,2})(\.(2([0-4]\d|5[0-5])|1?\d{1,2})){3} \])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/)) 
     { 
      $.unblockUI(); 
      jAlert('Enter valid Email Address','Alert',function(){ 
       $(".clsConEmail").focus(); 
      }); 
      return false; 
     } 

     if(conMobile=="") 
     { 
      $.unblockUI(); 
      jAlert('Please enter Mobile Number','Alert',function(){ 
       $('.clsConMobile').focus(); 
      });  
      return false; 
     } 
     else if(!conMobile.match(/([0-9]{10})$/)) 
     { 
      $.unblockUI(); 
      jAlert('Enter valid 10-digit Mobile Number','Alert',function(){ 
       $('.clsConMobile').focus(); 
      });  
      return false; 
     } 
     $.unblockUI(); 
     createProvisional(); 
    }); 
}); 

function loadBookingConfData(){ 
    var noOfRoom=$('#selectmenu2').val(); 
    var nights=$('#nights').val(); 
    var noOfAdults=0; 
    var cinDate=JSON.parse(localStorage['search'])[0].checkInDate; 
    var displayDate=displayDate2(cinDate)[1]; 
    var roomDetails='<li class="booking_full_guest_head"><ul id="booking_full_guest_head_ul"><li>Hotel <span id="hotelConf">'+localStorage.hotelNameGuestDetails+'</span></li><li>Check-in <span id="CheckinConf">'+displayDate+'</span></li><li>Nights <span id="NightsConf">'+nights+'</span></li></ul></li>'; 

    for(var i=1;i<=noOfRoom;i++) 
    { 
     roomDetails+='<li><div class="booking_full_guest_head_edit">Room-'+i+'<br>'+$("#spRoomType_"+i).html()+'<a href="#" class="edit-btn"><img class="edit-btn1" id="imgEdit_'+i+'" src="images/edit-ico.jpg" width="19" height="18" alt="Edit"></a></div></li> '; 

     if(i!=1){ 
      noOfAdults=$('#selectmenu3'+(i-1)).val(); 

     } 
     else 
     { 

      noOfAdults=$('#selectmenu3').val(); 
     } 
     for(var j=1;j<=noOfAdults;j++){ 

      if(document.getElementById('Gender_'+i+'_'+j+'_0').checked) 
      { 
       roomDetails+='<li class="bookinsg_full_guest_adult_seprator"><div class="booking_full_guest_type_head"> Adult '+j+'</div><div data-role="fieldcontain"> <label for="textinput">Name </label> <input class="enFields_'+ i +'" disabled="disabled" name="textinput" type="text" id="Fname1_'+i+'_'+j+'" value="'+$("#Fname_"+i+"_"+j).val()+' '+$("#Lname_"+i+"_"+j).val()+'" /></div><div data-role="fieldcontain" class="radio-input-wrap"><fieldset data-role="controlgroup" data-type="horizontal"><label class="gender-label">Gender<span class="mandatory-gender-sign">*</span></label><input class="enFields_'+ i +'" disabled="disabled" name="Gender1_'+i+'_'+j+'" type="radio" id="Gender1_'+i+'_'+j+'_0" value="" checked /><label for="Gender1_'+i+'_'+j+'_0">Male</label><input class="enFields_'+ i +'" disabled="disabled" type="radio" name="Gender1_'+i+'_'+j+'" id="Gender1_'+i+'_'+j+'_1" value="" /> <label for="Gender1_'+i+'_'+j+'_1">Female</label></fieldset></div><div data-role="fieldcontain"><label for="textinput">Email </label><input class="enFields_'+ i +'" name="textinput" disabled="disabled" type="email" id="Email1_'+i+'_'+j+'" value="'+$("#Email_"+i+"_"+j).val()+'" /></div> <div data-role="fieldcontain"><label for="textinput">Number </label><input class="enFields_'+ i +'" name="textinput" type="number" id="Monumber1_'+i+'_'+j+'" disabled="disabled" value="'+$("#Monumber_"+i+"_"+j).val()+'" /> </div></li>'; 
      } 
      else if(document.getElementById('Gender_'+i+'_'+j+'_1').checked) 
      { 
       roomDetails+='<li class="bookinsg_full_guest_adult_seprator"><div class="booking_full_guest_type_head"> Adult '+j+'</div><div data-role="fieldcontain"> <label for="textinput">Name </label> <input class="enFields_'+ i +'" disabled="disabled" name="textinput" type="text" id="Fname1_'+i+'_'+j+'" value="'+$("#Fname_"+i+"_"+j).val()+' '+$("#Lname_"+i+"_"+j).val()+'" /></div><div data-role="fieldcontain" class="radio-input-wrap"><fieldset data-role="controlgroup" data-type="horizontal"><label class="gender-label">Gender<span class="mandatory-gender-sign">*</span></label><input class="enFields_'+ i +'" disabled="disabled" name="Gender1_'+i+'_'+j+'" type="radio" id="Gender1_'+i+'_'+j+'_0" value="" /><label for="Gender1_'+i+'_'+j+'_0">Male</label><input class="enFields_'+ i +'" disabled="disabled" type="radio" name="Gender1_'+i+'_'+j+'" id="Gender1_'+i+'_'+j+'_1" value="" checked/> <label for="Gender1_'+i+'_'+j+'_1">Female</label></fieldset></div><div data-role="fieldcontain"><label for="textinput">Email </label><input class="enFields_'+ i +'" name="textinput" type="email" id="Email1_'+i+'_'+j+'" value="'+$("#Email_"+i+"_"+j).val()+'" disabled="disabled"/></div> <div data-role="fieldcontain"><label for="textinput">Number </label><input class="enFields_'+ i +'" name="textinput" type="number" id="Monumber1_'+i+'_'+j+'" disabled="disabled" value="'+$("#Monumber_"+i+"_"+j).val()+'" /> </div></li>'; 
      }     
     } 

    } 
    var netCost=""; 
    netCost=calcTotalResevationCost(); 
    roomDetails+='<li class="booking_full_guest_adult_seprator booking_full_guest_adult_total">Total Cost &nbsp; INR '+ netCost +' /-</li><li class="submit-btn-wrap"><input name="Submit" type="submit" class="button-bg" id="btnCreateProv" value="Save"/><br><input name="Reset" type="reset" value="Cancel" class="button-bg"/></li>'; 
    $("#ulBookingConf").empty(); 

    $(roomDetails).appendTo("#ulBookingConf").trigger("create"); 
} 


function loadBookingConfDataForEdit(){ 
    var cinDate=JSON.parse(localStorage['search'])[0].checkInDate; 
    var displayDate=displayDate2(cinDate)[1]; 
    var nights=$('#nights').val(); 
    var noOfRoom=$('#selectmenu2').val(); 
    var noOfAdults=0; 
    var roomDetails='<li class="booking_full_guest_head"><ul id="booking_full_guest_head_ul"><li>Hotel <span id="hotelConf">'+localStorage.hotelNameGuestDetails+'</span></li><li>Check-in <span id="CheckinConf">'+displayDate+'</span></li><li>Nights <span id="NightsConf">'+nights+'</span></li></ul></li>'; 

    for(var i=1;i<=noOfRoom;i++) 
    { 
     roomDetails+='<li id="liConfPage"><div class="booking_full_guest_head_edit">Room-'+i+'<br>'+$("#spRoomType_"+i).html()+'<a href="#" class="edit-btn"><img class="edit-btn1" id="imgEdit_'+i+'" src="images/edit-ico.jpg" width="19" height="18" alt="Edit"></a></div></li> '; 

     if(i!=1){ 
     noOfAdults=$('#selectmenu3'+(i-1)).val(); 
     } 
     else 
     {  
      noOfAdults=$('#selectmenu3').val(); 
     } 
     for(var j=1;j<=noOfAdults;j++){ 
      if(document.getElementById('Gender_'+i+'_'+j+'_0').checked) 
      { 
       roomDetails+='<li id="liConfPageGender" class="bookinsg_full_guest_adult_seprator"><div class="booking_full_guest_type_head"> Adult '+j+'</div><div data-role="fieldcontain" id="guestDetails"> <label for="textinput">Name </label> <input class="clsConName" name="textinput" type="text" id="Fname1_'+i+'_'+j+'" value="'+$("#Fname_"+i+"_"+j).val()+' '+$("#Lname_"+i+"_"+j).val()+'" /></div><div data-role="fieldcontain" class="radio-input-wrap"><fieldset data-role="controlgroup" data-type="horizontal"><label class="gender-label">Gender<span class="mandatory-gender-sign">*</span></label><input type="radio" class="clsConRadio" name="Gender1_'+i+'_'+j+'" id="Gender1_'+i+'_'+j+'_0" value="" checked /><label for="Gender1_'+i+'_'+j+'_0">Male</label><input type="radio" class="enFields_'+ i +'" name="Gender1_'+i+'_'+j+'" id="Gender1_'+i+'_'+j+'_1" value="" /> <label for="Gender1_'+i+'_'+j+'_1">Female</label></fieldset></div><div data-role="fieldcontain"><label for="textinput">Email </label><input class="clsConEmail" name="textinput" type="text" id="Email1_'+i+'_'+j+'" value="'+$("#Email_"+i+"_"+j).val()+'" /></div> <div data-role="fieldcontain"><label for="textinput">Number </label><input type="text" class="clsConMobile" name="textinput" id="Monumber1_'+i+'_'+j+'" value="'+$("#Monumber_"+i+"_"+j).val()+'" /> </div></li>'; 
      } 
      else if(document.getElementById('Gender_'+i+'_'+j+'_1').checked) 
      { 
       roomDetails+='<li class="bookinsg_full_guest_adult_seprator" id="liConfpagefulldetails"><div class="booking_full_guest_type_head"> Adult '+j+'</div><div data-role="fieldcontain"> <label for="textinput">Name </label> <input type="text" class="clsConName" name="textinput" id="Fname1_'+i+'_'+j+'" value="'+$("#Fname_"+i+"_"+j).val()+' '+$("#Lname_"+i+"_"+j).val()+'" /></div><div data-role="fieldcontain" class="radio-input-wrap"><fieldset data-role="controlgroup" data-type="horizontal"><label class="gender-label">Gender<span class="mandatory-gender-sign">*</span></label><input type="radio" class="enFields_'+ i +'" name="Gender1_'+i+'_'+j+'" id="Gender1_'+i+'_'+j+'_0" value="" /><label for="Gender1_'+i+'_'+j+'_0">Male</label><input type="radio" class="enFields_'+ i +'" name="Gender1_'+i+'_'+j+'" id="Gender1_'+i+'_'+j+'_1" value="" checked/> <label for="Gender1_'+i+'_'+j+'_1">Female</label></fieldset></div><div data-role="fieldcontain"><label for="textinput">Email </label><input type="text" class="clsConEmail" name="textinput" id="Email1_'+i+'_'+j+'" value="'+$("#Email_"+i+"_"+j).val()+'" /></div> <div data-role="fieldcontain"><label for="textinput">Number </label><input type="text" class="clsConMobile" name="textinput" id="Monumber1_'+i+'_'+j+'" value="'+$("#Monumber_"+i+"_"+j).val()+'" /> </div></li>'; 
      }     
     } 
    } 
    var netCost=""; 
    netCost=calcTotalResevationCost(); 
    roomDetails+='<li class="booking_full_guest_adult_seprator booking_full_guest_adult_total">Total Cost &nbsp; INR '+ netCost +' /- </li><li class="submit-btn-wrap"><input name="Submit" type="submit" class="button-bg" id="btnSubmitConf" value="Save"/><br><input name="Reset" type="reset" value="Cancel" class="button-bg"/></li>'; 
    $("#ulBookingConf").empty(); 

    $(roomDetails).appendTo("#ulBookingConf").trigger("create"); 


} 

以下是我們的預訂數據角色頁面,一個是bookingform等是bookingConfirmationPage

<!DOCTYPE HTML> 
<html> 
<head> 

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" /> 
<title>Ginger</title> 



<link href="css/dark-theme.min.css" rel="stylesheet" type="text/css"/> 

<!--<link href="css/jquery-ui.css" rel="stylesheet" type="text/css"/> --> 
<link href="css/mystyle.css" rel="stylesheet" type="text/css"/> 
<link href="css/jquery.mobile.structure-1.2.0.css" rel="stylesheet" type="text/css" /> 
<link href="css/jalerts.css" rel="stylesheet" type="text/css"/> 
<!-- Includes Mobiscroll --> 
<link href="css/mobiscroll-2.3.1.custom.min.css" rel="stylesheet" type="text/css" /> 

</head> 

<body class="booking-bg" id="gingerAppBody"> 
<div data-role="page" id="booking" data-theme="a" class="form-content-wrap home-bg"> 

<div data-role="header" data-id="ginger_header" data-position="fixed"> 
    <h1>BOOKING</h1> 



<!------------- booking form page ---------------------> 
<div data-role="page" id="bookingform" data-theme="a" class="form-content-wrap"> 

<div data-role="header" data-id="ginger_header" data-position="fixed"> 
    <h1>BOOKING</h1> 
    <a href="#bookingSearchResult" data-role="button" data-icon="gback" data-iconpos="notext" data-transition="pop">Back</a> 

    <a href="#" data-role="button" data-icon="call" data-iconpos="notext" class="ui-btn-right" id="call-btn">Call</a> 
    <a href="#" data-role="button" data-icon="menu" data-iconpos="notext" class="ui-btn-right">Menu</a> 
    </div> 
<form method="get"> 
<div data-role="content" class="form-content-wrap" > 
     <div data-role="collapsible-set" class="booking_form_wrap" id="roomListDiv"></div> 

     <ul class="form-list-item"> 
     <li class="booked-by-head"> 
      Booked By... 
     </li> 
     <li> 
      <div data-role="fieldcontain"> 
      <select name="flipswitch3" id="flipswitch3" data-role="slider"> 
       <option value="off">Off</option> 
       <option value="on">On</option> 
      </select> 
      <label for="flipswitch3">Booker is same as guest 1</label> 
      </div> 

     </li> 
     <li> 
      <div data-role="fieldcontain"> 
      <input type="text" name="Fname" id="BookerFname" value="" placeholder="First Name" />    
      </div> 
      <span class="mandatory-sign">*</span> 
     </li> 
     <li> 
      <div data-role="fieldcontain"> 
      <input type="text" name="Lname" id="BookerLname" value="" placeholder="Last Name" /> 
      </div> 
      <span class="mandatory-sign">*</span> 
     </li> 
     <li class="radio-input-li"> 
      <div data-role="fieldcontain" class="radio-input-wrap"> 
       <fieldset data-role="controlgroup" data-type="horizontal"> 

       <label class="gender-label">Gender 
       <span class="mandatory-gender-sign">*</span></label> 
       <input name="BookerGender" type="radio" id="BookerGender_0" value=""/> 
       <label for="BookerGender_0">Male</label>    
       <input type="radio" name="BookerGender" id="BookerGender_1" value="" /> 
       <label for="BookerGender_1">Female</label> 
       </fieldset> 
      </div> 
     </li>     
     <li> 
      <div data-role="fieldcontain"> 
      <input type="email" name="Email" id="BookerEmail" value="" placeholder="Email" /> 
      </div> 
      <span class="mandatory-sign">*</span> 
     </li> 
     <li> 
      <div data-role="fieldcontain"> 
     <input type="tel" name="Monumber" id="BookerMonumber" value="" placeholder="Mobile Number" /> 
      </div> 
      <span class="mandatory-sign">*</span> 
     </li> 
     <li> 
      <div data-role="fieldcontain"> 
      <select name="flipswitch2" id="flipswitch2" data-role="slider"> 
       <option value="off">Off</option> 
       <option value="on">On</option> 
      </select> 
      <label for="flipswitch2">Subscribe to the 'Ginger' newsletter</label> 
      </div> 

     </li> 
     <li class="submit-btn-wrap">  
      <input name="Submit" type="submit" value="Submit" id="btnFormSubmit" class="button-bg"/>  
      <br> 
      <input name="Reset" type="reset" value="Reset" class="button-bg"/> 
     </li> 
     </ul> 
</div> 
</form> 
</div> 

<!------------- booking confirmation page ---------------------> 


<div data-role="page" id="bookingConf" data-theme="a" class="form-content-wrap"> 

<div data-role="header" data-id="ginger_header"> 
    <h1>BOOKING</h1> 
    <a href="#bookingform" data-role="button" data-icon="gback" data-iconpos="notext" data-transition="pop">Back</a> 

    <a href="#" data-role="button" data-icon="call" data-iconpos="notext" class="ui-btn-right" id="call-btn">Call</a> 

    <a href="#" data-role="button" data-icon="menu" data-iconpos="notext" class="ui-btn-right">Menu</a> 
    </div> 
<form method="get"> 
<div data-role="content" class="form-content-wrap" > 
     <ul id="ulBookingConf" class="form-list-item booking_payment"> 



     </ul> 
</div> 
</form> 
</div> 




</div> 


<script src="js/head.min.js"></script> 

<script> 
head.js("js/jquery-1.8.2.min.js", "cordova-2.1.0.js", "js/jquery-ui.min.js", "js/jquery.blockUI-min.js","js/jquery.alerts.min.js","jquery.mobile/jquery.mobile-1.2.0.min.js","js/mobiscroll-2.3.1.custom.js","js/registration.js","js/booking.js","js/bookingSearch.js","js/bookingSearchResult.js","js/bookingGuestDetails.js","js/paymentSuccess.js","js/priceBreakup.js","js/common.js",function(){ 
    //head.js("js/jquery-1.8.2.min.js", "cordova-2.1.0.js", "js/jquery-ui.min.js", "js/jquery.blockUI-min.js","js/jquery.alerts.min.js","jquery.mobile/jquery.mobile-1.2.0.min.js","js/mobiscroll-2.3.1.custom.js","js/default.js","js/registration1.js","js/booking1.js","js/paymentSuccess.js",function(){ 
     localStorage.clear(); 
     $.mobile.selectmenu.prototype.options.nativeMenu = false; 
     $.mobile.phonegapNavigationEnabled = true ; 

     document.addEventListener("deviceready", onDeviceReady, false); 

     function onDeviceReady(){ 

     document.addEventListener("backbutton", function(e){ 

      if($.mobile.activePage.is('#booking')){ 

       e.preventDefault(); 
       navigator.app.exitApp(); 
      } 
      else { 

       navigator.app.backHistory(); 
      } 
     }, false); 
     } 
}); 

</script> 

</body> 
</html> 
+0

我的回答有幫助嗎? – alkis

回答

1

與jquery移動這 $(document).ready(function(){

是不需要的(實際上是這樣使用它是錯誤的。 See here.) 當您導航到一個頁面時,一系列事件正在觸發。 pagebeforecreate,pagecreate,pagebeforeshow,pageshow等是他們的一些 。你綁定到那些沒有文檔準備好的事件。由於您使用 phonegap,您應該看到deviceready事件和mobileinit

相關問題