How to create div with id=test with 100% height?
<div data-role="page" id="device1">
<div data-role="header">
<h1>Title</h1>
</div><!-- /header -->
<div data-role="content">
<div data-role="fieldcontain">
<input type="range" name="slider1" id="slider1" value="0" min="0" max="255" />
</div>
<div id=test height=100%>
</div>
</div><!-- /content -->
<div data-role="footer" data-position="fixed">
</div><!-- /footer -->
</div><!-- /page -->
OK, here is what I have for you. Keep in mind though, if the content of the page is tall at all this might not be very usable. The swipe area is everything below the content. So as the content area gets bigger the swipe area gets smaller.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jQuery Swipe</title>
<link href="jquery-mobile/jquery.mobile-1.0b3.min.css" rel="stylesheet" type="text/css"/>
<script src="jquery-mobile/jquery.min.js" type="text/javascript"></script>
<script src="jquery-mobile/jquery.mobile-1.0b3.min.js" type="text/javascript"></script>
<script src="phonegap.js" type="text/javascript"></script>
<script>
$(document).ready(function() {
// Set the initial window (assuming it will always be #1
window.now = 1;
//get an Array of all of the pages and count
windowMax = $('div[data-role="page"]').length;
$('.swipeArea').bind('swipeleft', turnPage);
$('.swipeArea').bind('swiperight', turnPageBack);
});
// Named handlers for binding page turn controls
function turnPage(){
// Check to see if we are already at the highest numbers page
if (window.now < windowMax) {
window.now++
$.mobile.changePage("#device"+window.now, "slide", false, true);
}
}
function turnPageBack(){
// Check to see if we are already at the lowest numbered page
if (window.now != 1) {
window.now--;
$.mobile.changePage("#device"+window.now, "slide", true, true);
}
}
</script>
<style>
body, div[data-role="page"], div[data-role="content"], .swipeArea {
height: 100%;
width: 100%;
}
</style>
</head>
<body>
<div data-role="page" id="device1"">
<div data-role="header">
<h1>Page One</h1>
</div>
<div data-role="content">
Content
<div class=swipeArea></div>
</div>
<div data-role="footer" data-position="fixed">
<h4>Page Footer</h4>
</div>
</div>
<div data-role="page" id="device2" style="height: 100%">
<div data-role="header">
<h1>Content 2</h1>
</div>
<div data-role="content" style="height: 100%">
Content
<div data-role="fieldcontain">
<label for="slider">Input slider:</label>
<input type="range" name="slider" id="slider" value="0" min="0" max="100" />
</div>
<div class=swipeArea></div>
</div>
<div data-role="footer" data-position="fixed">
<h4>Page Footer</h4>
</div>
</div>
<div data-role="page" id="device3" style="height: 100%">
<div data-role="header">
<h1>Content 3</h1>
</div>
<div data-role="content" style="height: 100%">
Content
<div class=swipeArea></div>
</div>
<div data-role="footer" data-position="fixed">
<h4>Page Footer</h4>
</div>
</div>
<div data-role="page" id="device4" style="height: 100%">
<div data-role="header">
<h1>Content 4</h1>
</div>
<div data-role="content" style="height: 100%">
Content
<div class=swipeArea></div>
</div>
<div data-role="footer" data-position="fixed">
<h4>Page Footer</h4>
</div>
</div>
</body>
</html>
Related
I am able to implement panel .But i need my pages should display with panel.Actually when i click panel button's then it hide panel .show page on whole screen .But i need to show page with panel.
Here is my code.
http://jsfiddle.net/ravi1989/TXRjk/2/
Jump to second page
Jump to third page
First Page
Next
Open Pannel
<div data-role="page" id="second">
<div data-role="panel" id="mypanel">
Jump to first page
Jump to third page
</div>
<div data-theme="a" data-role="header">
<h3>
Second Page
</h3>
Back
</div>
<div data-role="content">
<a data-role="button" id="open-panel">Open Pannel</a>
</div>
<div data-theme="a" data-role="footer" data-position="fixed">
</div>
</div>
<div data-role="page" id="third">
<div data-role="panel" id="mypanel">
Jump to first page
Jump to second page
</div>
<div data-theme="a" data-role="header">
<h3>
Third Page
</h3>
Back
</div>
<div data-role="content">
<a data-role="button" id="open-panel">Open Pannel</a>
</div>
<div data-theme="a" data-role="footer" data-position="fixed">
</div>
</div>
I think it should be what you're wanting:
<div data-role="page" id="index">
<div data-role="panel" id="mypanel">
Jump to index page
Jump to second page
Jump to third page
</div>
<div data-theme="a" data-role="header">
<h3 id="header-page">
First Page
</h3>
</div>
<div data-role="content" id="content-page">
<a data-role="button" href="#mypanel">Open Pannel</a>
</div>
<div data-theme="a" data-role="footer" data-position="fixed" id="footer-page">
.
</div>
</div>
<div class="soHide" id="index">
<div data-theme="a" data-role="header">
<h3 id="header-index">
First Page
</h3>
</div>
<div data-role="content" id="content-index">
<a data-role="button" href="#mypanel">Open Pannel</a>
</div>
<div data-theme="a" data-role="footer" data-position="fixed" id="footer-index">
.
</div>
</div>
<div class="soHide" id="second">
<div data-theme="a" data-role="header">
<h3 id="header-second">
Second Page
</h3>
</div>
<div data-role="content" id="content-second">
<p>this is a second page</p>
<a data-role="button" href="#mypanel">Open Pannel again</a>
</div>
<div data-theme="a" data-role="footer" data-position="fixed" id="footer-second">
footer second page
</div>
</div>
<div class="soHide" id="third">
<div data-theme="a" data-role="header">
<h3 id="header-third">Third Page</h3>
</div>
<div data-role="content" id="content-third">
<a data-role="button" id="open-panel">Open Pannel one more time</a>
<p>it's third!</p>
</div>
<div data-theme="a" data-role="footer" data-position="fixed" id="footer-third">
it's some third footer page
</div>
</div>
and this javascript:
$(document).on('click', '.btnPages', function(){
var page = $(this).attr('data-idpage');
var header = $("#header-"+page).html();
var content = $("#content-"+page).html();
var footer = $("#footer-"+page).html();
// apply
$("#header-page").html(header).trigger('create');
$("#content-page").html(content).trigger('create');
$("#footer-page").html(footer).trigger('create');
});
and this css:
.ui-panel-animate {
transition: transform 1350ms ease 0s !important;
}
.soHide { display: none; }
and this functional example http://jsfiddle.net/wgbn/Hxy37/
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 creating a collapsible set dynamically. Like below
div = '<div data-role="collapsible" data-inset="false" data-iconpos="right" data-collapsible="true" data-collapsed-icon="arrow-r" data-expanded-icon="arrow-d"><h3>'+
row1["name"]+'<span class="ui-li-count ui-btn-up-c ui-btn-corner-all" data-iconpos="right">'+count+'</span></h3></div>';
Now i need to add a button to the each collapsible set and upon clicking on the button i need to get the collapsible element content but collapsible list should not expand.
How can i do that?
Thanks:)
Example
Working example: http://jsfiddle.net/Gajotres/z3hsb/
Description
What you need to understand here is how to use:
e.stopPropagation();
e.stopImmediatePropagation();
Your current problem is that click event is propagating through button and hitting collapsible, which in turn opens/closes it. It can be prevented with if functions stopPropagation() and stopImmediatePropagation() are used.
Code
HTML:
<!DOCTYPE html>
<html>
<head>
<title>jQM Complex Demo</title>
<meta name="viewport" content="width=device-width"/>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
<script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
</head>
<body>
<div data-role="page" id="index">
<div data-theme="a" data-role="header">
<h3>
First Page
</h3>
Next
</div>
<div data-role="content">
<div id="List" data-role="collapsible-set" data-theme="b" data-content-theme="d">
<div id='ListItem' data-role='collapsible' data-content-theme='b' data-collapsed='true'>
<h3><p>Title</p>
<div id="button-set">
<input type='button' data-theme='b' value='Settings' data-mini='true' data-inline='true' data-icon='gear' data-icon-pos='top' id="show-content"/>
</div>
</h3>
<p>CONTENT</p>
</div>
</div>
</div>
<div data-theme="a" data-role="footer" data-position="fixed">
</div>
</div>
</body>
</html>
Javascript:
$(document).on('pagebeforeshow', '#index', function(){
$('#show-content').on('click', function(e) {
alert($('#ListItem').find('h3 p').text());
e.stopPropagation();
e.stopImmediatePropagation();
});
});
CSS:
#button-set {
float:right;
margin-top: -20px;
}
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>