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>
Related
I am trying to make multiple pages in my hybrid app on IBM MobileFirst Platform on eclipse juno using the Dojo toolkit.
In design view: the text in pages other than the homepage does not appear.
after running and deploying all environments, i preview on the browser(chrome) and the tabs are not working
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>MoodApp</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="stylesheet" href="css/main.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>
</head>
<body style="display: none;">
<div data-dojo-type="dojox.mobile.View" id="view0" data-dojo-props="selected:false">
<div data-dojo-type="dojox.mobile.Heading" data-dojo-props="label:'My Mood App'">
</div>
<ul data-dojo-type="dojox.mobile.TabBar" fixed="bottom">
<li data-dojo-type="dojox.mobile.TabBarButton" data-dojo-props="moveTo:loginPage,transition:'slide',icon:'images/done.png'">Log in</li><li
data-dojo-type="dojox.mobile.TabBarButton" data-dojo-props="moveTo:signupPage,icon:'images/comments16.png',transition:'slide'">Sign up</li>
</ul>
<div data-dojo-type="dojox.mobile.View" id="loginPage" data-dojo-props="selected:true">Enter username and password</div>
<div data-dojo-type="dojox.mobile.View" id="signupPage" data-dojo-props="selected:false">sign up now</div>
</div>
<script src="js/initOptions.js"></script>
<script src="js/main.js"></script>
<script src="js/messages.js"></script>
</body>
Eclipse Juno is not a supported version of Eclipse in IBM MobileFirst Platform - upgrade to Eclipse Java EE Kepler or Luna.
In design mode, you will see only the active tab, so per your code you will see only view 0. Swap between the true/false values of data-dojo-props="selected to switch between your pages... but better yet, see the fuller example below.
Your tabs do not work because you did not put the moveTo values in single quotes:
<ul data-dojo-type="dojox.mobile.TabBar">
<li data-dojo-type="dojox.mobile.TabBarButton" data-dojo-props="moveTo:'loginPage',transition:'slide',icon:'images/done.png'">Login</li>
<li data-dojo-type="dojox.mobile.TabBarButton" data-dojo-props="moveTo:'signupPage',icon:'images/comments16.png',transition:'slide'">Signup</li>
</ul>
Fuller example:
<div data-dojo-type="dojox.mobile.View" id="view0" data-dojo-props="selected:false">
<div data-dojo-type="dojox.mobile.Heading" data-dojo-props="label:'My Mood App'">
</div>
<p>
This is view 0.<br/>
This is view 0.<br/>
This is view 0.<br/>
</p>
<ul data-dojo-type="dojox.mobile.TabBar">
<li data-dojo-type="dojox.mobile.TabBarButton" data-dojo-props="moveTo:'loginPage',transition:'slide',icon:'images/done.png'">Login</li>
<li data-dojo-type="dojox.mobile.TabBarButton" data-dojo-props="moveTo:'signupPage',icon:'images/comments16.png',transition:'slide'">Signup</li>
</ul>
</div>
<div data-dojo-type="dojox.mobile.View" id="loginPage" data-dojo-props="selected:false">
<div data-dojo-type="dojox.mobile.Heading" data-dojo-props="label:'My Mood App'">
</div>
Enter username and password
</div>
<div data-dojo-type="dojox.mobile.View" id="signupPage" data-dojo-props="selected:false">
<div data-dojo-type="dojox.mobile.Heading" data-dojo-props="label:'My Mood App'">
</div>
sign up now
</div>
Hi all I have the following code
<script type="text/javascript" src="/js/jquery-2.0.0.min.js"></script>
<script src="/js/jquery.mobile-1.3.1.js" type="text/javascript"></script>
but for some reason in Chrome and on any android it just crashes the page and at the bottom I just get a "Loading" message
does anyone know why?
thanks
Solution
Don't use jQuery 2.0 with jQuery mobile 1.3.1
jQuery Mobile is locked to a certain jQuery version range. Use only jQuery 1.7 up to 1.9.X
And you have several errors in your live example.
CSS should be initialized before js files and your HTML tag was missing. Also DIV containing the page must have data-role="page" attribute.
EDIT :
Your final code should look like this:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1" />
<link rel="stylesheet" type="text/css" href="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.css">
<script type='text/javascript' src='http://code.jquery.com/jquery-1.9.1.min.js'></script>
<script type="text/javascript" src="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js"></script>
<title>Packer Forbes Communications</title>
</head>
<body>
<div id="pageHead" data-role="page">
<div id="logo"><img src="images/packerForbesLogo.jpg" width="226" height="106" alt="Packer Forbes" /></div>
<div id="socMedia"><img src="/images/socIconPM.jpg" width="35" height="40" alt="PMLive" /><img src="/images/socIconIN.jpg" width="35" height="40" alt="LinkedIn" /><img src="/images/socIconTW.jpg" width="35" height="40" alt="Twitter" /><img src="/images/socIconYT.jpg" width="35" height="40" alt="YouTube" /></div>
<div id="mainNav" role="navigation">
Show navigation
Hide navigation
<ul id="nav" class="clearfix">
<li>Home</li>
<li>What We Do
<ul>
<li>Market Access</li>
<li class="navIndent">Case Studies</li>
<li>Public Relations</li>
<li class="navIndent">Case Studies</li>
<li>Medical Education</li>
<li class="navIndent">Case Studies</li>
<li>Digital</li>
<li class="navIndent">Case Studies</li>
</ul>
</li>
<li>About Us
<ul>
<li>Awards</li>
<li>The Team</li>
<li>Life at Packer Forbes</li>
<li>Our Values</li>
</ul>
</li>
<li>Clients</li>
<li>News</li>
<li>Careers
<ul>
<li>Training</li>
<li>Internships</li>
<li>Benefits</li>
<li>Current Vacancies</li>
</ul>
</li>
<li>Contact</li>
<li>Download Centre</li>
</ul>
</div>
<div id="mainBanner"><img src="images/twentyBanner.gif" alt="We Are Twenty!" width="400" height="80" border="0" class="homeBanner" /></div>
</div>
<div id="mainBody">
<div id="contentWrapper">
<p class="brandStrip"> </p>
<div id="mainColumn">
<!--<h1>Who We Are</h1>-->
<h2>What We Do</h2>
<div id="marketAccess"> <img src="images/marketAccess.jpg" width="160" height="160" alt="Market Access" />
<h3>Market Access</h3>
</div>
<div id="communications"> <img src="images/communications.jpg" width="160" height="160" alt="Communications" />
<h3>Public Relations</h3>
</div>
<div id="medicalEducation"> <img src="images/medicalEducation.jpg" width="160" height="160" alt="Medical Education" />
<h3>Medical Education</h3>
</div>
<div id="digital"><img src="images/digital.jpg" width="160" height="160" alt="Digital" />
<h3>Digital</h3>
</div>
<p class="firstParaHome">Packer Forbes is an award-winning independent healthcare communications consultancy, specialising in medical communications. Our integrated approach ensures that our clients benefit from a compelling fusion of bespoke market access, public relations, medical education and digital communications approaches, all built on insight developed from years of experience.</p>
<p class="dividerLong"><span class="dividerLongMore">Find Out More»</span></p>
<p class="mobileindexorgslogos">
<img src="images/logoHCA.jpg" width="102" height="109" alt="HCA" />
<img src="images/logoEMIG.jpg" width="102" height="109" alt="EMIG" />
<img src="images/logoIIP.jpg" width="121" height="109" alt="IIP" />
<img src="images/abpi_new.jpg" width="102" height="109" alt="IIP" />
<div class="mobileclear"></div>
</p>
</div>
<div id="sideColumn"></div>
<p class="brandStrip"> </p>
</div>
</div>
<div id="pageFoot">
<ul>
<li>1.09 Harbour Yard, Chelsea Harbour, London, SW10 0XD</li>
<li>t: +44 (0)20 7036 8550</li>
<li>f: +44 (0)20 7036 8569</li>
<li>e: healthmail#packerforbes.com</li>
<li>cookie policy</li>
</ul>
<p>Registered office: Packer Forbes Communications Ltd, 1.09 Harbour Yard, Chelsea Harbour, SW10 0XD Registered number: 3753460 </p>
</div>
</body>
</html>
If you are using JQM 1.3.1, you can use this 2 script files.
jQuery JavaScript Library v1.9.1 http://view.jquerymobile.com/1.3.1/dist/demos/js/jquery.js
jQuery Mobile 1.3.1 http://view.jquerymobile.com/1.3.1/dist/demos/js/jquery.mobile.min.js
Loading message error
If you want to hide this message, try to use this as soon as on load.
$(document).ready(function() {
$('.ui-loader').hide();
});
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 have been going around and around and around, trying to apply as many different solutions as possible, trying to solve this problem by myself. The fact is that I cannot!
I am developing a very simple app in HTML5 on Adobe PhoneGap. The app is only a list of links that the user should click and access to the respective websites. Problem? The problem is that the websites are opening on the app and not on the browser. I already tryed everything I knew... Set target _blank, applied this solution, this one, this one and this one. I've been googling also, but the results are exactly the same: no solution for my problem.
There must be something that I am doing wrong, and right now I don't think I have the discernment to see what it is! And it is driving me crazy... Here is the code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<!-- Always force latest IE rendering engine (even in intranet) & Chrome Frame
Remove this if you use the .htaccess -->
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<title>Northern Landscape APP</title>
<meta name="description" content="Northern Landscape APP - With this APP you can keep up with the latest news of our group: Features, Group Messages, new magazine issues and more!" />
<meta name="author" content="LFS" />
<meta name="viewport" content="width=device-width; initial-scale=1.0" />
<!-- Replace favicon.ico & apple-touch-icon.png in the root of your domain and delete these references -->
<link rel="shortcut icon" href="/favicon.ico" />
<link rel="apple-touch-icon" href="/apple-touch-icon.png" />
<link rel="stylesheet" href="style.css">
<script type="text/javascript">
$('.link').live('tap', function() {
url = $(this).attr("rel");
loadURL(url);
});
function loadURL(url){
navigator.app.loadUrl(url, { openExternal:true });
return false;
}
</script>
</head>
<body>
<div id="contentor">
<header>
</header>
<nav>
<div id="cabeca">
<img src="imgs/cabecalho.png">
</div>
<br>
<br>
<br>
<div id="botoeswraper">
<div id="linha1">
<div id="b1">
<div id="icone"><img src="imgs/logo_compus.png"></div>
<div id="texto">
<a href="#" class='link' rel='http://www.northernlandscape.org'>Official Website</a> </div>
</div>
</div>
<div id="linha2">
<div id="b2">
<div id="icone"><img src="imgs/rblogo.png"></div>
<div id="texto">
<a href="#" class='link' rel='http://www.redbubble.com/groups/northern-landscape'>Redbubble group</a> </div>
</div>
</div>
<div id="linha3">
<div id="b3">
<div id="icone"><img src="imgs/groupmsg.png"></div>
<div id="texto">
<a href="#" class='link' rel='http://www.redbubble.com/groups/northern-landscape/forums/7330'>Group messages</a> </div>
</div>
</div>
<div id="linha4">
<div id="b4">
<div id="icone"><img src="imgs/issues.png"></div>
<div id="texto">
<a href="#" class='link' rel='http://www.northernlandscape.org/alli.php'>All NL magazine issues</a> </div>
</div>
</div>
<div id="linha5">
<div id="b5">
<div id="icone"><img src="imgs/tweeter.png"></div>
<div id="texto">
<a href="#" class='link' rel='https://twitter.com/NL_host'>Check us on Tweeter</a> </div>
</div>
</div>
</div>
</nav>
<p> </p>
<p> </p>
<footer>
<p>
NL APP version 1.0 - Developed by LFS©
</p>
</footer>
</div>
</body>
</html>
I am most appreciated for any help that I can get...
I have done the changes below and each one works for me.
<!-- Opens in new tab -->
Official Website
<!-- Opens in new window -->
Redbubble group
I want to use this html and make a database connection to add these things. But I don't really know what to use or how to do it. Can you help me?
<html>
<head>
<title>Ingredient</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="themes/receta.min.css" />
<link rel="stylesheet" href="themes/receta.css" />
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.css" />
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.js"></script>
<script src="js/recetas.js"> </script>
</head>
<div>
<h1>RECETA</h1>
<label for="receta">Nombre Receta:</label><br>
<input type="text" name="receta" value="" maxlength="20" /><br>
</div>
<CENTER>
<body>
<label>Instrucciones</label>
<textarea style="width: 300px; height: 150px">
</textarea>
<label>Ingredientes</label>
<ul style="width: 300px; height: 150px">
<ul>
</ul>
<select onchange="selectIngredient(this);">
<option value="Cheese">Cheese</option>
<option value="Olives">Olives</option>
<option value="Pepperoni">Pepperoni</option>
<option value="Milk">Milk</option>
</select>
<li style="width: 300px; height: 150px">
<button>GUARDAR</button>
<li>CONSULTAR</li>
</body>
</center>
</html>
Here is the function of ingredients I use to make the list in the html:
function selectIngredient(select)
{
var $ul = $(select).closest('.ui-select').prev('ul');
console.log($ul[0])
if ($ul.find('input[value=' + $(select).val() + ']').length == 0) {
console.log('s')
$ul.append('<li onclick="$(this).remove();">' +
'<input type="hidden" name="ingredients[]" value="' +
$(select).val() + '" /> ' +
$(select).find('option:selected').text() + '</li>');
}
}
I could put an image but i need more reputation please help.
You don't want to make a direct database connection from your app. If you were able to do so, you would potentially expose your database connection credentials to the entire world. Certainly this is not desirable.
What you need to do is put a web service in place which your app calls. The web service would then make the database interactions.