jQuery Mobile 301 Problemi di reindirizzamento

Sto usando jQuery 1.6.4 con jQuery Mobile 1.0.1. Ho riscontrato un problema ogni volta che si collega a una pagina che tenta di eseguire un reindirizzamento 301.jQuery Mobile 301 Problemi di reindirizzamento

Ho installato una pagina di esempio a: http://www.widgetsandburritos.com/jquery-mobile-test/

L'unica cosa in questa pagina è il jQuery Mobile include e un link a un'altra pagina che ha un redirect 301 da qualche altra parte.

<!DOCTYPE html> 
<html> 
    <head> 
     <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.css" /> 
     <script src="http://code.jquery.com/jquery-1.6.4.min.js"></script> 
     <script src="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.js"></script> 
    </head> 
    <body> 
     <a href="301test.php">301 test</a>  
    </body> 
</html>

301test.php ha il seguente contenuto:

<?php 
header("HTTP/1.1 301 Moved Permanently"); 
header("Location: 301success.html"); 
?>

Questo dovrebbe semplicemente passare il browser per 301success.html. Funziona se si va direttamente a tale URL

http://www.widgetsandburritos.com/jquery-mobile-test/301test.php

Ma quando si fa clic sul link dalla pagina utilizzando jQuery Mobile, mostra "indefinito", invece. JQuery Mobile non è attualmente in grado di gestire i reindirizzamenti?

Qualsiasi lavoro possibile?

Grazie per il vostro aiuto.

EDIT [3/23/12 12:41 CST]

I also posted this problem on the jQuery Mobile forums. Qualcuno ha consigliato di aggiungere rel = "external" al tag anchor. Funziona tecnicamente se tutto quello che stai facendo è creare un collegamento, ma non risolverà il problema se arrivi al reindirizzamento tramite qualche altro meccanismo, come una richiesta POST.

Per illustrare, ho installato un test secondario a http://www.widgetsandburritos.com/jquery-mobile-test/test2.html

<!DOCTYPE html> 
<html> 
     <head> 
       <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.css" /> 
       <script src="http://code.jquery.com/jquery-1.6.4.min.js"></script> 
       <script src="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.js"></script> 
     </head> 
     <body> 

       <form method="post" action="301test.php"> 
         <input type="submit" value="test" /> 
       </form> 

     </body> 
</html>

Invece di arrivare al 301test.php reindirizzare pagina da un collegamento, è ora la posizione di un modulo stiamo presentando a. Il contesto in cui verrebbe utilizzato sarebbe tale che se invii un modulo con errori, rimarrebbe nella stessa pagina permettendoti di correggere gli errori. Se non ci sono errori, ti reindirizza a una pagina di successo. Questo è fatto per evitare di inviare nuovamente il modulo se un utente aggiorna il proprio browser. Funziona brillantemente nelle normali applicazioni web. Ma in combinazione con jQuery Mobile non sembra funzionare.

Ho pensato di fornire un contesto aggiuntivo a chiunque altro dopo questo problema.

fonte

2012-03-22 David Stinemetze

Calcolato la risposta al mio problema. In quanto sopra, ho menzionato che questo stava causando problemi usando il tag > del modulo. Dopo aver sfogliato la documentazione di jQuery Mobile ho trovato questa pagina: http://jquerymobile.com/test/docs/forms/forms-sample.html

Il trucco qui è se stai facendo un modulo, per forzarlo a non usare AJAX. A tale scopo, aggiungi

data-ajax = "false" al tag FORM.

Quindi questo cambia

<form method="post" action="301test.php">

<form method="post" action="301test.php" data-ajax="false">

E proprio per ribadire quanto detto sopra. Se devi fare qualcosa con un link di ancoraggio, aggiungi rel = "external" ad esso.

Quindi questo cambia

<a href="301test.php">301 test</a>

<a href="301test.php" rel="external">301 test</a>

fonte

2012-03-23 05:55:53

Sono appena poco a questo me stesso e cambiando il mio tag form per includere = data-ajax 'false' fa il trucco. – Aaron

Perfetto, proprio quello di cui avevo bisogno! – user1105056

Il problema è più profondo. Dai un'occhiata a here o here.

Sembra che l'oggetto XMLHttpRequest (quello utilizzato per eseguire richieste AJAX) gestisca i reindirizzamenti autonomamente e restituisca la risposta finale. Ciò significa che jQuery Mobile non può sapere che dovrebbe aggiornare l'URL.

La soluzione è utilizzare l'attributo data-url nella pagina finale. Costringe jQuery Mobile ad aggiornare l'URL nel browser. Una sorta di soluzione alternativa, ma lungi dall'essere un hack.

Tra l'altro ci sono più problemi con jQuery Mobile, AJAX e reindirizzamenti - ad esempio se si fa clic sul pulsante Indietro del browser dopo un reindirizzamento AJAX, jQuery Mobile (fino a 1.1) potrebbe produrre una pagina finale sotto l'URL di la pagina di reindirizzamento. Pertanto utilizzando data-ajax = "false" è una scelta saggia.

EDIT:

Ma anche data-ajax = "false" non è una soluzione a prova di proiettile. Usandolo si divide la tua app mobile in più pagine del browser, che porta ogni sorta di differenze tra i browser alla festa. Ad esempio, Firefox ha così chiamato bf cache mentre Chrome doesn't. Questo è un vero disastro e sto iniziando a pensare che qualcosa come Sencha Touch sia molto più adatto allo sviluppo di pagine che fingono di essere app per dispositivi mobili.

EDIT 2:

In alternativa, si potrebbe evitare di regolare l'invio di moduli e utilizzare proprio codice AJAX per questo e quindi passare le pagine in base al risultato, ma non posso resistere a pensare che è il 2012 e queste cose dovrebbero automatizzato e il lavoro perfettamente senza sudare

fonte

2012-08-09 09:18:20

Attualmente sto sviluppando un'applicazione, ma anche se sono connesso, resto nella pagina di accesso e non viene reindirizzato. Ho usato il data-ajax = "false"

questo è il codice del modulo:

<section id="login"> 
      <h2>Want to take a ride? <span>Login</span></h2> 
      <form action="<?php echo $_SERVER['PHP_SELF'];?>" method="post" data-ajax="false"> 
        <?php if(!empty($feedback_error)): ?> 
<div id="feedback_error"> 
<p><h1><?php echo $feedback_error ?></h1></p> 
</div> 
<?php endif; ?> 
       <input id="username" type="text" name="username" placeholder="username" /> 
       <input id="password" type="password" name="password" placeholder="password" /> 

       <p>Not yet signed up? <a href="register.php" >Register</a></p> 

       <input type="submit" name="btnLogin" data-theme="b" value="Sign in"> 
      </form> 
     </section>

fonte

2013-12-10 14:35:57

Questa è una domanda? È necessario iniziare una nuova domanda, se lo è (e probabilmente vorrai pubblicare più informazioni). –

jQuery Mobile 301 Problemi di reindirizzamento

risposta

Problemi correlati