conceptual problem or cache problem between pages

conceptual problem or cache problem between pages

Hi,

I am facing a cache problem in the  client side  authentication method.
I use a nice navigation panel on my webapp. It works well except when I need to log into my webapp.

This is my method :

5 files :
- index.html (or whatever.html) : index page including index.js and navpanel.js
- index.js (or whatever.js)  : ajax methods 
- auth.html : authentication page including auth.js
- auth.js : ajax method wich redirect you on index.html if authentication is true

- navpanel.js : ajax method wich display in a panel menu the links you need to use (it's not a really security issue, I check it on server side)

I don't really understand why, but i t seems that because navpanel is loaded everytime those functions are already in the DOM.  when I need to call renderPanel() after the authentication form process (wich works), I am redirected to index.html but my navigation panel is empty. I have to refresh my page and the navigation panel is displayed properly.

Could someone explain me why and how can I correct this ?
I tried to disable ajax-cache and others things but with no results...

Thx guys


This is my index.html page :
  2. <!DOCTYPE html>
  3. <html>
  4. <head>
  5.     <meta charset="utf-8">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1">
  7.     <title lang="en">Wiseflat - home</title>
  8.     <link rel="stylesheet" href="css/themes/default/jquery.mobile-1.3.2.min.css">
  9.     <link rel="stylesheet" href="_assets/css/jqm-demos.css">
  10.     <!--<link rel="stylesheet" href="_assets/css/google-fonts.css">-->
  11.     <link rel="shortcut icon" href="favicon.ico">
  12.     <script src="js/jquery.js"></script>
  13.     <script src="js/webx/jquery.validate.js"></script>
  14.     <script src="js/webx/additional-methods.js"></script>
  15.     <script src="js/jquery.mobile-1.3.2.min.js"></script>
  16.     <script src="js/jquery-lang.js" charset="utf-8" type="text/javascript"></script>
  17.     <script src="js/langpack/fr.js" charset="utf-8" type="text/javascript"></script>
  18.     <script type="text/javascript">
  19.         window.lang = new jquery_lang_js();
  20.         $().ready(function () {
  21.             window.lang.run();
  22.         });
  23.     </script>
  24. </head>
  25. <body>

  27. <div data-role="page" class="jqm-demos jqm-demos-index" id="index">

  29.     <div data-role="header" class="jqm-header">
  30.         <h1 class="jqm-logo"><a href="index.html" data-ajax="false" id="nav_getIndex"><img src="_assets/img/jquery-logo.png" alt="Wiseflat"></a></h1>
  31.         <a href="#nav-panel" class="jqm-navmenu-link" data-icon="bars" data-iconpos="notext" lang="en">Navigation</a>
  32.     </div><!-- /header -->

  34.     <div data-role="content" class="jqm-content">
  35.         <h4 lang="en">Weather</h4>
  36.         <div id="index_debug"></div>
  37.         <div class="jqm-list">
  38.             <ul data-role="listview" data-theme="d" data-inset="true" id="index_weather"></ul>
  39.         </div>
  40.         <h4 lang="en">Scenarios</h4>
  41.         <div class="jqm-list">
  42.             <ul data-role="listview" data-theme="d" data-inset="true" id="index_scenarios"></ul>
  43.         </div>
  44.         <!--<h4 lang="en">Last events</h4>
  45.         <div class="jqm-list">
  46.             <ul data-role="listview" data-theme="d" data-inset="true" id="index_events"></ul>
  47.         </div>-->


  50.     </div><!-- /content -->

  52.     <div data-role="footer" class="jqm-footer">
  53.         <p class="jqm-version"></p>
  54.         <p>Copyright 2012 Wiseflat</p>
  55.     </div><!-- /footer -->

  57.     <div data-role="panel" class="jqm-nav-panel jqm-navmenu-panel" data-position-fixed="true" data-position="left" data-display="reveal" data-theme="c" id="nav-panel">
  58.         <ul data-role="listview" id="nav_panel_list" data-theme="d" data-divider-theme="d" data-icon="false" data-global-nav="demos" class="jqm-list"></ul>
  59.     </div><!-- /panel -->

  61.     <script src="js/webx/navpanel.js"></script>
  62.     <script src="js/webx/index.js"></script>
  63. </div>
  64. </body>
  65. </html>

This is an exemple of my ajax POST/PUT/GET methods from index.js :

  2. function findAll() {
  3.     $.ajax({
  4.         type: 'GET',
  5.         url: rootURL + '/all',
  6.         dataType: "json",
  7.         success: function(data){
  8.             jsondata = data;
  9.             if(jsondata.auth == false){
  10.                 $.mobile.changePage("auth.html");
  11.             }else {
  12.                 renderList(jsondata);
  13.                 renderPanel(jsondata);
  14.             }
  15.         },
  16.         error: function(jqXHR, textStatus, errorThrown){
  17.             debug('error', 'List unsuccessfully fetched');
  18.         }
  19.     });
  20. }
if data.auth ==false, I redirect to auth.html

This is the main part of my auth.html page :

  2. <div data-role="page" class="jqm-demos jqm-demos-index" id="locations">

  4.     <div data-role="content" class="jqm-content">

  6.     <div class="jqm-list">
  7.         <form id="auth_form">
  8.             <p>Login: <input type="text" name="auth_login" id="auth_login" /></p>
  9.             <p>Password: <input type="password" name="auth_password" id="auth_password" /></p>
  10.             <div id="demo_container" >
  11.                 <button data-mini="true" id="auth_btnLogin" data-mini="true" lang="en">Login</button>
  12.             </div>
  13.         </form>
  14.     </div><!-- /content -->

  16.     <br />
  17.     <div id="auth_debug"></div>
  18.     <br />

  20.     <div data-role="footer" class="jqm-footer"></div><!-- /footer -->

  22.     <script src="js/webx/auth.js"></script>
  23. </div><!-- /page -->
This is my auth.js file :

  2. var rootURL = "/webx/api";
  3. var debug_mode=0;

  5. $(document).on('click', '#auth_btnLogin', function(e){
  6.     e.stopImmediatePropagation();
  7.     $("#auth_form").validate({
  8.         errorLabelContainer: "#auth_debug",
  9.         rules: {
  10.             auth_login: {
  11.                 required: true,
  12.                 textOnly: true
  13.             }
  14.         },
  15.         submitHandler: function(form){
  16.             auth();
  17.             return false;
  18.         }
  19.     });
  20. });

  22. function auth() {
  23.     //debug('debug', 'auth()');
  24.     $.ajax({
  25.         type: 'POST',
  26.         cache: false,
  27.         contentType: 'application/json',
  28.         url: rootURL + '/login',
  29.         dataType: "json",
  30.         data: formToJSON(),
  31.         success: function(data, textStatus, jqXHR){
  32.             if(data.auth == false){
  33.                 $.mobile.changePage("auth.html");
  34.             }
  35.             else {
  36.                 $.mobile.changePage("index.html", {reloadPage:false,changeHash:false});
  37.             }
  38.         },
  39.         error: function(jqXHR, textStatus, errorThrown){
  40.             //debug('error', 'Category unsuccessfully added');
  41.         }
  42.     });
  43. }


  46. function formToJSON() {
  47.     return JSON.stringify({
  48.         "login": $('#auth_login').val(),
  49.         "password": $('#auth_password').val()
  50.     });
  51. }

And the last one : navpanel.js : renderpanel()

  2. function renderPanel(data) {
  3.     $('#nav_panel_list li').remove();
  4.     $('#nav_panel_list').append('<li data-role="list-divider" lang="en">Navigation</li>');
  5.     $('#nav_panel_list').append('<li><a href="indexWeather.html" data-ajax="false" id="nav_getIndexWeather" lang="en">Weather</a></li>');
  6.     $('#nav_panel_list').append('<li><a href="indexDevices.html" data-ajax="false" id="nav_getIndexDevices" lang="en">Devices</a></li>');
  7.     $('#nav_panel_list').append('<li><a href="indexAreas.html" data-ajax="false" id="nav_getIndexAreas" lang="en">Areas</a></li>');
  8.     $('#nav_panel_list').append('<li><a href="indexScenarios.html" data-ajax="false" id="nav_getIndexScenarios" lang="en">Scenarios</a></li>');
  9.     $('#nav_panel_list').append('<li><a href="indexEvents.html" data-ajax="false" id="nav_getIndexEvents" lang="en">Events</a></li>');
  10.     if(data.group > 0){
  11.         $('#nav_panel_list').append('<li><a href="#" data-ajax="false" id="nav_getLogout" lang="en">Logout</a></li>');
  12.     }
  13.     else {
  14.         $('#nav_panel_list').append('<li data-role="list-divider" lang="en">Logged as '+data.login+'</li>');
  15.         $('#nav_panel_list').append('<li><a href="auth.html" data-ajax="false" id="nav_getLogin" lang="en">Sign in</a></li>');
  16.     }
  17.     if(data.group > 1){
  18.         $('#nav_panel_list').append('<li data-role="list-divider" lang="en">Settings</li>');
  19.         $('#nav_panel_list').append('<li><a href="users.html" data-ajax="false" id="nav_getUsers" lang="en">Users</a></li>');
  20.         $('#nav_panel_list').append('<li><a href="areas.html" data-ajax="false" id="nav_getAreas" lang="en">Areas</a></li>');
  21.         $('#nav_panel_list').append('<li><a href="locations.html" data-ajax="false" id="nav_getLocation" lang="en">Locations</a></li>');
  22.         $('#nav_panel_list').append('<li><a href="categories.html" data-ajax="false" id="nav_getCategories" lang="en">Categories</a></li>');
  23.         $('#nav_panel_list').append('<li><a href="devices.html" data-ajax="false" id="nav_getDevices" lang="en">Devices</a></li>');
  24.         $('#nav_panel_list').append('<li><a href="scenarios.html" data-ajax="false" id="nav_getScenarios" lang="en">Scenarios</a></li>');
  25.         $('#nav_panel_list').append('<li><a href="network.html" data-ajax="false" id="nav_getNetwork" lang="en">Network</a></li>');

  27.         $('#nav_panel_list').append('<li data-role="list-divider" lang="en">Plugins</li>');
  28.         $('#nav_panel_list').append('<li><a href="sms.html" data-ajax="false" id="nav_getSms" lang="en">Sms</a></li>');
  29.         $('#nav_panel_list').append('<li><a href="scripts.html" data-ajax="false" id="nav_getPlugins" lang="en">Scripts</a></li>');
  30.         $('#nav_panel_list').append('<li><a href="services.html" data-ajax="false" id="nav_getServices">Services</a></li>');
  31.     }
  32.     $('#nav_panel_list').append('<li data-role="list-divider" lang="en">About</li>');
  33.     $('#nav_panel_list').append('<li><a href="about.html" data-ajax="false" id="index_about" id="nav_getAbout" lang="en">me</a></li>');
  34.     $('#nav_panel_list').listview('refresh');
  35.     $('#nav_panel_list').trigger('create');

  37.     window.lang.change(data.lang);
  38.     window.lang.run(data.lang);
  39. }