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");
					});
				}
			}
		);
	});
	
	
});
   
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

16/04/2016

Acg

alguma resposta, estou sem ideia
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.
Responder

Que tal ter acesso a um e-book gratuito que vai te ajudar muito nesse momento decisivo?

Ver ebook

Recomendado pra quem ainda não iniciou o estudos.

Eu quero
Ver ebook

Recomendado para quem está passando por dificuldades nessa etapa inicial

Eu quero

Utilizamos cookies para fornecer uma melhor experiência para nossos usuários, consulte nossa política de privacidade.

Aceitar