jquerymobile – inclure les fichiers .js et .html

Dans mon application, j’utilise plus que la page HTML pour afficher le contenu et chaque page possède son propre fichier .js. Lorsque j’appelle la page html, le fichier .js est également inclus. Dans le .js, j’utilise $('div').live('pageshow',function(){}) . J’appelle le fichier html du. js(using $.mobile.changePage("htmlpage")) .

Mon problème: considérez, j’ai deux fichiers HTML. Le fichier second.html est appelé avec dans le one.js. quand je montre le second.html, le temps one.js est rechargé à nouveau. Je reçois l’alerte “one.js” puis “second.js”

one.html

    Page Title

Deuxième.html

    Sample         Second

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: lorsque j’indique la date de future.html, les fichiers suivants sont rechargés (un.js, deuxième.js, troisième, js et quasortingème.js. Mais j’ai besoin de quasortingème.js seul). J’ai essayé d’utiliser le $ .document.ready (function () {}); mais ce temps .js n’a pas appelé.

L’événement pageshow lie les fonctions JavaScript qui se déclenchent à chaque chargement de la page. Lorsque vous chargez la deuxième page, vous créez une autre fonction de diaporama que vous n’avez pas besoin de créer.

Cela devrait aider à résoudre votre problème, si et seulement si vous définissez ceci une 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 passez d’une page à une autre, cela vous alertera avec la page qui vient d’être affichée et la page qui vient d’être masquée.

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

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

Édité par commentaire (Désolé, novice SO ici):

Voici une autre approche pour charger des fichiers JS en fonction de la page HTML actuelle

Ayez un seul fichier de script qui est inclus sur chaque page de votre application, mais qui n’est rien d’autre qu’un fichier de “démarrage” qui détecte la page en cours, puis insère le ou les fichiers JavaScript dans le DOM.

Cette fonction insérera le 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 en cours

 // The 'pagechange' event is sortingggered 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 atsortingbute "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 (eg what page have we just ajax'ed into view) attr = currentPage.getAtsortingbute('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); } });

Lien de référence