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.
Related
Hi friends am new to mobile app developing(using jquery mobile and phonegap). In my project i have a task where i need set a date-time picker. i set it using some code but its not working. pls help me how to do it using jquery mobile.Am i need to any plugins or js. pls help me Thanks in advance.
<!DOCTYPE html>
<html>
<head>
<title>Zeus Palace Hotel</title>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" href="//code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" />
<link rel="stylesheet" href="//dev.jtsage.com/cdn/datebox/latest/jquery.mobile.datebox.min.css" />
<link rel="stylesheet" href="css/gi-mobile.css" />
<script type="text/javascript" src="//code.jquery.com/jquery-1.6.4.min.js"></script>
<script type="text/javascript" src="//code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js"></script>
</head>
<body>
<section data-role="page" id="home" data-theme="b">
<header data-role="header" class="header">
<figure class="hotelBanner"></figure>
</header>
<section data-role="content" class="ui-grid-a main cf">
<form id="step1" action ="#">
<label for="checkinDate">Check-in:</label>
<input name="checkinDate" id="checkinDate" type="date" data-role="datebox"
data-options='{"mode": "calbox", "afterToday": true}' />
<label for="checkoutDate">Check-out:</label>
<input name="checkoutDate" id="checkoutDate" type="date" data-role="datebox"
data-options='{"mode": "calbox", "afterToday": true}' />
<input type="submit" id="btnsubmit" value="Next >>" />
</form>
<p>Number of Nights: <span id="numNights"></span></p>
</section>
<footer data-role="footer" class="footer">
</footer>
</section>
<script type="text/javascript" src="//dev.jtsage.com/cdn/datebox/latest/jquery.mobile.datebox.min.js"></script>
<script>window.jQuery.fn.validate || document.write('<script src="js/libs/jquery.mobile.datebox.min.js"><\/script>')</script>
<script type="text/javascript" src="//dev.jtsage.com/cdn/datebox/i8n/jquery.mobile.datebox.i8n.en.js"></script>
<script>window.jQuery.fn.validate || document.write('<script src="js/libs/jquery.mobile.datebox.i8n.en.js"><\/script>')</script>
<script defer src="js/master.js"></script>
</body>
</html>
JS file:
// Main JS //
jQuery.extend(jQuery.mobile.datebox.prototype.options, {
'dateFormat': 'mm/dd/YYYY',
'headerFormat': 'mm/dd/YYYY',
});
$(document).ready(function() {
$('a.ui-btn .ui-icon').removeClass('ui-icon-grid');
$('a.ui-btn .ui-icon').addClass('ui-icon-arrow-d');
function parseDate(elem) {
return elem.data('datebox').theDate;
}
function daydiff(checkinDate, checkoutDate) {
return (checkoutDate-checkinDate)/(1000*60*60*24)
}
$('#checkoutDate, #checkinDate').live('change', function() {
$('#numNights').each(function() {
$(this).text(daydiff(parseDate($('#checkinDate')), parseDate($('#checkoutDate'))));
});
});
});
But Its not working.. tell me any other ideas to do it using jquery mobile
simple datetimepicker for jQuery mobile.
try this solution:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta content="text/html; charset=windows-1255" http-equiv="content-type">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="jquery.ui.datepicker.mobile.css" />
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothnes/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script>
$(function() {
$( "#datepicker" ).datepicker();
});
</script>
</head>
<body>
<div id="page" data-role="page" data-theme="c">
<div id="header" data-role="header">
<h1>Play</h1>
<p>Date: </p>
<label for="date">Select Date Range:</label>
<input type="date" name="date" id="datepicker" value="" />
</body>
</html>
I think you forgot to update your access policy to allow all urls, update your config.xml file with the following code:
<access origin="*" />
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'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>
I have phonegap application at html5, with kendo ui.
My button work fine on browser, but at android device I need to click three times to fire the alert.
This is my code:
<!DOCTYPE html>
<html>
<head>
<title></title>
<script src="js/jquery-1.8.2.js"></script>
<script src="js/kendo.all.min.js"></script>
<link href="styles/kendo.mobile.all.min.css" rel="stylesheet" />
<link href="styles/kendo.common.min.css" rel="stylesheet" />
<link href="styles/kendo.default.min.css" rel="stylesheet" />
</head>
<body>
<div data-role="view" data-title="Login/Sign-up"
id="view-transitions-login" data-transition="overlay:left"
style="background-color: white;">
<input type="button" id="logButton" value="login"
style="width: 100px; height: 60px" />
</div>
<script>
$(document).ready(function() {
$("#logButton").click(function() {
alert(33);
});
});
</script>
<script>
var app = new kendo.mobile.Application(document.body);
</script>
</body>
</html>
Thanks in advance.
I'm found the answer.
I used the latest version of kendo.all.min, and That made the problem.
I changed the file and everything works as it should.