I was wondering why my jquery mobile styling only sometimes loads only if when I press the refresh button before I hit the next link named Sign up.
If I were to hit the back button and then hit the sign up button again without refreshing, the list that would appear would look totally different without the jquery styles.
I am just baffled as to what is going on.
Here is the Link: http://71.162.197.6/iGotChu/www/
And if you want to see what it is on jsfiddle here it is: enter code herehttp://jsfiddle.net/ayz8sd6u/
****Sadly, the problem doesn't show up on jsfiddle. The list I am trying to print doesn't even show up after you press sign up.
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>changePage JSON Sample</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script type="text/javascript" charset="utf-8" src="cordova.js"></script>
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
<!-- Important Owl stylesheet -->
<link rel="stylesheet" href="owl-carousel/owl.carousel.css">
<!-- Default Theme -->
<link rel="stylesheet" href="owl-carousel/owl.theme.css">
<script src="owl-carousel/owl.carousel.js"></script>
<script>
$(document).ready(function(){$('form').on('submit', function() {
var pageRequest = "" + $(this).attr('action');
$.post($(this).attr('action'), $(this).serialize(), function(data,status){
//alert("Returned data: " + data);
pageRequest = parsePhp(pageRequest);
pageHandler(pageRequest, data);
});
return false;
});
});
function parsePhp(pageRequest){
var index1 = pageRequest.lastIndexOf("/");
index1++;
//alert(index1);
var index2 = pageRequest.lastIndexOf(".");
//alert(index2);
var page = pageRequest.substring(index1,index2);
//alert(page);
return(page + "");
}
//Owl Carousel
$(document).ready(function() {
$("#menu").owlCarousel({
singleItem: true,
});
return(false);
});
</script>
<script>
$(document).ready(function() {
var at = $("a").attr("href");
$("a").click(function(){
//alert("the Attribute is: " + at);
var print = "";
for (i=0;i<10;i++){
print = print + "<ul data-role='listview'><li><a href='index.html'><img src='images/album-bb.jpg' /><h3>Broken Bells</h3> <p>Broken Bells</p></a></li></ul>";
}
document.getElementById("test").innerHTML = print;
$.mobile.changePage($(attribute),"slide");
}
);
});
function pageHandler(pageRequest, result){
result = result + "";
if(pageRequest == "register"){
alert("Your account as been created!");
$.mobile.changePage($("#loginPage"),"slide");
}
else if(pageRequest == "login"){
alert("result data: " + result);
if(result == "success"){
$( ".loginPopUp" ).popup( "open");
$.mobile.changePage($("#home"),"slide");
}
else{
alert("Incorrect Credentials");
}
}
}
</script>
</head>
<body>
<div data-role="page" id="loginPage">
<div data-role="header">
<h1> iGotYou! </h1>
</div>
<div data-role="main" class="ui-content">
<form method="post" action="http://71.162.197.6/iGotChu/php/login.php">
<div class="ui-field-contain">
<input type="text" name="userName" id="userName" placeholder="Username">
<input type="password" name="password" id="passWord" placeholder="Password">
<input type="submit" value="Login">
</div>
</form>
<a href="#createAccountPage" data-role="button">Sign Up</a>
</div>
</div>
<div data-role="page" id="createAccountPage">
<a data-rel="back" data-icon="arrow-l" data-role="button">Create Account</a>
<form method ="post" action ="http://71.162.197.6/iGotChu/php/register.php">
<div class="ui-field-contain">
<input type="text" name="userName" id="userName" placeholder="User Name">
<input type="text" name="firstName" id="firstName" placeholder="First Name">
<input type="text" name="lastName" id="lastName" placeholder="Last Name">
<input type="text" name="email" id="email" placeholder="Email Address">
<input type="password" name="password" id="password" placeholder="Password">
<input type="submit" value="Confirm">
</div>
</form>
<div data-role = 'content'>
<div class='content-primary' id = 'test'>
</div>
</div>
</div>
</body>
</html>
The first time any page is loaded in Jquery, the page is "CREATED" and is only created once and then saved into memory. Using the "pagebeforecreate" event listener, I can change the html before the page is created. In the API, the "pagebeforecreate" interrupts the page loading before the jquery enhancements are performed, thus, the html is injected, and then the enhancement scripts can then do their work in orderly fashion.
$(document).on("pagebeforecreate",function(event){
//alert("page before created activated");
var nextPage = event.target.id;
var print = "";
if (nextPage=="createAccountPage"){
$.ajax({
url: '<your server>',
dataType: 'json',
async: true,
success: function(data) {
var print = "";
for (i=0;i<data.firstName.length;i++){
print = print + "<li><a href='index.html'><img src='images/album-bb.jpg' /><h3>"+data.firstName[i]+ " " + data.lastName[i] + "</h3><p>Broken Bells</p></a></li>";
}
$("#usersList").html(print);
print = "";
}
});
}
});
However, the problem is not totally fixed as one would need to refresh the html if it were ever to be changed due to a caching problem where the old page would be saved and the html would not be reloaded even though an ajax call is made. This goes hand in hand with my earlier statement that pages are created only once. To force a reload/notify that the page has been changed, I made a complementary scheme that upons an ajax call, the html is updated with the function
$('#usersList').listview('refresh');