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.
Related
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.
I have a login form in my phone app and in that I need to initially place my form elements in center of the screen and later when some one tries to enter inputs to login name or password the input block get shifted upwards so that it does not get hidden by the keypad. Though my code works fine in browser, in phonegap I get ignore this event. Please guide
<html>
<head>
<title>daDrive - Login</title>
<script type="text/javascript" charset="utf-8" src="../cordova-2.5.0.js"></script>
<script src="../js/jquery.js"></script>
<script src="../js/jquery-1.9.1.js"></script>
<script src="../js/jquery-ui-1.10.3.js"></script>
<script src="../js/jquery.mobile-1.3.1.min.js"></script>
<script src="../js/code/util.js"></script>
<script src="../js/code/login.js"></script>
<script src="../js/code/register.js"></script>
<script src="../js/code/account.js"></script>
<script src="../js/code/home.js"></script>
<script src="../js/code/constants.js"></script>
<link rel="stylesheet" href="../css/common.css" />
<link rel="stylesheet" href="../css/jquery.mobile.theme-1.2.0.min.css" />
<link rel="stylesheet" href="../css/jqm-docs.css"/>
<script type="text/javascript">
$(document).ready(function(){
$("input").focus(function(){
if(flag==0){
flag=1;
$("#loginPass_txtboxes").animate({"margin-top": "-=30%"}, "slow");
}
});
document.addEventListener('click', function(e) {
e = e || window.event;
var target = e.target || e.srcElement;
if(target.nodeName.toLowerCase()!="input" && flag==1){
flag=0;
$("#loginPass_txtboxes").animate({"margin-top": "+=30%"}, "slow");
}
});
});
</script>
</head>
<body>
<div data-role="page" id="page_id">
<div id="loginPageLogo" style="margin-top:3%;">
<center><img src="../images/logo_dadrive.png"/></center>
</div>
<div data-role="content" id="main_page" style="padding:0 !important;">
<div id="login_middle_content">
<div id="loginPass_txtboxes" style="width: 60%; margin-left: 20%; margin-top:35%" onblur="shiftDown()">
<div data-role="fieldcontain" class="ui-hide-label" >
<label for="LoginId">Login ID:</label>
<input type="text" name="LoginId" id="LoginId" value="" placeholder="Login Id" data-mini="true"/>
</div>
<div data-role="fieldcontain" class="ui-hide-label">
<label for="password">Password:</label>
<input type="password" name="password" id="password" value="" placeholder="Password" data-mini="true"/>
</div>
</div>
<div align="center">
Login
</div>
</div><!--middle-->
</div>
</div><!--page -->
</body>
See the answer to this question which also provides some details for handy events you might like.
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'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>
I want to make a native Android application for a website.
The first problem is how to login in a website using an Android native app, (without any change on the existent webservice site), the Android app should remain connected until a click on a logout button. I have to ask about this matter and some people suggested Json.
I have downloaded JSON and GSON library and I tried to see some tutorial for login in this website with Android app with no success.
Now the access page of the website has this code
<!DOCTYPE html>
<html lang="it" dir="ltr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link rel="shortcut icon" href="templates/images/favicon.ico" />
<link rel='stylesheet' href='templates/css/base.css?1330075048' type='text/css' />
<script type="text/javascript" src="js/jquery-1.6.1.min.js"></script>
<script type="text/javascript" src="js/srte.js"></script>
<script type='text/javascript' src='js/jquery.form.js'></script>
<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-000000000-1']);
_gaq.push(['_setDomainName', 'domainname.it']);
_gaq.push(['_trackPageview']);
</script>
<title>Nomes - Login</title>
</head>
<body class='login' style='background: #fff;'>
<div id="headwrapper" style='height:80px;'>
<div id="head">
<div class="logo" dir="ltr"><a href='http://www.domainname.it'><img src='templates/images/image.jpg'/></a></div>
<div class='banner'><img src='templates/images/banner-head.jpg'/></div>
</div>
</div>
<div id="theadwrapper">
<div id="tabhead">
</div>
</div>
<div id='background_wrapper'>
<div id="wrapper">
<div id="messages"></div>
<div><h5>Email</h5><input id='email' type='text' name='email' /></div>
<div><h5>Password</h5><input id='password' type='password' name='password' /></div>
</div>
<div class='rememberme'><input type='checkbox' name='remember' id='remember_me'>Ricordami</div>
<div class='submit'>
<button type='submit' name='post' class='medium green'>Accedi</button><br/>
<p>o <a href='register.php'>Iscriviti</a></p>
</div>
</form>
<div id='reset_pass'>Hai dimenticato la password? Clicca <a href='resetpwd.php'>qui</a></div>
</div>
<div class='advert'>
<br/><br/><img src='templates/images/sfumatura-orizzontale.jpg' />
<div class='circles'></div>
</div>
<script>
$(document).ready(function(){
$('#login_form').submit(function(e){
e.preventDefault();
if ( ($('#login_form #email').val() == "")
|| ($('#login_form #password').val() == "") ) return;
$('#login_form').attr("disabled", "disabled").css({opacity:0.5});
$(this).ajaxSubmit({
dataType: "json",
success: function(data) {
if (data.isError) {
Bore.error(data.errorMessage);
$('#login_form').removeAttr("disabled").css({opacity:1});
}
else {
window.location.replace(data.data.defaultPage);
}
},
error: function() {
$('#login_form').removeAttr("disabled").css({opacity:1});
console.log('error');
}
});
});
});
</script>
<div class='circle'></div>
</div><!-- login_content -->
<div style='clear:both; padding: 10px;'></div>
</div><!-- wrapper -->
</div> <!-- bg_rapper -->
You should access the server interface with the parameters that your server accepts.
Access the site parsing the PHP and using the nested function in the PHP code, is a really bad idea.