web-dev-qa-db-fra.com

mécanisme d'actualisation de la page jQuery Mobile

J'ai beaucoup de difficulté à comprendre comment JQuery Mobile gère l'actualisation des pages après une mise à jour ajax.

J'ai un site de fichiers unique de deux pages: un moteur de recherche.

La première page est un champ de recherche. Submit déclenche un appel JSON et un analyseur qui met à jour la deuxième page: résultats.

pour le moment j'utilise: $.mobile.changePage( $('#result') ); qui fait un travail formidable du champ de recherche à la page de résultat . Cependant: Si je le réutilise à partir de la page de résultat pour les pages suivante/précédente nœuds dans le DOM); Jquery Mobile ne "peint" pas les nœuds récemment ajoutés.

quelqu'un peut-il expliquer, s'il vous plaît, l'utilisation et la distinction de 1- $.mobile.page() 2- $.mobile.changePage() 3- $.mobile.refresh()

ou donnez-moi un indice sur la façon dont je devrais gérer les changements de page ... Merci!

jquery-mobile
21
user980560
function refreshPage()
{
    jQuery.mobile.changePage(window.location.href, {
        allowSamePageTransition: true,
        transition: 'none',
        reloadPage: true
    });
}

Extrait d'ici http://scottwb.com/blog/2012/06/29/reload-the-same-page-without-blinking-on-jquery-mobile/ également testé sur jQuery Mobile 1.2.0

23
Sebastien GISSINGER

Veuillez regarder ici: http://jquerymobile.com/test/docs/api/methods.html

$.mobile.changePage() permet de passer d'une page à une autre et le paramètre peut être une URL ou un objet de page. (seul le résultat fonctionnera également)

$.mobile.page() n'est plus recommandé, veuillez utiliser .trigger( "create"), voir aussi: La fonction .page () de JQuery Mobile provoque une boucle infinie?

Important: Créer ou rafraîchir: une distinction importante

Notez qu'il existe une différence importante entre la méthode create event et la méthode d'actualisation de certains widgets. L'événement create convient à l'amélioration du balisage brut contenant un ou plusieurs widgets. La méthode d'actualisation utilisée par certains widgets doit être utilisée sur des widgets existants (déjà améliorés) qui ont été manipulés par programme et nécessitent que l'interface utilisateur soit mise à jour pour correspondre.

Par exemple, si vous aviez une page dans laquelle vous ajoutiez de manière dynamique une nouvelle liste non ordonnée avec l'attribut data-role = listview après la création de la page, le déclenchement de la création sur un élément parent de cette liste le transformerait en un widget de style listview. Si d'autres éléments de liste étaient ensuite ajoutés par programme, l'appel de la méthode d'actualisation de listview ne mettrait à jour que les nouveaux éléments de liste à l'état amélioré et laisserait les éléments de liste existants intacts.

$.mobile.refresh() n'existe pas, je suppose

Alors, qu'utilisez-vous pour vos résultats? Une listview? Ensuite, vous pouvez le mettre à jour en faisant:

$('ul').listview('refresh');

Exemple: http://operationmobile.com/dont-forget-to-call-refresh-when-adding-items-to-your-jquery-mobile-list/

Sinon, vous pouvez faire: 

$('#result').live("pageinit", function(){ // or pageshow
    // your dom manipulations here
});
17
GerjanOnline

J'ai posté cela sur les forums jQuery (j'espère que cela peut aider):

En plongeant dans le code jQM, j'ai trouvé cette solution. J'espère que cela peut aider d'autres personnes:

Pour actualiser une page modifiée dynamiquement:

function refreshPage(page){
    // Page refresh
    page.trigger('pagecreate');
    page.listview('refresh');
}

Cela fonctionne même si vous créez de nouveaux en-têtes, barres de navigation ou pieds de page. Je l'ai testé avec jQM 1.0.1.

7
Rubén Norte

J'ai trouvé ce fil cherchant à créer un bouton d'actualisation de page ajax avec jQuery Mobile.

@sgissinger avait la réponse la plus proche de ce que je cherchais, mais c'était dépassé.

J'ai mis à jour pour jQuery Mobile 1.4

function refreshPage() {
  jQuery.mobile.pageContainer.pagecontainer('change', window.location.href, {
    allowSamePageTransition: true,
    transition: 'none',
    reloadPage: true 
    // 'reload' parameter not working yet: //github.com/jquery/jquery-mobile/issues/7406
  });
}

// Run it with .on
$(document).on( "click", '#refresh', function() {
  refreshPage();
});
3
mfregoe

J'ai résolu ce problème en utilisant l'attribut data-cache = "false" dans la page div des pages que je voulais actualiser.

<div data-role="page" data-cache="false">
/*content goes here*/

</div>

Dans mon cas, c'était mon panier d'achat. Si un client ajoute un article à son panier puis poursuit ses achats, puis ajoute un autre article à son panier, la page du panier n’affiche pas le nouvel article. Sauf s'ils ont rafraîchi la page. Si vous définissez data-cache sur false, JQM ne doit pas mettre cette page en cache pour autant que je sache.

J'espère que cela aidera les autres à l'avenir.

1
dherrin79

Cette réponse m'a fait l'affaire http://view.jquerymobile.com/master/demos/faq/injected-content-is-not-enhanced.php .

Dans le contexte d'un modèle multi-pages, je modifie le contenu d'un <div id="foo">...</div> dans un gestionnaire Javascript 'pagebeforeshow' et déclenche un rafraîchissement à la fin du script:

$(document).bind("pagebeforeshow", function(event,pdata) {
  var parsedUrl = $.mobile.path.parseUrl( location.href );
  switch ( parsedUrl.hash ) {
    case "#p_02":
      ... some modifications of the content of the <div> here ...
      $("#foo").trigger("create");
    break;
  }
});
0
FredP