I am developing a jquery mobile website and i have some problems running javascript code.
I have a home page , index.html , which is basically a listview to navigate to various html pages. I use the single-page structure for my pages , that means every 1 html file contains 1 page. Now from the home page , i navigate to another page where i am using a persistent NavBar with a horizontal button with 2 options. One is photos and the other is multimedia.
For the photos i am using the Javascript FB API , to download the photos from a FB Page and then with the PhotoSwipe Plugin i present them to the user.
The problem..
If i run the photos.html page , it will work well and load the albums. There are 2 things that my javascript does. 1) Use FB API to get albums, photos , cover photos etc.. 2) Dynamically create a listview with this albums and their photos. In this case both work great!
However when i am in my index.html and i navigate through the listview to the photos.html (photos is the default chosen button from the persisent NavBar) the Javascript code doesnt work. Like is not called at all..
The index.html looks like:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery Mobile Web App</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<!--<link href="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.css" rel="stylesheet" type="text/css"/>-->
<link rel="stylesheet" href="themes/EspacioJoven.min.css" />
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.1/jquery.mobile.structure-1.3.1.min.css" />
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js"></script>
<link rel="stylesheet" href="themes/custom.css" />
</head>
<body>
<div data-role="page" id="home" data-theme="a">
<!--
<div data-role="header">
<h1>Application Title</h1>
</div>
-->
<div data-role="content">
<h2 id="banner">Joven Mobile</h2>
<div class="main_menu">
<ul data-inset="true" data-role="listview">
<li><a href="EcioJven.html"><img src="themes/icons/news.png" alt="Information" class="ui-li-icon">Esen</a></li>
<li><a href="NeJoven.html"><img src="themes/icons/research.png" alt="Information" class="ui-li-icon">Laen</a></li>
<li><a href="photos.html"><img src="themes/icons/staff.png" alt="Information" class="ui-li-icon">Multimedia</a></li>
<li><a href="SajhrJoven.html"><img src="themes/icons/students.png" alt="Information" class="ui-li-icon">Sanen</a></li>
</ul>
</div>
</div>
<!--
<div data-role="footer">
<h4>Page Footer</h4>
</div>
-->
</div>
</body>
</html>
The photos.html looks like :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery Mobile Web App</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<!--<link href="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.css" rel="stylesheet" type="text/css"/>-->
<link rel="stylesheet" href="themes/EspacioJoven.min.css" />
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.1/jquery.mobile.structure-1.3.1.min.css" />
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js"></script>
<link rel="stylesheet" href="themes/custom.css" />
<!-- Needed from PhotoSwipe Plugin -->
<link href="photoSwipe/jquery-mobile.css" type="text/css" rel="stylesheet" />
<link href="photoSwipe/photoswipe.css" type="text/css" rel="stylesheet" />
<script type="text/javascript" src="photoSwipe/klass.min.js"></script>
<script type="text/javascript" src="photoSwipe/code.photoswipe.jquery-3.0.5.min.js"></script>
<script type='text/javascript' src='photoSwipe/photoSwipeCall.js'></script>
<!-- Needed from PhotoSwipe Plugin -->
</head>
<body>
<div data-role="page" id="photos" data-theme="a" data-add-back-btn="true" data-back-btn-text="Back">
<div data-role="header" data-id="fixedNav" data-position="fixed">
<h1>Application Title</h1>
<a href="#" data-icon="back" data-rel="back" title="Go back">Back</a>
<div data-role="navbar">
<ul>
<li><a href="photos.html" class="ui-btn-active ui-state-persist">Photos</a></li>
<li><a href="videos.html">Videos</a></li>
</ul>
</div><!-- /navbar -->
</div><!-- /header -->
<div data-role="content">
<ul data-role="listview" data-inset="true" class="albums">
<!-- Here the albums are created through javascript (createAlbums.js) -->
</ul>
<button type="button" id="loadMoreAlbums">More Albums...</button>
</div><!-- /content -->
</div><!-- /page -->
<div id="fb-root"></div>
<script type='text/javascript' src='javascript/createAlbums3.js'></script>
</body>
</html>
As you see i call my javascript in the end. Any ideas why its never called? If i refresh the page , that means run the photos.html , it will load normally.
Actually i also look at the "elements" table from the debugger. When im in the index.html page the html elements seem all correct. When i do the transition though to the photos.html page , by looking at the elements table i see that they dont change! The title does change but the rest stays the same which is incredible?! How on earth can that happen? It looks like is the same page , with the same css and javascript sources , but should be different! As you see i use photoSwipe javascript , css etc! Only if i reload the page the elements are correct. Please any ideas? I have no idea what is happening here.
Also for some reason i get a 304 Status , Not Modified through the transition , from one page to another.
