Why does this jQuery Mobile multipage trigger multiple submit events? - jquery-mobile

Below is a test page. If I go through all the JQM 'pages' and then go back to the first page, and then click submit, the 'SUBMITTING' alert dialog will pop up 4 times. What am I doing wrong? What should I do to make the submit event fire only once?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta charset="utf-8">
<script type="text/javascript" charset="utf-8" src="js/phonegap.js"></script>
<link rel="stylesheet" href="jquery-mobile/jquery.mobile.css"/>
<link rel="stylesheet" href="css/custom-icons.css"/>
<link href="css/jquery.mobile-swatch-f.css" rel="stylesheet" type="text/css"/>
<script src="js/jquery.js"></script>
<script src="jquery-mobile/jquery.mobile.js"></script>
<script>
$('div:jqmData(role="page")').live('pageinit', function() {
$('form').submit(function(e) {
alert("SUBMITTING");
});
});
</script>
</head>
<body>
<form id="frm_testform_happy_party">
<div data-role="page" id="testform_menu" data-theme="f" class="dummyclass">
<div data-role="header">
<h1>Testing testing</h1>
</div>
<div data-role="content">
<ul data-role="controlgroup">
<li><a target_id="testform_happy" href="#testform_happy" data-role="button"
style="text-align:left" data-icon="arrow-r"
data-iconpos="right" class=".ui-icon-manditory">happy party</a></li>
<li><a target_id="testform_description" href="#testform_description" data-role="button"
style="text-align:left" data-icon="arrow-r"
data-iconpos="right">Description</a></li>
<li><a target_id="testform_vehicle" href="#testform_vehicle" data-role="button"
style="text-align:left" data-icon="arrow-r" data-iconpos="right">Vehicle</a>
</li>
</ul>
<input id="submit_claim" type="submit" name="send" value="Submit" id="submit"/>
<div id="debug">
</div>
</div>
<div data-role="footer" data-position="fixed" class="ui-btn-right" style="min-height:42px;">
<a href="index.html#claim_menu" rel="external" data-icon="arrow-l" data-direction="reverse"
data-iconpos="left"
style="margin-left: 10px; margin-top: 5px">Done</a>
<a href="index.html" data-icon="home" data-direction="reverse" data-iconpos="notext"
style="float: right; margin-right: 10px; margin-top: 5px"></a>
</div>
</div>
<div data-role="page" id="testform_happy" data-theme="f">
<div data-role="header">
<h1>Happy Party</h1>
</div>
<div data-role="content">
<label for="happy_initials">Initials:</label>
<input type="text" name="happy_initials" id="happy_initials" value="" class="required"/>
</div>
<div data-role="footer" data-position="fixed" class="ui-btn-right" style="min-height:42px;">
<a href="#testform_menu" data-icon="arrow-l" data-direction="reverse" data-iconpos="left"
style="margin-left: 10px; margin-top: 5px">Done</a>
<a href="index.html" data-icon="home" data-direction="reverse" data-iconpos="notext"
style="float: right; margin-right: 10px; margin-top: 5px"></a>
</div>
</div>
<div data-role="page" id="testform_description" data-theme="f">
<div data-role="header">
<h1>Description</h1>
</div>
<div data-role="content">
<label for="incident_date">Date of Incident:</label>
<input type="date" name="incident_date" id="incident_date" value="" class="required"/>
</div>
<div data-role="footer" data-position="fixed" class="ui-btn-right" style="min-height:42px;">
<a href="#testform_menu" data-icon="arrow-l" data-direction="reverse" data-iconpos="left"
style="margin-left: 10px; margin-top: 5px">Done</a>
<a href="index.html" data-icon="home" data-direction="reverse" data-iconpos="notext"
style="float: right; margin-right: 10px; margin-top: 5px"></a>
</div>
</div>
<div data-role="page" id="testform_vehicle" data-theme="f">
<div data-role="header">
<h1>Vehicle</h1>
</div>
<div data-role="content">
<label for="vehicle_registration_number">Registration Number:</label>
<input type="text" name="vehicle_registration_number" id="vehicle_registration_number" value=""
class="required"/>
</div>
<div data-role="footer" data-position="fixed" class="ui-btn-right" style="min-height:42px;">
<a href="#testform_menu" data-icon="arrow-l" data-direction="reverse" data-iconpos="left"
style="margin-left: 10px; margin-top: 5px">Done</a>
<a href="index.html" data-icon="home" data-direction="reverse" data-iconpos="notext"
style="float: right; margin-right: 10px; margin-top: 5px"></a>
</div>
</div>
</form>
</body>
</html>


You're doing this:
<script>
$('div:jqmData(role="page")').live('pageinit', function() {
$('form').submit(function(e) {
alert("SUBMITTING");
});
});
</script>
I think this is firing for every page loaded, correct?
Maybe try something like this:
<script>
$(function() {
$('#submit_claim').click(function() {
$('form').submit(function(e) {
alert("SUBMITTING");
});
});
});
</script>

Related

Dialog close went to previous page

Expected Scenario: I have two div in one page one is popup and other is the main page. When I click on popup popup should open and when i click close on pop up it should show the other div
Actual Scenario: WHen I close it doesnot show the other div instead it goes to the previous page
Using Jquery Mobile 1.3.0
$.mobile.changePage("#publishlogonmanage", { role: "dialog", transition:"slideup",reload:false,reverse: false,changeHash: false });
PopUP COde
<div data-role="page" id="publishlogonmanage" data-history="false" data-overlay-theme="b" data-theme="b">
<div data-role="header" data-theme="a">
<a data-icon="delete" id="logonClose" data-mini="true" data-theme="a" data-rel="back" data-role="button" class="ui-btn-left"></a>
<a data-icon="delete" data-theme="a" data-transition="flip" data-rel="back" data-mini="true" data-role="button" class="ui-btn-left" style="width:80px;" >Close</a>
</div>
<div data-role="content" style="padding: 0; margin: 0; background: #FFFFFF;">
This is Body
</div>
</div>
Main Page:
<div data-role="page" data-theme="b" id="MobilePage" data-overlay-theme="b">
<div data-role="header" data-position="fixed" data-tap-toggle="false" data-theme="a">
<div style="float: left; margin-left: 5px;"> Back</div>
<h1 id="title"> 10 </h1>
</div>
<div data-role="content" class="master-wrapper-page">
This is body
<div style="margin-top:7px;display:none;float: right !important; margin-left: 0px !important;overflow:ellipsis;white-space: nowrap;" data-close-btn="right" id="ManageLogon" data-mini="true" onclick="LoadDialog();" data-rel="popup"></div><img src="../../../images/logon-E.png" style="1px solid #666666;margin-top:3px;margin-right:-5px float: right;height:30px;width:30px;" id="logonexp" /></div>
</div>
</div>

How do you make a flipswitch on the right corner of a fixed header in jQuery Mobile?

I have tried the following:
<div data-role="header" data-position="fixed" data-tap-toggle="false">
<h1>My Page</h1>
<label for="nfcSwitch" class="ui-hidden-accessible">NFC:</label>
<input data-role="flipswitch" name="nfcSwitch" id="nfcSwitch" data-on-text="NFC on" data-off-text="NFC off" type="checkbox" />
</div>
but it shows the flipswitch on the left, under the h1

HTML
<div data-role="header" data-position="fixed" data-tap-toggle="false">
<h1>My Page</h1>
<div class="switch">
<label for="nfcSwitch" class="ui-hidden-accessible">NFC:</label>
<input data-role="flipswitch" name="nfcSwitch" id="nfcSwitch" data-on-text="NFC on" data-off-text="NFC off" type="checkbox"/>
</div>
</div>
CSS
.switch
{
position: absolute;
top: 0px;
right: 0px;
}
JSFiddle

Header is not Fixed (can go downward)in IOS Jquery mobile

I am using jquery mobile .I am facing a problem that my header is going down .When i touch screen downword direction> i already used data-position="fixed" data-tap-toggle="false"
in header ..Here is my full index .html .Please press down .Like scrolling a list then check
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<title></title>
<!--link rel="stylesheet" href="css/jquery.mobile-1.3.1.min.css"-->
<link rel="stylesheet" href="css/jquery.mobile-1.3.1.css">
<link rel="stylesheet" href="css/jquery.mobile.structure-1.3.1.css">
<link rel="stylesheet" href="css/jquery.mobile.structure-1.3.1.min.css">
<link rel="stylesheet" href="css/jquery.mobile.theme-1.3.1.css">
<link rel="stylesheet" href="css/jquery.mobile.theme-1.3.1.min.css">
<link rel="stylesheet" href="css/base.css">
<!-- Extra Codiqa features -->
<!-- jQuery and jQuery Mobile -->
<script src="js/jquery-1.9.1.min.js"></script>
<script src="cordova-2.7.0.js"></script>
<!--script src="js/jquery.mobile-1.3.1.min.js"></script-->
<!--script src="js/jquery.mobile-1.3.1.min.js"></script-->
<script src="js/jquery.mobile-1.3.1.js"></script>
<script src="js/index.js"></script>
<script src="js/PopupScript.js"></script>
<script src="js/CasePadDatabase.js"></script>
<script type="text/javascript" src="js/websocket.js"></script>
<script src="js/BackButtonImplentation.js"></script>
<script src="js/fontSizeFunctionality.js"></script>
<script src="js/CreateFolder.js"></script>
<!--script src="js/emailcomposer.js"></script-->
<script>
$(document).ready(function() {
$("#Home").css({ 'padding-top': '0px' });
$("#myFixedHeader").fixedtoolbar({ tapToggle: false });
});
</script>
</head>
<body>
<!--**********************************Home page Star******************************-->
<div data-role="page" id="Home" >
<div data-role="header" data-theme="b" data-position="fixed" data-tap-toggle="false" id="myFixedHeader">
<h1 class="ui-title" id="hdr" style="text-align:left;margin-left: 100px;">My Cases</h1>
<div class="ui-btn-right" id="headerButtons" data-role="controlgroup" data-type="horizontal">
Setting
Add
Edit
</div>
</div>
<div data-role="content">
<ul data-role="listview" data-inset="true" id="folderData" >
</ul>
<!-- **************Case Information Pop up Start*******************-->
<div data-role="popup" id="CaseInformationScreen" data-close-btn="none" data-overlay-theme="a" data-dismissible="false">
<div data-role="header" data-theme="b" >
Cancel
<h1>Case Information</h1>
Add
</div>
<div data-role="content">
<div><img src="img/Documents.png"/></div>
<div data-role="fieldcontain">
<label for="text-12" style="text-align:top;margin-left: 0px;">Case Name:</label>
<input name="text-12" id="text-12" value="" type="text" class="caseName_h">
</div>
<div data-role="fieldcontain">
<label for="text-12" style="text-align:left;margin-left: 0px;" >Case Date:</label>
<input name="text-12" id="text-12" value="" type="date" class="caseDate_h">
</div>
<div data-role="fieldcontain">
<label for="textarea-12">Textarea:</label>
<textarea cols="40" rows="8" name="textarea-12" id="text-12" class="caseTextArea_h"></textarea>
</div>
</div>
</div>
<!--Case Information Pop up End************************-->
<!-- User setting Pop up Start-->
<div data-role="popup" id="UserSettingScreen" data-close-btn="none" data-overlay-theme="a" data-dismissible="false">
<div data-role="header" data-theme="b" >
Cancel
<h1>User Settings</h1>
Ok
</div>
<div data-role="content">
<div><img src="img/settings.png"/></div>
<div data-role="fieldcontain">
<label for="text-12" style="text-align:top;margin-left: 0px;">IP Address:</label>
<input name="text-12" id="text-12" value="" type="text"/>
</div>
<div data-role="fieldcontain">
<label for="text-12" style="text-align:left;margin-left: 0px;">Display Font:</label>
<select name="select-choice-1" id="select-choice-1">
<option>Select size</option>
<option value="9">9 px</option>
<option value="10">10 px</option>
<option value="11">11 px</option>
<option value="12">12 px</option>
<option value="13">13 px</option>
<option value="14">14 px</option>
<option value="15">15 px</option>
<option value="16">16 px</option>
<option value="17">17 px</option>
</select>
</div>
</div>
</div>
<!-- User setting Pop up End-->
</div>
<script>
/*var mySocket = new GapSocket("192.168.1.3", 8101);
$(document).on('pagebeforeshow', '#Home', function() {
console.log("Home Page")
mySocket.onopen = function(){ alert("option") };
mySocket.onmessage = function(msg){alert(msg);};
mySocket.onerror = function(msg){alert("Oh Shit! " + msg);};
mySocket.send("some data here");
mySocket.onclose = function(){ alert("close") };
});*/
$("#headerButtons").on("click", "a", function() {
if ($(this).attr("id") == "Add") {
isUpdaterequired=false;
$('.caseName_h').val('');
$('.caseDate_h').val('');
$('.caseTextArea_h').val('');
var d = new Date();
var month = d.getMonth()+1;
var day = d.getDate();
var output = d.getFullYear() + '/' +
((''+month).length<2 ? '0' : '') + month + '/' +
((''+day).length<2 ? '0' : '') + day;
} else if ($(this).attr("id") == "Setting") {
} else if ($(this).attr("id") == "Edit") {
//alert("Edit Button click ");
$(".ctrl").toggleClass("togg");
}
});
</script>
</div>
<!--Home Page End-->
<!--DocumentScreen Page Start-->
<div data-role="page" id="DocumentScreen" >
<div data-role="header" data-theme="b" data-position="fixed" data-tap-toggle="false" >
<a href="#Home" data-role="button" data-inline="true" data-theme="b" style="text-align:left;margin-left: 20px; margin-bottom: 10px;" >Back</a>
<h1 class="ui-title" id="hdr" style="text-align:left;margin-left: 100px;">My Documents</h1>
<div class="ui-btn-right" id="addbuttons" data-role="controlgroup" data-type="horizontal">
<div><img src="img/Connect-Realtime.png" id="realTimeImaage" class="realTime_h"/></div>
</div>
</div>
<div data-role="content">
<ul data-role="listview" data-inset="true" id="folderInside_Data" >
</ul>
</div>
<script>
$(document).on('pagebeforeshow', '#DocumentScreen', function() {
console.log("DocumentScreen Page");
//loadFolderContent();
});
$(document).on('click', '.documentRowID', function() {
$.mobile.changePage($("#realTimeScreen"));
/* $.mobile.changePage($("#realTimeScreen"), {
transition: "slide",
reverse: false,
changeHash: false
});*/
console.log(this.id)
});</script>
<!--Document Pop up Start-->
<div data-role="popup" id="documentPopUpScreen" data-close-btn="none" data-overlay-theme="a" data-dismissible="false">
<div data-role="header" data-theme="b">
Cancel
<h1>Document Information</h1>
Ok
</div>
<div data-role="content">
<div><img src="img/Documents.png"/></div>
<div data-role="fieldcontain">
<label for="text-12" style="text-align:top;margin-left: 0px;">Name:</label>
<input name="text-12" id="text-12" value="" type="text" class="documentName_h">
</div>
<div data-role="fieldcontain">
<label for="text-12" style="text-align:left;margin-left: 0px;" >Date:</label>
<input name="text-12" id="text-12" value="" type="date" class="documentDate_h">
</div>
<div data-role="fieldcontain">
<label for="textarea-12">Notes:</label>
<textarea cols="40" rows="15" name="textarea-12" id="text-12" class="documentTextArea_h"></textarea>
</div>
</div>
</div>
<!--Document Pop up End-->
</div>
<!--DocumentScreen Page End-->
<div data-role="page" id="realTimeScreen" >
<div data-role="header" data-theme="b" data-position="fixed" data-tap-toggle="false">
Back
<h1 class="ui-title" id="" style="text-align:left;margin-left: 100px;">Document name</h1>
<div class="ui-btn-right" id="addbuttons" data-role="controlgroup" data-type="horizontal">
<a><img src="img/Follow-Realtime.png" id=""/></a>
<a><img src="img/Stop-Realtime.png" id=""/></a>
<a><img src="img/Email-Document.png" id="" class="email_h"/></a>
<a><img src="img/search.png" id="" class="search_h" /></a>
<a><img src="img/zoom-in.png" id="" class ="zoomIn_h"/></a>
<a><img src="img/Export-Realtime.png" id=""/></a>
</div>
</div>
<div data-role="content" data-theme="d">
<textarea cols="40" rows="80" name="textarea-12" id="textarea-12" class="test_h"></textarea>
<!--div id="realTimeContents"></div-->
</div>
<!--script>
$(document).on('pagebeforeshow', '#realTimeScreen', function() {
console.log("DocumentScreen Page");
var socket = new WebSocket('ws://192.168.12.171:8101/');
socket.onopen = function() {
socket.send('Hello World')
};
// alerts message pushed from server
socket.onmessage = function(msg) {
console.log("TTTTT"+JSON.stringify(msg));
$(".test_h").val(JSON.stringify(msg));
// $('#realTimeContents').append(JSON.stringify(msg)).listview('refresh');
// $('#realTimeContents').append('<br>');
/*var message=JSON.stringify(msg)
$('#realTimeContents').append(
'<span style="margin-left:5%;">' + 12.01 + '</span><span style="margin-left: 10%;">' + 'A' + '</span><span style="margin-left: 20%;">'message '</span>' + '<br>' + '<br>' + '<br>'
).listview('refresh');*/
};
// alert close event
socket.onclose = function() {
alert('closed');
};
});
// push a message after the connection is established.
/* for (i = 0; i < 400; i++) {
$('#realTimeContents').append(
'<span style="margin-left:5%;">' + 12.01 + '</span><span style="margin-left: 10%;">' + 'A' + '</span><span style="margin-left: 20%;">' + 'I was deputy canine devision' + '</span>' + '<br>' + '<br>' + '<br>'
);
}*/
</script-->
<div data-role="popup" id="searchPopupScreen" data-close-btn="none" data-overlay-theme="a" data-dismissible="false">
<div data-role="header" data-theme="b" >
Cancel
<h1>Edit Contact</h1>
Search
</div>
<div data-role="content">
<div data-role="fieldcontain">
<label for="text-12" style="text-align:top;margin-left: 0px;">Text:</label>
<input name="text-12" id="text-12" value="" type="text" class="seachText_h">
</div>
</div>
</div>
</div>
</body>
<script>
document.addEventListener("deviceready", onDeviceReady, false);
//<-------------------Ready Functionality-->
// $.mobile.loading('hide');
// onDeviceReady();
//document.ontouchmove = function(e){ e.preventDefault(); }
/*$('#select-choice-1').on('change', function () {
var style;
var font = $(this).val();
if ($('head').find('style.font').length === 0) {
style = $('<style class="font">.font { font-size: ' + font + 'px !important; }</style>');
$('head').append(style);
$('body *').addClass('font');
} else {
$('body *').removeClass('font');
$('style.font').empty();
style = '.font { font-size: ' + font + 'px !important; }';
$('style.font').append(style);
$('body *').addClass('font');
}});*/
//<-------------------Ready Functionality End----------------------------------------->-->
</script>
</html>

Try this script if your data-attributes don't work.
$(document).ready(function() {
$("#yourHeaderId").fixedtoolbar({ tapToggle: false });
});
Try to call this after your script file links, like this.
...
...
<script src="js/BackButtonImplentation.js"></script>
<script src="js/fontSizeFunctionality.js"></script>
<script src="js/CreateFolder.js"></script>
<!--script src="js/emailcomposer.js"></script-->
<script type="text/javascript">
$(document).ready(function() {
$("#Home").css({ 'padding-top': '0px' });
$("#yourHeaderId").fixedtoolbar({ tapToggle: false });
});
</script>
</head>
<body>
<!--**********************************Home page Star******************************-->
<div data-role="page" id="Home" >
<div id="myFixedHeader" data-role="header" data-theme="b" data-position="fixed" data-tap-toggle="false" >
<h1 class="ui-title" id="hdr" style="text-align:left;margin-left: 100px;">My Cases</h1>
...
...
Aldy check on iPhone.

How to one HTML file and different js file for different screen in jquery mobile

I am using jQuery mobile. I make two and three screen but I implement the all functionality on index.html. It is too confusing. I googled it and find that you can also make different JS file per screen (with include). But when I do like that, it doesn’t work. I don't understand why it is not working. It is too confusing if project is big to do the coding in same page. I need that to make all HTML in one screen(index.html) and JS different for differnt screen. Here is my code .
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<title></title>
<!--link rel="stylesheet" href="css/jquery.mobile-1.3.1.min.css"-->
<link rel="stylesheet" href="css/jquery.mobile-1.3.1.css">
<link rel="stylesheet" href="css/jquery.mobile.structure-1.3.1.css">
<link rel="stylesheet" href="css/jquery.mobile.structure-1.3.1.min.css">
<link rel="stylesheet" href="css/jquery.mobile.theme-1.3.1.css">
<ink rel="stylesheet" href="css/jquery.mobile.theme-1.3.1.min.css">
<!-- Extra Codiqa features -->
<!-- jQuery and jQuery Mobile -->
<script src="js/jquery-1.9.1.min.js"></script>
<script src="js/cordova-2.7.0.js"></script>
<!--script src="js/jquery.mobile-1.3.1.min.js"></script-->
<!--script src="js/jquery.mobile-1.3.1.min.js"></script-->
<script src="js/jquery.mobile-1.3.1.js"></script>
<script src="js/index.js"></script>
<!-- Extra Codiqa features -->
</head>
<style>
#Home{
background : transparent
url(img/Background-Screen.png)
no-repeat fixed left bottom;
-webkit-background-size :100% 100%;
-moz-background-size :100% 100%;
-o-background-size :100% 100%;
background-size : cover;
}
#DocumentScreen{
background : transparent
url(img/Background-Screen.png)
no-repeat fixed left bottom;
-webkit-background-size :100% 100%;
-moz-background-size :100% 100%;
-o-background-size :100% 100%;
background-size : cover;
}
#CaseInformationScreen {
background : transparent
url(img/Background-Screen.png)
no-repeat fixed left bottom;
-webkit-background-size :100% 100%;
-moz-background-size :100% 100%;
-o-background-size :100% 100%;
background-size : cover;
}
#UserSettingScreen {
background : transparent
url(img/Background-Screen.png)
no-repeat fixed left bottom;
-webkit-background-size :100% 100%;
-moz-background-size :100% 100%;
-o-background-size :100% 100%;
background-size : cover;
}
</style>
<body>
<!--page one My Cases Screen------------->
<div data-role="page" id="Home" >
<div data-role="header" data-theme="b" data-position="fixed" data-tap-toggle="false" >
<h1 class="ui-title" id="hdr" style="text-align:left;margin-left: 100px;">My Cases</h1>
<div class="ui-btn-right" id="headerButtons" data-role="controlgroup" data-type="horizontal">
Setting
Add
Edit
</div>
</div>
<div data-role="content">
<ul data-role="listview" data-inset="true" id="folderData" >
</ul>
<!-- Case Information Pop up-------------------------->
<div data-role="popup" id="CaseInformationScreen" data-close-btn="none" style="max-width:600px !important; width: 600px !important" data-overlay-theme="a" data-dismissible="false">
<div data-role="header" data-theme="b" >
Cancel
<h1>Case Information</h1>
Add
</div>
<div data-role="content">
<div><img src="img/Documents.png"/></div>
<div data-role="fieldcontain">
<label for="text-12" style="text-align:top;margin-left: 0px;">Case Name:</label>
<input name="text-12" id="caseNameValue" value="" type="text">
</div>
<div data-role="fieldcontain">
<label for="text-12" style="text-align:left;margin-left: 0px;">Case Date:</label>
<input name="text-12" id="caseDate" value="" type="text">
</div>
<div data-role="fieldcontain">
<label for="textarea-12">Textarea:</label>
<textarea cols="40" rows="8" name="textarea-12" id="caseTextArea"></textarea>
</div>
</div>
</div>
<!-- Case Information Pop up End-------------------------->
<!-- User setting Pop up-------------------------->
<div data-role="popup" id="UserSettingScreen" data-close-btn="none" style="max-width:300px !important; width: 300px !important" data-overlay-theme="a" data-dismissible="false">
<div data-role="header" data-theme="b" >
Cancel
<h1>User Settings</h1>
Ok
</div>
<div data-role="content">
<div><img src="img/Documents.png"/></div>
<div data-role="fieldcontain">
<label for="text-12" style="text-align:top;margin-left: 0px;">IP Address:</label>
<input name="text-12" id="text-12" value="" type="text"/>
</div>
<div data-role="fieldcontain">
<label for="text-12" style="text-align:left;margin-left: 0px;">Display Font:</label>
<select name="select-choice-1" id="select-choice-1">
<option value="standard">A</option>
<option value="rush">B</option>
</select>
</div>
</div>
</div>
<!-- User setting Pop up End-------------------------->
</div>
<script>
$(document).on('pagebeforeshow', '#Home', function() {
});
</script>
</div>
<!-- Document Information Pop up-------------------------->
<div data-role="page" >
<div data-role="header" data-theme="b" data-position="fixed">
Cancel
<h1>Document Information</h1>
Ok
</div>
<div data-role="fieldcontain">
<label for="text-12" style="text-align:top;margin-left: 0px;">Name:</label>
<input name="text-12" id="text-12" value="" type="text">
</div>
<div data-role="fieldcontain">
<label for="text-12" style="text-align:left;margin-left: 0px;">Date:</label>
<input name="text-12" id="text-12" value="" type="text">
</div>
<div data-role="fieldcontain">
<label for="textarea-12">Notes:</label>
<textarea cols="40" rows="8" name="textarea-12" id="textarea-12"></textarea>
</div>
</div>
<!-- Document Information Pop up End-------------------------->
<!-----------Document screen------------------->
<div data-role="page" id="DocumentScreen" >
<div data-role="header" data-theme="b" data-position="fixed" data-tap-toggle="false" >
<a href="#Home" data-role="button" data-inline="true" data-theme="b" style="text-align:left;margin-left: 20px; margin-bottom: 10px;" >Back</a>
<h1 class="ui-title" id="hdr" style="text-align:left;margin-left: 100px;">My Documents</h1>
<div class="ui-btn-right" id="addbuttons" data-role="controlgroup" data-type="horizontal">
<div><img src="img/Connect-Realtime.png" id="realTimeImaage"/></div>
</div>
</div>
<div data-role="content">
<ul data-role="listview" data-inset="true" id="folderInside_Data" >
</ul>
</div>
<script>
$(document).on('pagebeforeshow', '#DocumentScreen', function() {
console.log("init");
loadFolderContent();
});
function loadFolderContent() {
for (i = 0; i < 40; i++) {
$('#folderInside_Data').append(
'<li class="rowID" id="' + i + '">' + '' + '<img src="img/Blue-Folder.png">' + '<h2>Broken Bells</h2>' + '<p>Broken Bells</p>' + '<span class="ui-li-count">' + i + '</span>' + '</li>'
);
}
$('#folderInside_Data').listview('refresh');
}
$(document).on('click', '.rowID', function() {
$.mobile.changePage($("#realTimeScreen"), {
transition: "pop",
reverse: false,
changeHash: false
});
console.log(this.id)
});</script>
</div>
<!-----------Document screen End------------------->
<!-----------------------Real Time screen----------------------------->
<div data-role="page" id="realTimeScreen" >
<div data-role="header" data-theme="b" data-position="fixed" data-tap-toggle="false">
Back
<h1 class="ui-title" id="" style="text-align:left;margin-left: 100px;">Document name</h1>
<div class="ui-btn-right" id="addbuttons" data-role="controlgroup" data-type="horizontal">
<a><img src="img/Follow-Realtime.png" id=""/></a>
<a><img src="img/Stop-Realtime.png" id=""/></a>
<a><img src="img/Email-Document.png" id=""/></a>
<a><img src="img/Connect-Realtime.png" id=""/></a>
<a><img src="img/Manage-Case-Folders.png" id=""/></a>
<a><img src="img/Export-Realtime.png" id=""/></a>
</div>
</div>
<div data-role="content" data-theme="d">
<div id="realTimeContents"></div>
</div>
<script>
<!-----------------------add data Time screen----------------------------->
for (i = 0; i < 400; i++) {
$('#realTimeContents').append(
'<span style="margin-left:5%;">' + 12.01 + '</span><span style="margin-left: 10%;">' + 'A' + '</span><span style="margin-left: 20%;">' + 'I was deputy canine devision' + '</span>' + '<br>'+ '<br>'+ '<br>'
);
}
</script>
</div>
</body>
<script>
<!--<-------------------Pop Up Functionality----------------------------------------->-->
$(document).on('popupafteropen', '[data-role="popup"]', function(event, ui) {
$('body').css('overflow', 'hidden');
}).on('popupafterclose', '[data-role="popup"]', function(event, ui) {
$('body').css('overflow', 'auto');
});
<!--<-------------------Pop Up Functionality End----------------------------------------->-->
<!--<-------------------Ready Functionality----------------------------------------->-->
$(document).ready(function() {
$.mobile.loading('hide');
onDeviceReady();
});
<!--<-------------------Ready Functionality End----------------------------------------->-->
document.addEventListener("deviceready", onDeviceReady, false);
var db = "";
//will create database Dummy_DB or open it
//function will be called when device ready
function onDeviceReady(){
db = window.openDatabase("Casepad", "1.0", "Casepad", 200000);
if(window.localStorage.getItem("isAddSomeData")=="yes"){
alert("Yes");
db.transaction(queryDB,errorCB);
}
// db.transaction(populateDB, errorCB, successCB);
}
function insertData(){
db.transaction(populateDB, errorCB, successCB);
}
//create table and insert some record
function populateDB(tx) {
tx.executeSql('CREATE TABLE IF NOT EXISTS CaseTable (id INTEGER PRIMARY KEY AUTOINCREMENT, CaseName TEXT NOT NULL,CaseDate INTEGER ,TextArea TEXT NOT NULL)');
tx.executeSql('INSERT INTO CaseTable(CaseName,CaseDate,TextArea) VALUES ("'+$('#caseNameValue').val()+'", "'+$('#caseDate').val()+'","'+$('#caseTextArea').val()+'")');
}
//function will be called when an error occurred
function errorCB(err) {
alert("Error processing SQL: "+err.code);
}
//function will be called when process succeed
function successCB() {
console.log("success!");
db.transaction(queryDB,errorCB);
}
//select all from SoccerPlayer
function queryDB(tx){
tx.executeSql('SELECT * FROM CaseTable',[],querySuccess,errorCB);
}
function querySuccess(tx,result){
var len = result.rows.length;
$('#folderData').empty();
for (var i=0; i<len; i++){
$('#folderData').append(
'<li class="caseRowClick" id="' + i + '">' + '' + '<img src="img/Blue-Folder.png">' + '<h2>'+result.rows.item(i).CaseName+'</h2>' + '<p>'+result.rows.item(i).CaseDate+'</p>' + '<p>'+result.rows.item(i).TextArea+'</p>'+'<span class="ui-li-count">'+ i+'</span>' + '</li>'
);
}
$('#folderData').listview('refresh');
}
</script>
</html>
<----------------------------------------------------------------------------------->
index.js
/**
* QUnit v1.9.0 - A JavaScript Unit Testing Framework
*
* http://docs.jquery.com/QUnit
*
* Copyright (c) 2012 John Resig, Jörn Zaefferer
* Dual licensed under the MIT (MIT-LICENSE.txt)
* or GPL (GPL-LICENSE.txt) licenses.
*/
$(document).bind('pagecreate', function(e) {
if (e.target.id == 'Home') {
$("#headerButtons").on("click", "a", function() {
if ($(this).attr("id") == "Add") {
$('#caseNameValue').val('');
$('#caseDate').val('');
$('#caseTextArea').val('');
} else if ($(this).attr("id") == "Setting") {
} else if ($(this).attr("id") == "Edit") {
}
});
}
$(document).on('click', '.caseRowClick', function() {
$.mobile.changePage($("#DocumentScreen"), {
transition: "slide",
reverse: false,
changeHash: false
});
console.log(this.id)
});
$("#AddButton").click(function() {
var isvalid = validationField();
if (isvalid) {
insertData();
window.localStorage.setItem("isAddSomeData", "yes");
$.mobile.changePage($("#Home"), {
transition: "slide",
reverse: false,
changeHash: false
});
}
});
$("#Cancel").click(function() {
$('.ui-dialog').dialog('close')
$.mobile.changePage($("#Home"), {
transition: "pop",
reverse: false,
changeHash: false
});
});
$("#CancelSettingButton").click(function() {
$.mobile.changePage($("#Home"), {
transition: "slide",
reverse: false,
changeHash: false
});
});
});
function validationField() {
if ($('#caseNameValue').val() == '') {
alert("Please Enter the Case Name");
return false;
} else if ($('#caseDate').val() == '') {
alert("Please Enter the Case Date");
return false;
} else if ($('#caseTextArea').val() == '') {
alert("Please Enter the Case Text Area");
return false;
}
return true;
}

You don't have to have different js files for different pages. If you are using jquery mobile and you have one html then the different are divs with data-role="page" attribute.
If you read the documentation of jquery mobile it says what to do for this occusion.
Check here for the structure of the pages and check here for the events on the pages. Pay special attention on the pageinit, pagecreate, pageshow events. Those are the fundamental ones.

Centering the text in the input field in jQueryMobile on iPhone

So, if you take a look at the jsfiddle (I posted the code below for consistency) you will see that the input text is centered. However, if I visit the jsfiddle (and on my testing site) on my iPhone (iOS5) the text is just left-aligned. So, am wondering do you guys maybe know is this a know issue (googled - seems not) and do you know of a workaround.
css:
.centerText{
text-align: center;
}​
js:
$(document).ready(function(){
$( "#popupLogin" ).popup( "open" );
});​
html:
<!DOCTYPE html>
<html>
<head>
<title>test</title>
</head>
<body>
<section id="home" data-role="page">
<header data-role="header">
<h1>test page</h1>
</header>
<div data-role="popup" id="popupLogin" data-theme="a" class="ui-corner-all">
<h3 class="centerText">Register free!</h3>
<div class="popup">
<form>
<input type="email" name="email" id="email" class="centerText" placeholder="email" data-theme="a"/>
<button type="submit" data-theme="b">Sign me up</button>
<p class="centerText">
text1<br/>
text2<br/>
etc...<br/>
</p>
</form>
</div>
</div>
</section>
</body>
</html>

Here some tinkering from your jsFiddle: http://jsfiddle.net/Twisty/jb8Jx/2/ Just shows you some ways to try and move the placeholder about.
HTML
<!DOCTYPE html>
<html>
<head>
<title>test</title>
</head>
<body>
<section id="home" data-role="page">
<header data-role="header">
<h1>test page</h1>
</header>
<div data-role="content">
<label>Left Align</label><input type="text" placeholder="email" class="leftText">
<label>Right Align</label><input type="text" placeholder="email" class="rightText">
<label>Center Text</label><input type="text" placeholder="email" class="centerText">
<label>Pad Left</label><input type="text" placeholder="email" class="leftPadText">
</div>
<div data-role="popup" id="popupLogin" data-theme="a" class="ui-corner-all">
<h3 class="centerText">Register free!</h3>
<div class="popup">
<form>
<input type="email" name="email" id="email" class="centerText" placeholder="email" data-theme="a" style="text-align: center;"/>
<button type="submit" data-theme="b">Sign me up</button>
<p class="centerText">
text1<br/>
text2<br/>
etc...<br/>
</p>
</form>
</div>
</div>
</section>
</body>
</html>
CSS
input.centerText{
text-align: center;
}
input.leftText {
text-align: left;
}
input.rightText {
text-align: right;
}
input.leftPadText {
padding-left: 220px;
}

Resources