I'm trying to make an app with an login form (index.html) and a mini control panel (panel.html), but when i try to login the app only show the Notificaction and dont redirect to the panel.html page.
This is the code of my index.html
<script type="text/javascript">
function loginTrue() {
Ti.UI.currentWindow.setURL("app://panel.html");
}
function showNotify(title, message) {
var notification = Ti.Notification.createNotification({
'title': title || 'Sin Titulo',
'message': message || 'Sin mensaje',
'timeout': 10
});
notification.show();
}
</script>
<script type="text/javascript">
</script>
<script type="text/python">
import MySQLdb
import os
db = MySQLdb.connect(host="localhost",user="root", passwd="toor", db="db")
cursor = db.cursor()
def login():
username= document.getElementById('usuario').value;
passw= document.getElementById('contrasena').value;
cursor.execute("SELECT * FROM usuarios WHERE userlUsuario='"+username+"' and userContrasena='"+passw+"'" )
res = cursor.fetchone()
if(res==None):
showNotify("Error!", "Datos Invalidos, intente de nuevo.");
else:
showNotify("Acceso!", "Login Correcto!");
loginTrue();
</script>
<!DOCTYPE html>
<head>
<link rel="stylesheet" href="css/style.css" media="all" />
</head>
<body class="login">
<div class="login">
<section id="login">
<h1><strong>Login</strong></h1>
<form method="link">
<input id="usuario" type="text" placeholder="Usuario" />
<input id="contrasena" type="password" placeholder="Contraseña" />
<button class="blue" onclick="login()">Entrar</button>
</form>
</section>
</div>
</body>
</html>
I found it, the problem was with the Login form that redirects the page to it self when someone click on the submit button, i resolve it adding "javascript:void(0);" as action of the form.
<form action="javascript:void(0);">
Related
I try to get a jquery mobile multipage form with local variables running, but I have two problems.
a) the second value is not updated after save, but reloaded in the edit page
b) when I continuously change between view and edit (4 times), the edit-button calls the edit page (see URL), but the page is not shown
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Form test</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" />
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>
<div id="view" data-role="page">
<div id="view-head" data-role="header">
<h1>View</h1>
Edit
</div>
<div id="content" data-role="content">
<h2 id="unit-title">x</h2>
<p id="unit-summary">y</p>
</div>
</div>
<div id="edit" data-role="page">
<div id="edit-head" data-role="header">
View
<h1>Edit</h1>
</div>
<form>
<label for="edit-title" class="ui-hidden-accessible">Unit title</label>
<input type="text" name="edit-title" id="edit-title" data-clear-btn="true" placeholder="Title ...">
<label for="edit-summary" class="ui-hidden-accessible">Unit summary</label>
<textarea name="edit-summary" id="edit-summary" placeholder="Summary ..."></textarea>
<input type="button" name="edit-submit" id="edit-submit" value="Save">
</form>
</div>
<script type="text/javascript">
var unit = { "id":"1" , "title" : "Hello", "summary" : "World" };
$(document).on("pagebeforeshow","#view",function() {
document.getElementById('unit-title').innerHTML = unit.title;
document.getElementById('unit-summary').innerHTML = unit.summary;
});
$(document).on("pagebeforeshow","#edit",function() {
$(document).on('click', '#edit-submit', function() {
unit.title = document.getElementById('edit-title').value;
unit.summary = document.getElementById('edit-summary').innerHTML;
$.mobile.navigate("#view", {});
});
document.getElementById('edit-title').value = unit.title;
document.getElementById('edit-summary').innerHTML = unit.summary;
});
</script>
</body>
</html>
Here is the complete example
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Form test</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" />
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>
<div id="view" data-role="page">
<div id="view-head" data-role="header">
<h1>View</h1>
Edit
</div>
<div id="view-content" data-role="content">
<h2 id="unit-title">x</h2>
<p id="unit-summary">y</p>
</div>
</div>
<div id="edit" data-role="page">
<div id="edit-head" data-role="header">
View
<h1>Edit</h1>
</div>
<form>
<label for="edit-title" class="ui-hidden-accessible">Unit title</label>
<input type="text" name="edit-title" id="edit-title" data-clear-btn="true" placeholder="Title ...">
<label for="edit-summary" class="ui-hidden-accessible">Unit summary</label>
<textarea name="edit-summary" id="edit-summary" placeholder="Summary ..."></textarea>
<input type="button" name="edit-submit" id="edit-submit" value="Save">
</form>
</div>
<script type="text/javascript">
var unit = { "title" : "Hello", "summary" : "World" };
$(document).on("pagebeforeshow","#view",function() {
document.getElementById('unit-title').innerHTML = unit.title;
document.getElementById('unit-summary').innerHTML = unit.summary;
});
$(document).on("pagebeforeshow","#edit",function() {
document.getElementById('edit-title').value = unit.title;
document.getElementById('edit-summary').innerHTML = unit.summary;
});
$(document).on('click', '#edit-submit', function() {
unit.title = document.getElementById('edit-title').value;
unit.summary = document.getElementById('edit-summary').value;
$.mobile.navigate("#view", {});
});
</script>
</body>
</html>
Does Select2 now have a prerequisite requirement for require.js or something as from the 4.0.0-rc.2 version from cdnjs.cloudfare.com I keep getting an error in select2.js on line 4582-
Uncaught ReferenceError: require is not defined.
My code is fairly straightforward:
<!DOCTYPE html>
<html class="no-js" lang="en">
<head>
<meta charset="utf-8">
<title>Test Select2</title>
<link href="/css/normalize.css" rel="stylesheet">
<link media="all" type="text/css" rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/select2/4.0.0-rc.2/css/select2.css">
</head>
<body>
<!-- Main content -->
<section class="content">
<form method="POST" action="http://test.local/test" accept-charset="UTF-8" role="form">
<div class="form-group minimal">
<span class="col-xs-3 control-label minimal"><label for="Test">Test:</label></span>
<div class="input-group col-xs-8 pull-left select2-bootstrap-prepend">
<input type="hidden"
id="test_select2"
class="input-xlarge form-control minimal select2"
data-placeholder="Search ACME"
data-minimumInputLength=3
data-width="copy"
data-containterCssClass="form-control minimal"
data-dropdownCssClass="alert-danger"
data-allowClear="true"
data-delay=250>
</div>
</div>
</section>
<!-- scripts -->
<script src="//code.jquery.com/jquery-2.1.3.min.js"></script>
<script>window.jQuery || document.write('<script src="/js/jquery/2.1.3.min.js"><\/script>')</script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<script>
$(document).ready(function () {
$("#test_select2").select2({
ajax: {
url: "/admin/test",
dataType: 'json',
delay: 250,
data: function (params) {
return {
q: params.term,
page: params.page
};
},
processResults: function (data, page) {
return {
results: data.items
};
},
cache: true
}
});
});
</script>
<//body>
</html>
This is a known issue in Select2 4.0.0-rc.2 that only affects people using Select2 with an <input /> element.
https://github.com/select2/select2/pull/3192
The problem is that the internal require calls were moved to a namespace in 4.0.0-rc.2 and we missed one call.
You can either stick with 4.0.0-rc.1 until Select2 4.0.0 is released (soon) or start converting your pages to use a <select> instead.
The code below tries to implements a button action in jQueryMobile,but it is not working for me. Please let me know where I am wrong.Everything is written in a HTML file.
I am facing some problem in providing my code here. Here is what I am trying.
In standard HTML format, I am writing the below code between script tags
$('#theButton').click(function() {
alert('The Button has been clicked,');
});
And in the body tag ---
<div data-role="page">
<div data-role="content">
<input type="button" id="theButton" name="theButton" value="The Button">
</div>
But the action is not getting called.
EDIT: Please try the code below:
<html>
<head>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
<script language="javascript">
$(function() {
$('#theButton').on('tap click',function(event, ui) {
alert('The Button has been clicked');
});
});
</script>
</head>
<body>
<div data-role="page">
<div data-role="content">
<input type="button" id="theButton" name="theButton" value="The Button">
</div>
</div>
</body>
</html>
I have two pages: index.html and main.html
When i set the main.html page to be the default page of my app, the java script works, but when I set the index.html to be the main one, after the redirect, the javascript on the main.html just stops working.
here is the HTML of the two pages:
index.html
<!DOCTYPE HTML>
<html>
<head>
<script type="text/javascript" charset="utf-8" src="cordova-1.5.0.js"></script>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>
</title>
<link rel="stylesheet" href="jquery.mobile-1.0.1/jquery.mobile-1.0.1.min.css" />
<style>
/* App custom styles */
</style>
<script src="jquery.mobile-1.0.1/jquery.min.js"></script>
<script src="jquery.mobile-1.0.1/jquery.validate.min.js"></script>
<script src="jquery.mobile-1.0.1/jquery.mobile-1.0.1.min.js"></script>
<script>
$.mobile.allowCrossDomainPages = true;
$.mobile.ajaxLinksEnabled = false;
function onLoad(){
document.addEventListener("deviceready", onDeviceReady, true);
}
function onDeviceReady(){
// request the persistent file system
window.requestFileSystem(LocalFileSystem.PERSISTENT, 0, onSuccess, null);
}
function onSuccess(fileSystem) {
fileSystem.root.getFile("kuapodata.xml", null, gotMe, failFile);
}
// se o arquivo não existir
function failFile(error) {
$("#formLogin").show();
}
// se o arquivo existir
function gotMe(fileEntry) {
$.mobile.changePage("main.html", null, false, false);
}
</script>
</head>
<body onload="onLoad();">
<div data-role="page" id="page1">
<div data-theme="a" data-role="header">
<h3>
Header
</h3>
</div>
<div data-role="content" id="formLogin">
<form id="loginFrm">
<div data-role="fieldcontain">
<fieldset data-role="controlgroup">
<label for="textinputEmail">
</label>
<input id="textinputEmail" placeholder="email" value="" type="email" />
</fieldset>
</div>
<div data-role="fieldcontain">
<fieldset data-role="controlgroup">
<label for="textinputPassword">
</label>
<input id="textinputPassword" placeholder="senha" value="" type="password" />
</fieldset>
</div>
<input value="entrar" type="submit" />
</form>
</div>
</div>
<script>
var xml;
function gotFS(fileSystem) {
fileSystem.root.getFile("kuapodata.xml", {create: true, exclusive: false}, gotFileEntry, fail);
}
function gotFileEntry(fileEntry) {
fileEntry.createWriter(gotFileWriter, fail);
}
function gotFileWriter(writer) {
writer.write(xml);
}
function fail(error) {
alert(error.code);
}
// ao fazer o login
$("form").submit(function() {
// chama função que valida usuário
ValidateUser();
return false;
});
// verifica se o usuário existe
function ValidateUser(email, password) {
$.ajax({
type: 'POST',
url: 'http://********/oauth.aspx',
data: "email=" + $("#textinputEmail").val() + "&password=" + $("#textinputPassword").val(),
success: function(data) {
// se o usuário existir
if (data != "false") {
xml = data;
// cria o arquivo xml se ainda não existir
window.requestFileSystem(LocalFileSystem.PERSISTENT, 0, gotFS, fail);
// muda o usuário de página
$.mobile.changePage("main.html");
}
else {
alert("Dados inválidos. Tente novamente.");
}
}
});
}
</script>
</body>
</html>
main.html
<!DOCTYPE HTML>
<html>
<head>
<title>PhoneGap</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" href="jquery.mobile-1.0.1/jquery.mobile-1.0.1.min.css" />
<style>
/* App custom styles */
</style>
<script type="text/javascript" charset="utf-8" src="cordova-1.5.0.js"></script>
<script src="jquery.mobile-1.0.1/jquery.min.js"></script>
<script src="jquery.mobile-1.0.1/jquery.validate.min.js"></script>
<script src="jquery.mobile-1.0.1/jquery.mobile-1.0.1.min.js"></script>
<script>
$(document).ready(function() {
alert("yesss");
});
</script>
</head>
<body>
<div data-role="page" id="page1">
<div data-theme="a" data-role="header">
<h3>
Header
</h3>
</div>
<div data-role="content" id="main">
</div>
</div>
</body>
</html>
jQuery Mobile pulls in remote pages via AJAX. When it does this, it only pulls in the first data-role="page" element it finds. This means that anything outside the data-role="page" element is discarded.
The best work-around is to put all of your app's JS into a custom.js file and include it in the head of every page, this way all the code for your site is always available (to do this you will need to use event delegation).
You can also put the JS for each page inside the data-role="page" element so it is grabbed by jQuery Mobile and not just discarded:
<div data-role="page" id="page1">
<script>
alert('hello');
</script>
<div data-theme="a" data-role="header">
<h3>
Header
</h3>
</div>
<div data-role="content" id="main">
</div>
</div>
I am working on creating a html page with three tabs, each one of which pulls data from three different html pages through jquery ajax. I am passing 2 parameters , method and mode ( to set read only or edit for all the html elements in the page ) while calling the ajax function.
The problem I have is, when i set the parameters with method=somemethod&mode=ro, the first renders the proper method and in readonly mode, whereas the second tab's html is rendered in edit mode. I debugged the page using firebug but couldnot find the actual problem. All the three tab htmls are all the similar, so i have no idea why this is happening. I have attached the code. Kindly help.
Main html/php page.
<?
$method = $_GET['method'];
$mode = $_GET['mode'];
?>
<html>
<head>
<link type="text/css" href="../../css/ui-lightness/jquery-ui-1.8.14.custom.css" rel="Stylesheet" />
<link type="text/css" href="./methodeditor.css" rel="stylesheet" />
<script type="text/javascript" src="../../js/jquery-1.5.1.min.js"></script>
<script type="text/javascript" src="../../js/jquery-ui-1.8.14.custom.min.js"></script>
<script>
function loadtabs() {
$( ".tabs" ).tabs({cache:false});
//$( ".tabs" ).tabs();
method = "<? echo $method; ?>";
mode = "<? echo $mode; ?>";
$.ajax({
type: "GET",
url: "oven.php",
data: "method=" +method+"&mode="+mode,
cache: false,
async: true,
success: function(data){
htdata = data;
$("#oven").html(data);
},
});
$.ajax({
type: "GET",
url: "detectors.php",
data: "method=" +method+"&mode="+mode,
async: true,
cache: false,
success: function(data1){
htdata = data1;
$("#detectors").html(data1);
},
});
$.ajax({
type: "GET",
url: "inlets.php",
data: "method=" +method+"&mode="+mode,
async: true,
cache: false,
success: function(data){
$("#inlets").html(data);
},
});
}
</script>
</head>
<body>
<form id="editor" action="method.php" method="POST" >
<div class="editor">
<div class="tabs">
<ul>
<li>Oven</li>
<li>Detectors</li>
<li>Inlets</li>
</ul>
<div id="oven" ></div>
<div id="detectors" ></div>
<div id="inlets"> </div>
</div>
<script>
loadtabs();
</script>
</form>
</div>
</body>
</html>
tab1 php
<?
$method = $_GET['method'];
$mode = $_GET['mode'];
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Oven</title>
<link type="text/css" href="../../css/ui-lightness/jquery-ui-1.8.14.custom.css" rel="Stylesheet" />
<script type="text/javascript" src="../../js/jquery-1.5.1.min.js"></script>
<script type="text/javascript" src="../../js/jquery-ui-1.8.14.custom.min.js"></script>
<script>
function togglestatus(val) {
if ( val == "ro" )
{
$('#elements :input').attr('disabled', true );
}
if ( val == "edit")
{
$('#elements :input').removeAttr('disabled');
}
}
function getvalues() {
//file = window.method;
file = "<? echo $method; ?>";
file = "./method/"+file;
var xmlhttp = new XMLHttpRequest();
xmlhttp.open("GET", file, false);
xmlhttp.setRequestHeader('Content-Type', 'text/xml');
xmlhttp.send("");
xmldoc = xmlhttp.responseXML;
etimenode = xmldoc.getElementsByTagName("method")[0].childNodes[1].childNodes[1];
etime = etimenode.textContent;
document.getElementById("etime").value = etime;
maxovtp = xmldoc.getElementsByTagName("method")[0].childNodes[1].childNodes[5].childNodes[0].data;
document.getElementById("maxovtp").value = maxovtp;
}
</script>
</head>
<body>
<div id="elements">
<input type="checkbox" id="oventemp" value="ON" />Oven Temperature<br />
Equilibrium time <input type="text" id="etime" /><br />
Maximum Oven Temperature <input type="text" id="maxovtp" /><br />
<script>
getvalues();
x = "<? echo $mode; ?>";
togglestatus(x);
</script>
</div>
</body>
</html>
tab2 php/html page
<?
$method = $_GET['method'];
$mode = $_GET['mode'];
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Detectors</title>
<link type="text/css" href="../../css/ui-lightness/jquery-ui-1.8.14.custom.css" rel="Stylesheet" />
<script type="text/javascript" src="../../js/jquery-1.5.1.min.js"></script>
<script type="text/javascript" src="../../js/jquery-ui-1.8.14.custom.min.js"></script>
<script>
function togglestatus(val) {
if ( val == "ro" )
{
$('#elements :input').attr('disabled', true );
}
if ( val == "edit")
{
$('#elements :input').removeAttr('disabled');
}
}
function getvalues() {
file = "<? echo $method; ?>";
file = "./method/"+file;
var xmlhttp = new XMLHttpRequest();
xmlhttp.open("GET", file, false);
xmlhttp.setRequestHeader('Content-Type', 'text/xml');
xmlhttp.send("");
xmldoc = xmlhttp.responseXML;
heater = xmldoc.getElementsByTagName("method")[0].childNodes[3].childNodes[1].childNodes[1].childNodes[0].data;
document.getElementById("heater").value = heater;
h2flow = xmldoc.getElementsByTagName("method")[0].childNodes[3].childNodes[1].childNodes[3].childNodes[0].data;
document.getElementById("h2flow").value = h2flow;
}
</script>
</head>
<body>
<div id="elements">
Heater Status <input type="checkbox" id="heaterstat" value="ON" /><br />
Heater <input type="text" id="heater" /><br />
H2 Flow <input type="text" id="h2flow" /><br />
<script>
getvalues();
x = "<? echo $mode; ?>";
togglestatus(x);
</script>
</div>
</body>
</html>
I figured out the solution by chance.
Both the tabs had elements wrapped under the same div called . So when toggle status was called , only the first div with id "element" was getting changed. I gave different names to the divs and solved the problem.