2012-08-02 11 views
7

Sto costruendo un'applicazione JQuery Mobile basata su un framework MVC.Supporto per il reindirizzamento delle pagine in Jquery mobile utilizzando le chiamate Ajax

Il mio problema è che non posso inviare direttive "redirect" (HTTP, Javascript, META-refresh) al browser.

Il browser visualizza una riga singola: "non definito".

Ecco il codice per il reindirizzamento sul lato server:

<html><head> 
     <script>location.href='$url'</script> 
</head></html> 

so che posso risolvere il problema utilizzando data-ajax=false, ma io non voglio che dal:

  • Voglio delle belle transizioni Jquery mobile
  • Questo è molto più veloce in Ajax
  • Non mi chiedo per ogni collegamento ogni volta che il framework potrebbe inviare un reindirizzamento

C'è un modo per fare in modo che JQuery Mobile gestisca correttamente un tipo di reindirizzamento? HTTP, HTML META o Javascript?

+0

Quale tecnologia lato server stai usando? Dovresti fare il reindirizzamento lì. – Jasper

+0

Io uso PHP. E faccio il reindirizzamento qui. È solo che gli involucri mobili di Jquery pensano con Ajax e non funzionano bene con il reindirizzamento standard. –

+0

Quali problemi stai avendo? Quali errori stai ottenendo? Perché stai reindirizzando? Come appare il tuo codice che crea il reindirizzamento? Questa è una domanda vaga. – Jasper

risposta

8

Con l'aiuto di JQuery mobile community, ho trovato una soluzione elegante in grado di gestire sia il reindirizzamento HTML standard (data-ajax="false") sia le transizioni di pagina JQM.

Il trucco è che, quando si eseguono le transizioni JQM, JQM carica il risultato HTML con javascript; cerca una pagina `data-role = 'page' e la sostituisce nel DOM: ignora l'intestazione HTML.

Quindi, dobbiamo inserire un reindirizzamento Javascript standard nell'intestazione e una pagina JQM in una pagina fittizia.

Ecco il codice del metodo di reindirizzamento nel mio modello MVC:

<html> 
    <head> 
     <!-- HTML reload (for data-ajax=false) --> 
     <script> 
      location.href='<?= $url ?>' 
     </script> 
    </head> 
    <body> 
     <!-- Change page : JQueryMobile redirect --> 
     <div data-role="page" id="redirect"> 
      <script> 
       $.mobile.changePage('<?= $url ?>'); 
      </script> 
     </div> 
    </body> 
</html> 

Spero che questo aiuta qualcuno.

+0

È che il tuo non passa l'url correttamente? tua passandolo come '' non dovrebbe essere a meno che non mi manca qualcosa: p – BExDeath

+1

è un valore testa di serie a partire dal codice lato server –

+0

Hai mai trovare una soluzione migliore per questo? O il supporto del framework è migliorato per i reindirizzamenti lato server? Non voglio farlo se per qualche motivo è ridondante ormai –

1

Sembra che questa sarebbe una soluzione migliore - dalle demo di jQuery Mobile.

In pratica si imposta un'intestazione http nel proprio reindirizzamento e si cerca su pagecontainerload. Questo dovrebbe evitare stranezza con la cronologia del browser.

Ecco un a href per arrivare alla pagina

<a href="redirect.php?to=redirect-target.html" 
    data-role="button" data-inline="true">Redirect</a> 

In PHP si esegue questa operazione

<?php 
// ************************************************************************ 
// The two-second sleep simulates network delays, hopefully causing a 
// loading indicator message to appear on the client side. 
// ************************************************************************ 
sleep(2); 

$dst = (isset($_GET[ "to" ]) 
    ? $_GET[ "to" ] 
    : (isset($_POST[ "to" ]) 
     ? $_POST[ "to" ] 
     : false)); 
if ($dst) { 
    // ********************************************************************** 
    // The crucial line: Issue a custom header with the location to which the 
    // redirect should happen. For simplicity, we simply redirect to whatever 
    // location was specified in the request's "to" parameter, but real-world 
    // scripts can compute the destination based on server-side state. 
    // 
    // NB: This is not a HTTP redirect. As far as HTTP is concerned, this is 
    // a normal request/response cycle with a status code of 200. 
    // ********************************************************************** 
    header("X-Redirect: " . $dst); 
} 
?> 

Poi, nel tuo javascript si esegue questa operazione per intercettare l'URL e ripristinarlo.

$(document).bind("pagecontainerload", function(e, triggerData) { 

     // We can use this event to recognize that this is a redirect. The event is 
     // triggered when jQuery Mobile has finished loading a page and inserting 
     // it into the DOM, but before it has altered the browser history. In this 
     // example the server helpfully returns a custom header. However, if you 
     // don't have access to the server side, you can still examine 
     // triggerData.page, which contains the page that was loaded, but which 
     // has not yet been displayed or even recorded in the browser history. You 
     // can also examine triggerData.xhr which contains the full XMLHTTPRequest. 
     // If there is a way to recognize that this is not the expected page, you 
     // can discard it and issue a second load() call for the page that really 
     // needs to be displayed to the user, reusing the options from the overall 
     // page change process. 

     var redirect = triggerData.xhr.getResponseHeader("X-Redirect"); 
     if (redirect) { 

      // We have identified that this page is really a redirect. Thus, we load 
      // the real page instead, reusing the options passed in. It is important 
      // to reuse the options, because they contain the deferred governing this 
      // page change process. We must also prevent the default on this event so 
      // that the page change process continues with the desired page. 
      $(e.target).pagecontainer("load", redirect, triggerData.options); 
      e.preventDefault(); 
     } 
    }); 

Nota: al momento della scrittura c'era un collegamento interrotto nella pagina demo jQuery per questa demo così ho dovuto trovare su github

https://github.com/jquery/jquery-mobile/blob/master/demos/navigation-php-redirect/index.php https://github.com/jquery/jquery-mobile/blob/master/demos/navigation-php-redirect/redirect.php

La demo per la 1.3 è funziona ancora http://demos.jquerymobile.com/1.3.0/docs/examples/redirect/

Problemi correlati