web-dev-qa-db-fra.com

Jquery Mobile - $ .mobile.changepage ne charge pas les fichiers .JS externes

J'ai donc du mal à faire fonctionner $.mobile.changePage correctement. Je l'appelle comme ça: 

$.mobile.changePage( "DataformsM-AddRecord.html", { transition: "slide"} );

Mais pour une raison quelconque, lorsque la page HTML est chargée, aucun des fichiers .js externes (les fichiers que j'ai écrits pour réellement faire quelque chose) n'est inclus. Je suis les conventions de chargement importantes de 

-Jquery
-(CUSTOM JS)
-Jquery Mobile

Est-ce que quelqu'un sait pourquoi cela ne se charge pas correctement? En outre, la fonction pageshow ne se fait pas virer non plus, ce qui est étrange. Cela ressemble à ceci:

$("div[data-role*='page']").live('pageshow', function(event, ui) { 

    loadFormFields();

});

Maintenant, la page est rendue, mais aucune des choses fonctionnelles ne se produit. Si je le pirate et fais quelque chose comme ça: 

document.location.href="DataformsM-AddRecord.html";

Cela fonctionnera correctement.

javascriptjqueryhtml5jquery-mobile
20
gabaum10

jQuery Mobile ne tire pas la page entière dans le dom, il saisit l'élément first data-role="page" et ses descendants et le transfère dans le dom actuel.

Ainsi, aucun script dans le <head> du document ne sera inclus.

Je mets généralement tout le code JavaScript fonctionnel de mon site sur la page d'index, puis, lorsque des pages externes sont chargées dans le domaine, elles peuvent bénéficier des scripts déjà chargés.

En outre, vous pouvez placer du code JavaScript dans l'élément data-role="page" et il sera inclus lorsque jQuery Mobile effectuera son chargement AJAX de la page.

METTRE &AGRAVE; JOUR

Un bon système pour cela consiste à mettre tous vos JS dans un fichier include et à les inclure sur chaque page du site. Il sera ignoré si AJAX introduit les pages dans le DOM, mais si quelqu'un actualise quelque part sur votre site, le JS sera disponible.

43
Jasper

Alors, en partant de ce que Jasper a si judicieusement noté ci-dessus, j'ai trouvé une solution efficace.

Fondamentalement, je charge tous mes fichiers JS et CSS dans la page d'index pour commencer. Maintenant, lorsque vous chargez, cette méthode sera déclenchée pour la pageshow

$("div[id*='page1']").live('pageshow', function(event, ui) { 
    setTimeout(function() { window.scrollTo(0, 1) }, 100);
    doStuffWhenPageintializes();
});

Une fois que j'appelle $.mobile.changePage( "someOtherPage.html", { transition: "slide"} );, la méthode pagehide sera déclenchée pour l'objet page1. C'est ici que vous pouvez déclencher la méthode pour initialiser la page vers laquelle vous effectuez la transition. 

$("div[id*='page1']").live('pagehide', function(event, ui) { 
    setTimeout(function() { window.scrollTo(0, 1) }, 100);
    loadStuffForNewPage();
});

Vous pouvez maintenant supprimer la ligne document.location.href="external.html" et utiliser simplement l'appel JQM natif. J'espère que cela aide certaines personnes.

3
gabaum10

Veuillez répéter la section head avec tous les scripts de chaque page html, car changer de page entraînera un rechargement des pages et créera une nouvelle section head ...

une simple page de changement comme celle-ci fonctionnerait alors:

$.mobile.changePage('abc.html', {
    transition: 'slide'
});
1
Sheetal

Il semble qu'il n'y ait pas de "bonne" méthode fournie par JQM pour charger des fichiers HTML externes. Merci beaucoup à Jasper pour la solution.

JQM suggère un rechargement AJAX si nous voulons basculer vers des pages externes, telles que:

<a href="foo.html" rel="external">

ou

<a href="foo.html" data-ajax="false">

J’ai essayé les deux, mais ils n’ont pas fonctionné - je suis en train de programmer pour des applications natives, alors peut-être que cela fonctionnera pour les applications Web?

0
Mike

J'ai résolu ce problème en mettant le script dans la section head de la dernière page chargée, ce qui m'a aidé et travaillé. JQM n'obtient pas la section d'en-tête de la page récemment chargée dans le DOM et n'apporte donc pas le contenu JS de la page récente. En mettant tout le script dans un fichier JS externe ou en le mettant dans la section head de la toute première page, cela pourrait faire l'affaire.

0
Hanzala Ali