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
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.
I am using jquery mobile.Actually my problem is the my page is call 3 time when user come switching from different pages .At first time my "Home" call one time.i add some data on data base using (+)button in header .it show in list view. But after clicking to row it show second page .on click the second page row it show third screen.while using back button it show second the again first .But again user press + button now page call three time .? why it call three time i don't know?
here is my code in fiddle..
http://jsfiddle.net/ravi1989/AkX7t/2/
<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:300px !important; width: 300px !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 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"));
$.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>
$(document).ready(function() {
$.mobile.loading('hide');
onDeviceReady();
});
$(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"));
$.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"));
/*$.mobile.changePage($("#Home"), {
transition: "slide",
reverse: false,
changeHash: false
});*/
}
});
$("#Cancel").click(function() {
$.mobile.changePage($("#Home"));
/*$.mobile.changePage($("#Home"), {
transition: "pop",
reverse: false,
changeHash: false
});*/
});
$("#CancelSettingButton").click(function() {
$.mobile.changePage($("#Home"));
/* $.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;
}
/*
* To change this template, choose Tools | Templates
* and open the template in the editor.
*/
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');
}
I hope I understood you correctly, this is a common jQuery Mobile problem with multiple event binding. Basically, depending on page events you are using, when you reopen some page all event bindings like click will be bound again. So you can have more then one click event on an object.
Best solution to handle this problem is, bind click and every other events (except page events, they don't suffer from this problem) ONLY like this:
$(document).off('click', '.caseRowClick').on('click', '.caseRowClick', function() {
// $.mobile.changePage($("#DocumentScreen"));
$.mobile.changePage($("#DocumentScreen"), {
transition: "slide",
reverse: false,
changeHash: false
});
console.log(this.id)
});
In this case each time this click event is going to be bound, jQuery Mobile will first try to remove previous click even (if it exist) and then add a new one.
There are some other solutions to this problem and they can be found in this ARTICLE, to be transparent it is my personal blog. Just search for a chapter called: Prevent multiple event binding/triggering. This problem is described here with much more details + examples.
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;
}
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>