Hi all,
I'm learning to use jQueryMobile to develop a web application.
I'm trying to do a simple login form that, on success, load another html page.
To do this, i wrote this javascript that i've insert in the <head> tag:
function onSuccess(data){
var jsonString = JSON.stringify(data);
var json = jQuery.parseJSON(jsonString);
if(json.success=="true"){
window.localStorage.setItem('userData', jsonString);
setCookie("username", json.user);
$.mobile.changePage( "pages/home/index.html", {
transition: "slide",
changeHash:true,
reloadPage:true,
dataUrl: "pages/home/index.html"
});
}
else if(json.success=="false"){
if(json.err=="userErr"){
$("#notification").text("Utente inesistente");
}
else if(json.err=="passErr"){
$("#notification").text("Password errata");
}
}
}
function onError(data){
data = $.trim(data);
$("#notification").text("Error");
}
$(document).ready(function() {
$("#submit").click(function(){
var formData = $("#loginForm").serialize();
$.ajax({
type: "POST",
url: "php/login.php",
cache: false,
dataType: 'json',
data: formData,
success: onSuccess,
error: onError
});
});
The form is correctly sent and i'm able to load the page "pages/home/index.html" on success, but the problem is that if in the new page I click the back button, when I resend the form it doesn't perform because take the link of php page starting from "pages/home/", so doesn't found the page.
In the second page, the back button is implemented as:
$("#backButton").click(function() {
setCookie("username", null);
window.localStorage.setItem('userData', null);
$.mobile.changePage( "../../index.html", {
transition: "slide",
reverse: true,
changeHash:true,
reloadPage:true
});
in the $(document).bind('pageload', function (evt,data)
How can I correct this?
And another question, in the new page (pages/home/index.html), where should I put the initializations of the buttons of this page?
Thanks in advance,
Stefano.