On my phone, my select buttons end up being very small. I'm trying to get them to take up, combined, 100% of the horizontal space, so that each one will take up 33% of the horizontal space.
On my computer, they take up 100% of horizontal space, like I want.
How do I fix this for my mobile?
html:
<div data-role="page" id="Gauntlet">
<div data-role="header">
<div data-role="navbar">
<ul>
<li>Home</li>
</ul>
</div>
</div>
<div data-role="main" class="ui-content">
<div data-role="collapsible-set">
<div data-role="collapsible" data-collapsed="false" data-mini="true">
<h3>Gauntlet Traits:</h3>
<div class="ui-field-contain">
<fieldset data-role="controlgroup" data-type="horizontal" class="custom-fieldset">
<select id="myList1" data-mini="true"></select>
<select id="myList2" data-mini="true"></select>
<select id="myList3" data-mini="true"></select>
</fieldset>
</div>
<button type="button" id="submit" data-mini="true">Submit</button>
</div>
</div>
<div id="table_div"></div>
</div>
<div data-role="footer">
<h2></h2>
</div>
</div>
css:
.custom-fieldset .ui-controlgroup-controls {
width: 100% !important;
}
.custom-fieldset .ui-controlgroup-controls .ui-select {
width: 33.33% !important;
}
As written in view-port meta tag documentation,
Meta tags included directly in an Apps Script HTML file are ignored. Only the following meta tags are allowed.
So, add the meta tag server side:
return HtmlService
.createHtmlOutputFromFile('index')
.addMetaTag('viewport', 'width=device-width, initial-scale=1');
Use jQuery Mobile Grids as described here: http://demos.jquerymobile.com/1.4.5/grids-buttons/
$(document).on("collapsiblecreate", function(e) {
/* Add a nice smooth animation to the collapsible */
$(this)
.on("collapsiblebeforeexpand", function(event) {
$(this).find(".ui-collapsible-content").each(function() {
$(this).stop().slideDown("fast");
});
return true;
})
.on("collapsiblebeforecollapse", function(event) {
$(this).find(".ui-collapsible-content").each(function() {
$(this).stop().slideUp("fast");
});
return true;
})
.find(".ui-collapsible-content").css({
"display": "block"
});
});
/* JQM no frills */
.ui-btn,
.ui-btn:hover,
.ui-btn:focus,
.ui-btn:active,
.ui-btn:visited {
text-shadow: none !important;
}
/* Remove JQM blue halo */
.ui-btn:focus {
-moz-box-shadow: none !important;
-webkit-box-shadow: none !important;
box-shadow: none !important;
}
/* Speed-up some android & iOS devices */
* {
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>My App</title>
<meta name="description" content="My App">
<meta name="HandheldFriendly" content="True">
<meta name="MobileOptimized" content="320">
<meta name="viewport" content="user-scalable=no, initial-scale=1.0001, maximum-scale=1.0001, width=device-width, minimal-ui shrink-to-fit=no">
<meta http-equiv="cleartype" content="on">
<link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" />
<script type="application/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script>
$(document).on("mobileinit", function() {
/* SEO - Remove h1 tag from loader */
$.mobile.loader.prototype.defaultHtml = "<div class='ui-loader'><span class='ui-icon-loading'></span><h6></h6></div>";
/* Add onbefore events to the JQM collapsible */
$.widget("mobile.collapsible", $.mobile.collapsible, {
_handleExpandCollapse: function(isCollapse) {
if(this._trigger("before" + (isCollapse ? "collapse" : "expand"))) {
this._superApply(arguments);
}
}
});
});
</script>
<script type="application/javascript" src="https://ajax.googleapis.com/ajax/libs/jquerymobile/1.4.5/jquery.mobile.min.js"></script>
</head>
<body>
<div id="Gauntlet" data-role="page">
<div data-role="header" class="ui-flipswitch-active ui-overlay-shadow">
<h2>Home</h2>
</div>
<div data-role="content" role="main">
<div data-role="collapsible-set">
<div data-role="collapsible" data-collapsed="false" data-mini="true">
<h3>Gauntlet Traits:</h3>
<div class="ui-grid-b ui-responsive">
<div class="ui-block-a">
<select name="myList1" id="myList1" data-native-menu="false" data-mini="true">
<option value="1">The 1st Option</option>
<option value="2">The 2nd Option</option>
<option value="3">The 3rd Option</option>
<option value="4">The 4th Option</option>
</select>
</div>
<div class="ui-block-b">
<select name="myList2" id="myList2" data-native-menu="false" data-mini="true">
<option value="1">The 1st Option</option>
<option value="2">The 2nd Option</option>
<option value="3">The 3rd Option</option>
<option value="4">The 4th Option</option>
</select>
</div>
<div class="ui-block-c">
<select name="myList3" id="myList3" data-native-menu="false" data-mini="true">
<option value="1">The 1st Option</option>
<option value="2">The 2nd Option</option>
<option value="3">The 3rd Option</option>
<option value="4">The 4th Option</option>
</select>
</div>
</div>
<div class="ui-grid-solo">
<div class="ui-block-a">
<button type="button" id="submit" data-mini="true">Submit</button>
</div>
</div>
</div>
</div>
<div id="table_div"></div>
</div>
</div>
</body>
</html>
Well, it's not exactly an answer to the problem at hand, but it does fix the issue... I can use a navbar to hold my select menus, a la this solution.
Related
I want to make a mobile application on android and I use adobe dreamwever cs6, php and mysql(bundle on XAMPP). I have a problem on my login process.
Can you tell me where is the errors of my code? because my login form only stuck on loader when i press the login button. Please help me.
This is my index.html code on dreamweaver...
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Login Form</title>
<link href="jquery-mobile/jquery.mobile.theme-1.4.4.min.css" rel="stylesheet" type="text/css"/>
<link href="jquery-mobile/jquery.mobile.structure-1.4.4.min.css" rel="stylesheet" type="text/css"/>
<script src="jquery-mobile/jquery-1.11.1.min.js" type="text/javascript"></script>
<script src="jquery-mobile/jquery.mobile-1.4.4.min.js" type="text/javascript"></script>
<script>
$(document).ready(function() {
$("#btnLogin").click(function() {
username=$("#username").val();
password=$("#password").val();
$.ajax({
type:'POST',
url:"login.php",
data:"username="+username+"&password="+password,
success: function(data){
if(data=='true'){
window.location ( "hhome.html");
} else {
$("#add_err").html("<img src='images/icons-png/alert-black.png' />Wrong Username or Password!!");
}
},beforeSend: function()
{
$("#add_err").html("<img src='images/ajax-loader.gif' />")
}
});
return false;
});
});
</script>
</head>
<body>
<div id="page" data-role="page" >
<div data-role="header" data-theme="b" >
<h1></h1>
</div>
<div align="center" data-role="content" data-theme="a" >
<img src="sma-baktiidhata.jpg" width="214" height="178"><br>
<p>Go to the login page</p><br><br>
Login
</div>
<div data-role="footer" data-theme="b" >
<h4></h4>
</div>
</div>
<div data-role="page" id="page2">
<div data-role="header" data-theme="b">
<h1>Login User</h1>
</div>
<div data-role="content">
<form action="login.php" method="post" id="add_err">
<div data-role="fieldcontain">
<input type="text" name="username" id="username" value="" placeholder="Username" />
<input name="password" type="password" id="password" placeholder="Password" value="" maxlength="10" />
</div>
<input name="Submit" type="submit" id="btnLogin" value="Login" />
</form>
</div>
<div data-role="footer" data-theme="b">
<h5>© 2014 </h5>
</div>
</div>
</body>
</html>
I am creating android app using phone-gap / cordova 2.9.0 with jquery mobile 1.4.
I am using slide transition for navigation but when i navigate, page body moves properly as desired but header and footer doesn't slides. They changes after slide animation completed without any effect.
How to resolve this? Please help!!!
this is my first page
Location Preferences
<script src="yorkJs/jquery.blockUI.js"></script>
<link rel="stylesheet" href="yorkCss/jquery.mobile-1.4.0.css" />
<link rel="stylesheet" href="css/yorkchiller.css" />
<script type="text/javascript" src="js/core/iscroll.js"></script>
<script type="text/javascript" src="js/core/iscroll.stickyheaders.js"></script>
<script src="yorkJs/yorkFilters.js"></script>
<script src="yorkJs/yorkSelectionParameters.js"></script>
<script src="yorkJs/YorkChillerMain.js"></script>
<script src="yorkJs/yorkModelSpecification.js"></script>
<link rel="stylesheet" href="css/yorkchiller2.css" />
<script type="text/javascript">
$.mobile.defaultPageTransition = 'slide';
$(document).bind('mobileinit', function () {
$.mobile.activeBtnClass = 'unused';
$.mobile.touchOverflowEnabled=true;
});
</script>
<script type="text/javascript" src="phonegap/cordova.js"></script>
<script type="text/javascript" src="js/biz/EmailComposer.js"></script>
</head>
<body >
<div data-role="page" id="selectionParameters" style="height:100%;">
<div data-role="header" data-position="fixed" data-tap-toggle="false" id="header">
<div style="vertical-align: middle;padding-top:3px; padding-bottom:4px;" align="center">
<img src="images/York_Logo.png" align="middle" height="30px" width="110px" />
</div>
</div>
<div role="main" class="ui-content" >
<div style="height:auto; background-color:white">
<div data-role="tabs" >
<div data-role="navbar" class="custom-navbar" id="chillertypeNavbar">
<ul>
<li class="ui-block-a-custom" id="liAll" value="0">All</li>
<li class="ui-block-b-custom" id="liAir" value="1"><a href="#fragment-2" id="custom-li-2" class="custom-ui-a2 ui-btn-nopadding" >Air Cooled</a></li>
<li class="ui-block-c-custom" id="liWater" value="2"><a href="#fragment-3" id="custom-li-3" class="custom-ui-a3 ui-btn-nopadding" >Water Cooled</a></li>
</ul>
</div>
</div>
<div id="divpreferences" >
<ul data-role="listview" data-inset="true" id="listPreferences">
<li class="ui-corner-all1" style="height:80px !important;" id="capacitylink">
<a href="yorkCapacitySelection.html" data-transition="slide" data-prefetch class="custom-list-a1" style="vertical-align: middle;border-top-width: 0 !important;">
<img src="yorkImages/Capacity.png" class="imgLocationIcon" width="45px" height="auto" style="padding-left:0px; padding-top:4px;">
<span class="ui-li-count ui-li-count-cutom" style="color:#3388CC; font-weight:700; border: none;" id="selPercentage"></span>
<p style="font-size:18px;font-weight:normal;vertical-align: middle;padding-top: 20px;margin-left:-0.7em !important;">Capacity / Tolerance</p>
<p style="font-size:12px;font-weight:lighter;vertical-align:middle; width:200px; margin-left:-1em !important; " id="selCapacity">Select chiller capacity and tolerance</p>
</a>
<div style="width:80%; height:1px; border-bottom: 1px solid #DDDDDD;float:right; "> </div>
<div class="newrow"> </div>
</li>
<li class="ui-corner-all1" id="voltagelink">
<a href="yorkVoltageSelection.html" data-transition="slide" data-prefetch class="custom-list-a2" style="border-top-width: 0 !important;border-bottom-width: 0 !important">
<img src="yorkImages/Line_Frequency.png" class="imgLocationIcon" width="45px" height="auto" style="padding-left:0px; padding-top:4px;">
<p style="font-size:18px;font-weight:normal;vertical-align:middle;padding-top: 20px; margin-left:-0.7em !important;">Line Frequency / Voltage</p>
<p style="font-size:12px;font-weight:lighter;vertical-align:middle; width:250px; margin-left:-1em !important;" id="selVoltage">Select chiller line frequency and voltage</p>
</a>
<div style="width:80%;height:1px; border-bottom: 1px solid #DDDDDD;float:right; "> </div>
<div class="newrow"> </div>
</li>
<li class="ui-corner-all1" data-icon="false">
<a href="" style="border-top-width: 0 !important;border-bottom-width: 0 !important; border:0; background-color:white">
<p style="word-break: normal; white-space: normal; font-size:12px;font-weight:lighter;vertical-align:middle; padding-left:10px; margin-left:-1em !important;"> NOTE: Chillers shown are available only in the United States and Canada </p>
</a>
<div style="width:100%;height:1px; border-bottom: 0px solid #DDDDDD;float:right;"> </div>
<div class="newrow"> </div>
</li>
</ul>
</div>
</div>
<div id="bottomBtn" style="bottom:36px; z-index:1; float: left; position: fixed; padding-left:5px;padding-right: 5px;width: 100%; background-color:white;"> <!-- bottom:36px -->
<!--<input value="Search Fillter" type="button" onclick="yorkChillerList.html" style="width: 100%"> -->
Search Chillers
</div>
</div>
<div data-role="popup" data-history="false" data-dismissible="false" id="about" data-theme="a" class="ui-corner-all" data-overlay-theme="b" style="background-color:#E8E8E8; border-top-right-radius:7px !important; border-top-left-radius:7px !important; border:7px #000000" >
<form>
<div style="font-size:14px;padding:15px;text-align:center; border-radius:7px; width:100%;font-weight:normal; background-color:#E8E8E8;">
Chillers shown are available only in the United States and Canada
</div>
<div style="background-color:#E8E8E8; color:#007BFF !important; border-top:1px solid #c2c2c2; padding:10px; text-align:center; border-bottom-right-radius:7px !important; border-bottom-left-radius:7px !important;">
OK
</div>
</form>
</div>
<div data-role="footer" data-position="fixed" id="footer" data-theme="a" data-tap-toggle="false" style="z-index:1; background-color:white;">
<div data-role="navbar">
<ul>
<li><a href="" id="Homebtn" data-direction="reverse" class="ui-btn-activeown" style="padding-top:2px !important; background-image: linear-gradient(#DBD9DA, #FCFAFB) !important; height:35px !important;">
<img src="images/Home.png" height="25px" width="25px" alt="home">
<label style=" margin-top:-3px; vertical-align:middle; line-height:3px; font-size:10px !important; color:grey; font-weight:bold !important;">HOME</label>
</a></li>
<li><a href="yorkInfoPage.html" class="ui-btn-activeown" data-transition="slide" style="border-left-color: #AEACAD !important; padding-top:2px !important; background-image: linear-gradient(#DBD9DA, #FCFAFB) !important; height:35px !important; ">
<img src="images/info.png" height="23px" width="24px" alt="info">
<label style=" margin-top:-1px; vertical-align:middle; line-height:3px; font-size:10px !important; color:grey; font-weight:bold !important;">INFORMATION</label>
</a></li>
</ul>
</div>
</div>
</div>
<!-- <div class="ui-loader-background"> </div> -->
<div id="domMessage" style="display:none; " data-textonly="true" class='ui-loader ui-corner-all ui-body-b ui-loader-verbose'><h1>Chiller Models are loading</h1></div>
</body>
</html>
While the page is loading in application, it takes a few seconds for framework libraries and CSS to load and i gets a noticeable blip.How to prevent this from happening ?
I had tried on Android virtual device running os version 2.2. I had also tried it on actual device running os version 4.1.
.html file:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>Accordfintech</title>
<meta name="viewport"
content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<meta name="apple-mobile-web-app-capable" content="yes">
<link rel="shortcut icon" href="images/favicon.png">
<link rel="apple-touch-icon" href="images/apple-touch-icon.png">
<link rel="stylesheet" href="css/Accordfintech.css">
<script>window.$ = window.jQuery = WLJQ;</script>
<script type="text/javascript" src="dojox/mobile/deviceTheme.js"></script>
<script type="text/javascript" data-dojo-config="isDebug: false, async: true, parseOnLoad: true, mblHideAddressBar: false" src="dojo/dojo.js"></script>
<style>
.col_M{margin:5px 7px 0 7px;}
</style>
</head>
<body id="content" style="display: none;">
<div data-dojo-type="dojox.mobile.Heading"
data-dojo-props="label:'Accord Fintech'" style="background-color: #10537b; color: black">
<img src="images/Accord.png" align="left" style="margin: 8px 0px 0px 8px">
</div>
<div data-dojo-type="dojox.mobile.ScrollableView" id="view0" data-dojo-props="selected:true">
<div data-dojo-type="dojox.mobile.RoundRectList">
<div data-dojo-type="dojox.mobile.ListItem"
data-dojo-props="label:'About Us',moveTo:'abview',transition:'flip',dir:'-1'" style="background-color: #00bcf2" icon="images/about_us.png"></div>
<div data-dojo-type="dojox.mobile.ListItem"
data-dojo-props="label:'Software',moveTo:'swview',transition:'flip',dir:'-1'" style="background-color: #00bcf2" icon="images/software_icon.png"></div>
<div data-dojo-type="dojox.mobile.ListItem"
data-dojo-props="label:'Database',moveTo:'dbview',transition:'flip',dir:'1'" style="background-color: #00bcf2" icon="images/Database_icon.png"></div>
<div data-dojo-type="dojox.mobile.ListItem"
data-dojo-props="label:'Products',moveTo:'prview',transition:'flip',dir:'1'" style="background-color: #00bcf2" icon="images/products_icon.png"></div>
<div data-dojo-type="dojox.mobile.ListItem"
data-dojo-props="label:'Research',moveTo:'resview',transition:'flip',dir:'-1'" style="background-color: #00bcf2" icon="images/Research_icon.png"></div>
<div data-dojo-type="dojox.mobile.ListItem"
data-dojo-props="label:'Contact Us',moveTo:'cuview',transition:'flip',dir:'-1'" style="background-color: #00bcf2" icon="images/Contact_us.png"></div>
</div>
</div>
<div data-dojo-type="dojox.mobile.ScrollableView" id="abview">
<div data-dojo-type="dojox.mobile.Heading" fixed="top"
data-dojo-props="label:'About Us',back:'Menu',moveTo:'view0',transition:'slide'" style="background-color: #10537b"></div>
<div data-dojo-type="dojox.mobile.ContentPane" class="col_M">
<p><strong>Accord Fintech Pvt. Ltd.</strong> is an ISO 9001:2008 certified company, set up by a team of professionals with competencies in Financial content, software development and database design using a variety of platforms, technologies and financial domain knowledge.</p>
</div>
</div>
<div data-dojo-type="dojox.mobile.ScrollableView" id="swview">
<div data-dojo-type="dojox.mobile.Heading" fixed="top"
data-dojo-props="label:'Software',back:'Menu',moveTo:'view0',transition:'slide'" style="background-color: #10537b"></div>
<div data-dojo-type="dojox.mobile.ContentPane" class="col_M">
<p>We can offer you a typically 'made - to - order' solution, based on your requirements.</p>
<p>We are well versed with website development, intranet and extranet solutions.</p>
</div>
</div>
<div data-dojo-type="dojox.mobile.ScrollableView" id="dbview">
<div data-dojo-type="dojox.mobile.Heading" fixed="top"
data-dojo-props="label:'Database',back:'Menu',moveTo:'view0',transition:'slide'" style="background-color: #10537b"></div>
<div data-dojo-type="dojox.mobile.ContentPane" class="col_M">
<p>The Database of Accord Fintech is the absolute solution for all financial analysis requirements, comprising listed companies traded on India's major stock exchanges.</p>
</div>
</div>
<div data-dojo-type="dojox.mobile.ScrollableView" id="prview">
<div data-dojo-type="dojox.mobile.Heading" fixed="top"
data-dojo-props="label:'Products',back:'Menu',moveTo:'view0',transition:'slide'" style="background-color: #10537b"></div>
<div data-dojo-type="dojox.mobile.ContentPane" class="col_M">
<p><strong>ACCORD</strong> offers a wide range of products and solutions designed specially for enterprises and small businesses across a variety of industries.
</div>
</div>
<div data-dojo-type="dojox.mobile.ScrollableView" id="resview">
<div data-dojo-type="dojox.mobile.Heading" fixed="top"
data-dojo-props="label:'Research',back:'Menu',moveTo:'view0',transition:'slide'" style="background-color: #10537b"></div>
<div data-dojo-type="dojox.mobile.ContentPane" class="col_M">
<p>We are a professionally managed growing research house providing intelligence on every aspect of Indian business, finance and markets.</p>
</div>
</div>
<div data-dojo-type="dojox.mobile.ScrollableView" id="cuview">
<div data-dojo-type="dojox.mobile.Heading" fixed="top"
data-dojo-props="label:'Contact Us',back:'Menu',moveTo:'view0',transition:'slide'" style="background-color: #10537b"></div>
<div data-dojo-type="dojox.mobile.ContentPane" class="col_M">
<p><strong>Customer Support contacts:</strong></p><br/>
</div>
</div>
<script src="js/initOptions.js"></script>
<script src="js/Accordfintech.js"></script>
<script src="js/messages.js"></script>
</body>
</html>
Snapshots:
After splash screen it displays the inner content:
After completely loading the package and css files :
However this happens just for a fraction of seconds but how can i avoid this?
Did you put "visibility: hidden" on your body element? You need to put it (and remove the "display: none" that some worklight versions are adding) and Dojo Mobile will make sure to remove it when it is ready to display the screen.
I'm creating a phonegap android application with few HTML pages inside it and using jquery ajax to transfer data between server.
To move between pages I'm using jquery $.mobile.changePage() method. But after I moved to a page from the index page (initially loaded URL) to a another page, jquery methods in that page are not working.
But, when i load the particular page initially using the java code,
super.loadUrl("file:///android_asset/www/secondpage.html"); it functions well.
I tried with,
$.mobile.changePage( "secondpage.html", { transition: "flip" }); as well,
$.mobile.changePage( "file:///android_asset/www/secondpage.html", { transition: "flip" });
neither worked for me.
code on the first page
$(document).ready(function(){
$('#submitbtn').click(function(){
$vari = $('#signin').serialize();
alert($vari);
$.mobile.loading( "show" );
$.get('http://192.**.**.**/~114178R/v_login/signin.php', $vari,
function(data){
$('#result').html(data);
$.mobile.loading( "hide" );
});
return false;
});
//above part works fine.
//Code to move to the second page. and it also moves.
$('#signup').click(function(){
$.mobile.changePage( "second.html", { transition: "flip" });
});
});
I attached the js code for the second page and declared it in the head of the second.html. but in the second page javascript is not calling. but the but the css files are loading. on the localhost this page and javascript functions well. but in the emulator and the device issue occurs. when i press the submit button (after deploying) it only refreshes the form. But when I load second.html as the index page from java file, it functions well.
super.loadUrl("file:///android_asset/www/login.html"); // second page not works.
super.loadUrl("file:///android_asset/www/second.html"); //second.html works well.
html for second.html
<head>
<!--<meta content="text/html; charset=utf-8" http-equiv="Content-Type">-->
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Register</title>
<script type="text/javascript" src="assets/jquery 1.8.js"></script>
<script type="text/javascript" src="assets/jquerymobile.js"></script>
<script type="text/javascript" src="js/register.js"></script>
<link rel="stylesheet" href="assets/jquerymobile.css"></link>
</head>
<body>
<script type="text/javascript" src="js/register.js"></script>
<div data-role="page" data-theme="b" id="maincont" data-add-back-btn="true">
<div data-role="header">
<h1>Register</h1>
</div><!-- /header -->
<div data-role="content" id="form">
<form id="signup" method="post">
<label for="basic">Your Name:</label>
<input type="text" name="urname" id="urname" data-mini="true" />
<br>
<label for="basic">User Name</label>
<input type="text" name="uname" id="uname" data-mini="true" />
<br>
<br>
<li data-role="fieldcontain">
<label for="select-choice-a" class="select">Choose your position :</label>
<select name="select-choice-a" id="select-choice-a" data-native-menu="false" data-theme="c">
<option>New Team Member</option>
<option value="standard">Software Developer</option>
<option value="rush">Managerial Level</option>
<option value="express">Techlead</option>
<option value="overnight">Branch Manager</option>
</select>
</li>
<label for="basic">Password :</label>
<input type="password" placeholder="A-Z and a-z and 0-9" name="pw_1" id="pwi_1" data-mini="true"/>
<br>
<label for="basic">Enter password again :</label>
<input type="password" placeholder="A-Z and a-z and 0-9" name="pw_2" id="pwi_2" data-mini="true"/>
<br>
<input type="submit" id="submitbtn" value="Register Me" data-corners="true" data-shadow="true" data-iconshadow="true">
<br>
</form>
<div id="result"></div>
</div><!-- /content -->
<br>
<br>
<div data-role="footer">
<h4>Sign in to enjoy Rides!</h4>
</div><!-- /header -->
</div>
</body>
</html>
javascript register.js for second.html
$(document).ready(function() {
$('#submitbtn').click(function() {
alert("clicked");
if(($('#pwi_1').val()!= "") && ($('#pwi_1').val()==$('#pwi_2').val())){
alert("if");
alert($('#pwi_1').val());
$vari = $('#signup').serialize();
alert($vari);
$.mobile.loading( "show" );
$.get('http://xxx.xxx.xxx.xxx/register.php', $vari,
function(data){
$('#result').html(data);
$.mobile.loading( "hide" );
});
return false;
}
else {
alert("else");
alert($('#pwi_2').val());
}
});
});
Maybe you could use window.location.replace(login.html);
And When you use Jquery, be sure to import the script in all your page.
Hope it helps ;)
<script type="text/javascript" src="js/register.js"></script>
Put the above code inside your page.
<div data-role="page" data-theme="b" id="maincont" data-add-back-btn="true">
i.e
<div data-role="page" data-theme="b" id="maincont" data-add-back-btn="true">
<script type="text/javascript" src="js/register.js"></script>
The scripts not in this section are only run on a page refesh.
I'm new to jquery and jquery mobile and and having an issue with custom selects (data-native-menu="false"). When I tap to open one, with just 4 options, sometimes it opens as normal, but closes itself a second later, before I've had a chance to choose an option.
Another issue, which perhaps may be related, is that sometimes when I open a dialog (data-rel='dialog') it will not close when I tap the "X" button it provides.
My code validates as HTML 5 and the only custom config I have done is defaultDialogTransition & defaultPageTransition off.
I have it so each form element has a unique ID, as has each page.
Both issues happen with opera and android browsers, on 2.3 gingerbread.
Thanks, Kevin
<!DOCTYPE html>
<html lang='en'>
<head>
<meta charset='utf-8'>
<meta http-equiv='X-UA-Compatible' content='IE=edge,chrome=1'>
<title>title</title>
<meta name='viewport' content='width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=no;' />
<script src='//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js'></script>
<script src='/js/jquery_mobile_global_defaults.js'></script>
<script src='http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js'></script>
<link rel='stylesheet' href='/design/mobile_style.css'>
<link rel='stylesheet' href='http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css' />
</head>
<body>
<div data-role='page' id='homepage'>
<div class='header'>
<div class='logo'><a href='/' ><img src='/design/logo.png'></a></div>
<div class='login'><a href='/php/mobile_login.php' data-overlay-theme='b' data-transition='none' data-rel='dialog' data-role='button' data-inline='true' data-icon='arrow-r' data-iconpos='right' data-theme='a' data-mini='false'>Login</a></div>
</div>
<div class='mobile_content'>
<form data-ajax='true' method='GET' id='btipdgnkrb_form' action='/php/mobile_search.php'>
<div>
<select data-native-menu='false' onchange='ajaxcreateSubCatSelect("btipdgnkrb");' name='main_catetory_type' id='btipdgnkrb_maincat'>
<option>Career path / role</option>
<option value='CONSTRUCTION'>Construction roles</option>
<option value='DESIGN'>Design roles</option>
<option value='ENERGY'>Energy roles</option>
<option value='GENERIC'>General roles</option>
</select>
</div>
<div id='btipdgnkrb_subcatloaddiv' style='text-align:center;'></div>
<div>
<select data-overlay-theme='b' disabled data-native-menu='false' name='profession_id' id='btipdgnkrb_subcat'><option data-placeholder='true'>
Select role / category</option></select>
</div>
<div><select name='location_id' id='btipdgnkrb_location' data-overlay-theme='b' data-native-menu='false' data-icon='arrow-d'><option data-placeholder='true' value='0'>Location (optional)
</option>
<option></option>
<option value=37>Ireland</option>
<option value=61>Ulster</option>
</select></div>
<label for='btipdgnkrb_keywords' class='ui-hidden-accessible'>Keywords:</label>
<div><input type='text' name='keywords' id='btipdgnkrb_keywords' value='' placeholder='Keywords (optional)'></div>
<div><input type='submit' data-theme='b' data-icon='search' data-iconpos='right' value='Search'></div>
<div><input type='button' onclick='reset_search_form("btipdgnkrb");' data-theme='c' data-iconpos='right' value='Clear form'></div>
</form>
<p> <p>
<script src='/js/main.js'></script>
</div>
<div data-role='footer' data-theme='a' >
<div data-role='navbar' data-iconpos='right'>
<ul>
<li><a data-icon='home' href='/'>Home / Search</a></li>
<li><a data-icon='plus' href='#'>Menu</a></li>
</ul>
</div><!-- /navbar -->
</div>
</div>
</body>
</html>