2011-07-02 9 views
22

Cuando redirecciono en una publicación que vuelve a la página que muestra el formulario, JQuery Mobile me muestra los resultados en lugar del formulario.Error con redireccionamientos en JQuery Mobile

Digamos que tengo tres recursos:

/ => Just shows a link to the /redirect_to resource, this is to test 
/redirect_to => GET: Shows a form to say your name in /thank_you 
/redirect_to => POST: Just redirects to /thank_you showing the name that you input 
/thank_you => GET: Shows a text "Thank you name!" 

Después llego a la gracias! página, si trato de volver a casa, y luego vaya a /redirect_to obtengo el contenido de /thank_you en lugar de la forma de /redirect_to, si actualizo la página obtengo el formulario.

Entonces, en lugar de mirar el formulario a redirect_to veo la página thank_you.

Aquí está el código en Sinatra si no lo entiende, en este punto voy a volver a escribir en el frasco, a presión, rieles, Django (mi aplicación está en Django) ... pero debería ser lo suficientemente bueno para leer. Aquí está el código en Github (Desde stackoverflow no detecta el rubí): https://gist.github.com/1061639

Para ejecutar la aplicación que básicamente instala Sinatra: gem install sinatra

y ejecutarlo: ./jquerymobile_redirect_error.rb

#!/usr/bin/env ruby 

require 'rubygems' 
require 'sinatra' 

get '/' do 
    <<-end_page 
<!DOCTYPE html> 
<html> 
    <head> 
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0b1/jquery.mobile-1.0b1.min.css" /> 
    <script src="http://code.jquery.com/jquery-1.6.1.min.js"></script> 
    <script src="http://code.jquery.com/mobile/1.0b1/jquery.mobile-1.0b1.min.js"></script> 
    </head> 
    <body> 
    <div data-role="page"> 
     <div data-role="header" data-position="fixed"> 
     <h1>JQuery Error</h1> 
     <a href="/" data-icon="home">Home</a> 
     <a href="/" data-icon="delete">Logout</a> 
     </div><!-- /header --> 

     <div data-role="content"> 
     <h1>Go to /redirect_to <a href="/redirect_to">here</a>. 
     </div><!-- /content --> 

     <div data-role="footer" data-position="fixed"> 
     <h1>Footer</h1> 
     </div><!-- /footer --> 
    </div><!-- /page --> 
    </body> 
</html> 
    end_page 
end 

get '/redirect_to' do 
    <<-end_page 
<!DOCTYPE html> 
<html> 
    <head> 
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0b1/jquery.mobile-1.0b1.min.css" /> 
    <script src="http://code.jquery.com/jquery-1.6.1.min.js"></script> 
    <script src="http://code.jquery.com/mobile/1.0b1/jquery.mobile-1.0b1.min.js"></script> 
    </head> 
    <body> 
    <div data-role="page"> 
     <div data-role="header" data-position="fixed"> 
     <h1>JQuery Error</h1> 
     <a href="/" data-icon="home">Home</a> 
     <a href="/" data-icon="delete">Logout</a> 
     </div><!-- /header --> 

     <div data-role="content"> 
     <form action="/redirect_to" method="post" accept-charset="utf-8"> 
      <p><label for="name">Name</label><input type="text" id="name" name="name" value="" id="name" placeholder="input your name"> 
      <p><input type="submit" value="Redirect to /thank_you &rarr;"></p> 
     </form> 
     </div><!-- /content --> 

     <div data-role="footer" data-position="fixed"> 
     <h1>Footer</h1> 
     </div><!-- /footer --> 
    </div><!-- /page --> 
    </body> 
</html> 
    end_page 
end 

post '/redirect_to' do 
    redirect "/thank_you/#{params[:name]}" 
end 

get '/thank_you/:name' do |name| 
    <<-end_page 
<!DOCTYPE html> 
<html> 
    <head> 
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0b1/jquery.mobile-1.0b1.min.css" /> 
    <script src="http://code.jquery.com/jquery-1.6.1.min.js"></script> 
    <script src="http://code.jquery.com/mobile/1.0b1/jquery.mobile-1.0b1.min.js"></script> 
    </head> 
    <body> 
    <div data-role="page"> 
     <div data-role="header" data-position="fixed"> 
     <h1>JQuery Error</h1> 
     <a href="/" data-icon="home">Home</a> 
     <a href="/" data-icon="delete">Logout</a> 
     </div><!-- /header --> 

     <div data-role="content"> 
     <h1>Thanks #{name}!</h1> 
     </div><!-- /content --> 

     <div data-role="footer" data-position="fixed"> 
     <h1>Footer</h1> 
     </div><!-- /footer --> 
    </div><!-- /page --> 
    </body> 
</html> 
    end_page 
end 
+2

Btw, ejemplo de código realmente agradable y fácil de probar. – Heikki

+0

Gracias! No vi esto hasta que la pregunta se volvió "popular" :-) – igorgue

Respuesta

27

Especificar data-url para su página thank_you. Eso fuerza el cambio de url en el formulario submit.

<div data-role="page" data-url="/thank_you"> 

He encontrado esa información a partir de los documentos bajo Redirects and linking to directories.

Esto también le permite devolver urls que cambian como resultado de una redirección, por ejemplo, puede enviar un formulario a "/login.html", pero volver una página de la URL "/ cuenta" después de una presentación exitosa.

+2

Esta respuesta me salvó todo el mes, ¡GRACIAS! Para otras personas que podrían estar estancadas en esto, generalmente es una buena idea asignar el valor de request.fullpath a la url de datos en una página de diseño principal si tiene una. Para mí, probablemente resolvió 5+ errores a la vez. –