jquery mobile - comprennent .js et .html

StackOverflow https://stackoverflow.com/questions/4643661

  •  09-10-2019
  •  | 
  •  

Question

Dans ma demande, je me sers plus de la page html pour afficher le contenu et chaque page ont propre fichier .js. Quand j'appelle la page html puis fichier .js également inclus. Dans les .js, je me sers $('div').live('pageshow',function(){}). J'appelle le fichier html du .js(using $.mobile.changePage("htmlpage")).

Mon problème: considérer, j'ai deux fichiers html. fichier second.html est appelé avec la one.js. quand je montre la second.html, que one.js temps est à nouveau reload. Je reçois l'alerte « one.js », puis « second.js »

one.html 

<!DOCTYPE html> 
<html> 
  <head> 
    <title>Page Title</title> 
    <link rel="stylesheet" href="jquery.mobile-1.0a2.min.css" />
    <script src="jquery-1.4.3.min.js"></script>
    <script src="jquery.mobile-1.0a2.min.js"></script> 
    <script src="Scripts/one.js"></script>
  </head> 
  <body>         
    <div data-role="page">
    </div>
  </body>
</html>

second.html 

<!DOCTYPE html> 
<html> 
  <head> 
    <title>Sample </title> 
    <link rel="stylesheet" href="../jquery.mobile-1.0a2.min.css" />
    <script src="../jquery-1.4.3.min.js"></script>
    <script src="../jquery.mobile-1.0a2.min.js"></script>
    <script type="text/javascript" src="Scripts/second.js"></script>
  </head> 
  <body>
    <div data-role="page">   
      <div data-role="button" id="link" >Second</div>
    </div><!-- /page -->
  </body>
</html>

one.js 

$('div').live('pageshow',function()
{     
   alert("one.js");
   //AJAX Calling 
   //success result than call the second.html 
   $.mobile.changePage("second.html");                   
});

second.js 

$('div').live('pageshow',function(){
{     
   alert('second.js');  
   //AJAX Calling 
   //success result than call the second.html 
   $.mobile.changePage("third.html");                   
});

Remarque: Quand je montre forth.html ce temps, les fichiers suivants sont reload (. One.js, second.js, troisième, mais js et fourth.js je besoin fourth.js seul). J'ai essayé d'utiliser la .document.ready $ (function () {}); mais que .js temps ne pas appeler.

Était-ce utile?

La solution

L'événement pageshow lie fonctions JavaScript que le feu chaque fois que la page se charge. Lorsque vous chargez la deuxième page, vous créez une autre fonction pageshow que vous ne avez pas réellement besoin de créer.

Cela devrait aider à résoudre votre problème, si et seulement si vous définissez cette fois: 

 $('div').live('pageshow',function(event, ui){
    alert('This page was just hidden: '+ ui.prevPage);
 });

 $('div').live('pagehide',function(event, ui){
    alert('This page was just shown: '+ ui.nextPage);
 });

Lorsque vous les pages de transition, cela vous alerter avec quelle page vient d'être montré, et quelle page était juste caché.

Grande-ressource:
http://jquerymobile.com/demos/1.0a2/#docs/api /events.html

http://forum.jquery.com/topic/mobile-events-documentation

Autres conseils

Modifié par OER commentaire (Désolé, newbie ici SO):

Voici une autre approche pour le chargement des fichiers JS basé sur la page HTML

Avoir un seul fichier de script qui est inclus sur chaque page de votre application, mais agit comme rien de plus qu'un fichier « bootstrapper » qui détecte la page en cours puis insère le fichier JavaScript (s) dans le DOM.

Cette fonction permet d'insérer le code Javascript: 

function insertScript(script, container) {
    var elem = document.createElement('script');
    elem.type = 'text/javascript';
    elem.src = 'Assets/Scripts/' + script + '.js';
    container.appendChild(elem);
}

Et ce code détecte la page courante 

// The 'pagechange' event is triggered after the changePage() request has finished loading the page into the DOM 
// and all page transition animations have completed.
// See: https://gist.github.com/1336327 for some other page events
$(document).bind('pagechange', function(event){

// grab a list of all the divs's found in the page that have the attribute "role" with a value of "page"
    var pages = $('div[data-role="page"]'),
    // the current page is always the last div in the Array, so we store it in a variable
    currentPage = pages[pages.length-1],
    // grab the url of the page the  was loaded from (e.g. what page have we just ajax'ed into view)
    attr = currentPage.getAttribute('data-url');

// basic conditional checks for the url we're expecting
if (attr.indexOf('home.html') !== -1) {
    // now we know what page we're on we can insert the required scripts.
    // In this case i'm inserting a 'script.js' file.
    // I do this by passing through the name of the file and the 'currentPage' variable
    insertScript('search', currentPage);
}

// rinse and repeat...
if (attr.indexOf('profile.html') !== -1) {
    insertScript('profile', currentPage);
}

});

Référence Lien

Licencié sous: CC-BY-SA avec attribution
Non affilié à StackOverflow
scroll top