Login jQueryMobile usando ajax
16/04/2016
0
Pagina Login
<!DOCTYPE html>
<html>
<head>
<title>Login</title>
<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0"/>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" />
<script type="text/javascript" src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
<link rel = "stylesheet" type="text/css" href="CSS/estilo.css"/>
<script src="Scripts/funcional.js"></script>
</head>
<body>
<section data-role="page" id="login_page">
<header data-role="header" data-position="fixed">
<h3>Login</h3>
</header>
<article data-role="content">
<p>Welcome to login page</p>
<form id="form_login">
<div data-role="fieldcontain" class="ui-hide-label">
<label for="textUser">User: </label>
<input type="text" name="textUser" id="textUser" placeholder="Username"/>
</div>
<div data-role="fieldcontain" class="ui-hide-label">
<label for="textPassword">Password: </label>
<input type="password" name="textPassword" id="textPassword" placeholder="Password"/>
</div>
<input type="button" value="Login" id="btnLogin"/>
<a class="ui-btn ui-icon-star ui-btn-icon-left" data-rel="back">Cancel</a>
</form>
</article>
<footer data-role="footer" data-position="fixed">
<h3>@acgdjeny2016.org.cv</h3>
</footer>
</section>
<section data-role="dialog" id="pageError">
<header data-role="header" data-position="fixed">
<h3>Error</h3>
</header>
<article data-role="content">
<h1>Error processing login request</h1>
</article>
<footer data-role="footer" data-position="fixed">
<h3>@acgdjeny2016.org.cv</h3>
</footer>
</section>
</body>
</html>codigo javascript
$(document).ready(function(){
$("#form_login").css({"margin-top":"200px"});
$("btnLogin").click(function(){
var user = $("#textUser").val();
var pass = $("#textPassword").val();
$.post(
"C:/xampp/htdocs/Workspace/Happy/assets/www/log.php",
{user:user, pass:pass},
function(result){
if(result == "success"){
$(document).on("pageshow","#notificacao.html",function(){
alert("Welcome");
});
}else{
$(document).on("pageshow","#pageError",function(){
alert("Error");
});
}
}
);
});
});
Acg
Curtir tópico
+ 1
Responder
Posts
16/04/2016
Acg
Pagina Login
<!DOCTYPE html>
<html>
<head>
<title>Login</title>
<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0"/>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" />
<script type="text/javascript" src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
<link rel = "stylesheet" type="text/css" href="CSS/estilo.css"/>
<script src="Scripts/funcional.js"></script>
</head>
<body>
<section data-role="page" id="login_page">
<header data-role="header" data-position="fixed">
<h3>Login</h3>
</header>
<article data-role="content">
<p>Welcome to login page</p>
<form id="form_login">
<div data-role="fieldcontain" class="ui-hide-label">
<label for="textUser">User: </label>
<input type="text" name="textUser" id="textUser" placeholder="Username"/>
</div>
<div data-role="fieldcontain" class="ui-hide-label">
<label for="textPassword">Password: </label>
<input type="password" name="textPassword" id="textPassword" placeholder="Password"/>
</div>
<input type="button" value="Login" id="btnLogin"/>
<a class="ui-btn ui-icon-star ui-btn-icon-left" data-rel="back">Cancel</a>
</form>
</article>
<footer data-role="footer" data-position="fixed">
<h3>@acgdjeny2016.org.cv</h3>
</footer>
</section>
<section data-role="dialog" id="pageError">
<header data-role="header" data-position="fixed">
<h3>Error</h3>
</header>
<article data-role="content">
<h1>Error processing login request</h1>
</article>
<footer data-role="footer" data-position="fixed">
<h3>@acgdjeny2016.org.cv</h3>
</footer>
</section>
</body>
</html>codigo javascript
$(document).ready(function(){
$("#form_login").css({"margin-top":"200px"});
$("btnLogin").click(function(){
var user = $("#textUser").val();
var pass = $("#textPassword").val();
$.post(
"C:/xampp/htdocs/Workspace/Happy/assets/www/log.php",
{user:user, pass:pass},
function(result){
if(result == "success"){
$(document).on("pageshow","#notificacao.html",function(){
alert("Welcome");
});
}else{
$(document).on("pageshow","#pageError",function(){
alert("Error");
});
}
}
);
});
});
quero fazer o login mas, a acao do botao login nao funciona, alguem poderia me ajudar com isso?
Responder
20/04/2016
Rodrigo Guimarães
Corrija a linha 5:
$("btnLogin").click(function(){
para
$("#btnLogin").click(function(){
o problema q que estava sem hashtag dessa forma ele não identifica o elemento html.
$("btnLogin").click(function(){
para
$("#btnLogin").click(function(){
o problema q que estava sem hashtag dessa forma ele não identifica o elemento html.
Responder
Clique aqui para fazer login e interagir na Comunidade :)
