Jquery Mobile - $.mobile.changepage pas de chargement externe .Fichiers JS

Donc je vais avoir un moment difficile l'obtention de $.mobile.changePage pour fonctionner correctement. Je l'appelle comme ceci: 

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

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

-Jquery
-(CUSTOM JS)
-Jquery Mobile

Personne ne sait pourquoi ce n'est pas chargé correctement? Aussi, le pageshow fonction n'est pas de se faire licencier, ce qui est étrange. Il ressemble à ceci:

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

    loadFormFields();

});

Maintenant que la page est affichée, mais rien de fonctionnel des choses. Si je le pirater et de faire quelque chose comme ceci: 

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

Il pourra fonctionner correctement.

InformationsquelleAutor gabaum10 | 2011-09-16
  1. 43

    jQuery Mobile ne tirez pas sur l'ensemble de la page dans les dom, il s'empare de la première data-role="page" élément et de ses descendants et tire que dans les dom actuel.

    Donc tous les scripts du <head> du document ne sera pas inclus.

    Je règle générale, l'ensemble des fonctions JavaScript pour mon site sur la page d'index et lorsque des pages externes sont chargés dans les dom, ils peuvent bénéficier de la déjà chargé de scripts.

    Aussi, vous pouvez placer le code JavaScript à l'intérieur de la data-role="page" élément et il sera incluse lors de jQuery Mobile fait son AJAX chargement de la page.

    Mise à JOUR

    Un bon système, c'est de mettre tous vos JS dans un fichier include et de l'inclure sur chaque page du site. Il sera ignoré si les pages sont introduites dans les DOM en AJAX, mais si quelqu'un rafraîchit quelque part dans votre site, la JS seront disponibles.

    • Cette réalité a fait le tour du chargement de la JS externe des fichiers. Je vais écrire un complément de réponse pour expliquer plus en détail ce que j'ai fait pour le faire fonctionner à 100%. J'ai toujours l'impression qu'il s'agit d'un hack, mais comme de maintenant, il semble bon.
    • en réponse à votre "mise à Jour", est-il un moyen de créer un universel, notamment des fichiers avec tous vos CSS et Javascript comprend? Merci
    • Vous pourriez faire un serveur-côté de l'inclusion d'un fichier qui inclut à la fois le CSS et le JS. Mais il est assez facile de simplement utiliser un <link /> et un <script /> balise pour mettre votre CSS et JS sur chaque document.
    • bien expliqué, merci.. =)
    InformationsquelleAutor Jasper
  2. 3

    Donc, en profitant de ce que Jasper si judicieusement noté ci-dessus, je suis venu avec une solution de travail.

    Fondamentalement, je Charge l'ensemble de mes fichiers CSS et JS dans la page d'index de départ. Maintenant, quand vous chargez, cette méthode sera déclenché pour la pageshow

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

    Une fois que j'appelle le $.mobile.changePage( "someOtherPage.html", { transition: "slide"} );, le pagehide méthode va être congédié pour la page1 objet. C'est là que vous pouvez déclencher la méthode pour initialiser la page que vous êtes en transition à. 

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

    Vous pouvez maintenant enlever le document.location.href="external.html" ligne et utilisez simplement le natif de JQM appel. Espérons que cela aide certaines personnes.

    • Vous pouvez également utiliser pageInit() pour chaque page que vous chargez.
    InformationsquelleAutor gabaum10
  3. 1

    De bien vouloir répéter la section de la tête avec tous les scripts dans chaque page html, depuis le changement de page sera la cause de rechargement de pages et de re créer la section de la tête...

    un simple changement de page, comme ce serait alors le travail:

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

    Il semble qu'il n'y a pas de "bonne" façon fournis par JQM pour charge externe des fichiers html. Merci un tas de Jasper pour la solution.

    JQM suggère un AJAX recharger si nous voulons passer à des pages externes, comme:

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

    ou

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

    J'ai essayé les deux, mais ils n'ont pas de travail - I"m de programmation pour les applications natives, alors peut-être que ça peut fonctionner pour les applications web?

    InformationsquelleAutor Mike
  5. 0

    J'ai résolu ce problème en mettant le script dans l'en-tête du dernier chargement de la page qui a aidé et a travaillé pour moi. JQM n'est pas le chef de la section de récemment chargés de la page dans les DOM afin de ne pas amener de la JS contenu de l'récente de la page. En mettant tout le script dans un fichier JS Externe ou en le mettant dans la section en-tête de première page pourrait faire l'affaire pour vous.

    InformationsquelleAutor Hanzala Ali
  6. -1

    Moi aussi, je suis à la recherche de cette solution "correcte" pour le chargement des pages externes. Cependant, je vous le confirme, que votre hack ne fonctionne en effet. Je vais prendre le hack pour le moment:

        $(document).ready(function(){
    $("#page1").bind('ended', function(){
        $.mobile.changePage($(document.location.href="external.html"), 'fade');
  });
});
    • Est-ce à réellement faire la transition lorsque vous faites cela?
    • Parce que ma page est en cours de chargement, mais je suis un toPage.data("page") is undefined erreur dans le JQM fichier. Je pense qu'il y a quelque chose qui manque...
    • veuillez voir la solution que j'ai posté basé sur les du parc la réponse ci-dessus.
    • Non, la transition ne fonctionne pas. Je suis en train de trier des que l'on sort. Il peut avoir à faire avec le $(document).prêt.(fonction), parce que j'ai lu que cela devrait être évité avec JQM.
    • J'ai compris que la transition NE fonctionne tout simplement pas dans FF. Pour une raison quelconque, il n'aime pas les transitions. Essayer sur un autre navigateur. 🙂
    • J'ai été le tester dans Safari et Chrome et de ne pas travailler, mais j'ai essayé la mise à jour de votre code et a travaillé comme un charme! Cependant, je ne comprends pas le pagehide événement.
    • Fondamentalement, la pageshow/masquer les événements de me faire virer quand quel que soit JQ objet que vous avez défini pour s'obtient caché/montré. Il est très similaire pour les différents événements qui sont déclenchés à déléguer des méthodes natives iOS applications. Découvrez en plus ici: jquerymobile.com/test/docs/api/events.html

    InformationsquelleAutor codewarrior