2011-07-02 10 views
22

フォームに表示されるポストにリダイレクトすると、JQueryモバイルでフォームの代わりに結果が表示されます。私はありがとうございましたに取得した後JQuery Mobileのリダイレクトでエラーが発生しました

/ => 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!" 

は、私は3つのリソースを持っているとしましょう!ページ私は帰宅しようとすると/redirect_toに行く/redirect_toの代わりに/thank_youの内容を取得しますが、私はフォームを取得するページを更新する場合。

redirect_toにフォームを表示する代わりに、thank_youページが表示されます。

ここでは、コードが、それはフラスコ、スナップ、レール、ジャンゴ(私のアプリはジャンゴである)で、あなたがそれを理解していない場合は、この時点で私は再度書きますシナトラである...しかし、読むのに十分なはずです。 (StackOverflowのが私のルビーを検出していないので)ここでのGithub上のコードは次のとおりです。https://gist.github.com/1061639

あなたは基本的にシナトラアプリインストールを実行するには:gem install sinatra

そして、それを実行します。指定./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は、コード例をテストするのがとても素敵で簡単です。 – Heikki

+0

ありがとう!質問が "人気"になるまで私はこれを見ませんでした:-) – igorgue

答えて

27

data-urlあなたのthank_youページ。フォーム提出時に強制的にURLが変更されます。

この情報は、文書のRedirects and linking to directoriesにあります。

これにより、リダイレクトの結果として変更されるURLを返すこともできます。たとえば、フォームを「/login.html」に投稿しても、「/ account」の後にURL「/ account」からページを返す可能性があります。成功した提出。

+2

この回答は私の月全体を保存しました、ありがとうございました!これに固執している可能性がある他の人には、マスタレイアウトページがある場合は、request.fullpathの値をdata-urlに割り当てることをお勧めします。私にとっては、たぶん5つ以上のバグを一度に解決していました。 –

関連する問題