2011-07-02 36 views
22

Khi tôi chuyển hướng trong bài đăng quay lại trang hiển thị biểu mẫu, JQuery di động hiển thị cho tôi kết quả thay vì biểu mẫu.Lỗi khi chuyển hướng trong JQuery Mobile

phép nói rằng tôi có ba nguồn:

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

Sau khi tôi nhận được đến cảm ơn! trang, nếu tôi cố gắng trở về nhà, và sau đó đi đến /redirect_to Tôi nhận được nội dung của /thank_you thay vì hình thức /redirect_to, nếu tôi làm mới trang, tôi nhận được biểu mẫu.

Vì vậy, thay vì xem biểu mẫu đến redirect_to Tôi thấy trang thank_you.

Đây là mã trong Sinatra nếu bạn không hiểu nó, tại thời điểm này tôi sẽ viết lại nó trong Flask, Snap, Rails, Django (ứng dụng của tôi là trên Django) ... nhưng nó nên đủ tốt để đọc. Đây là đoạn mã trên Github (Kể từ StackOverflow không phát hiện ruby ​​của tôi): https://gist.github.com/1061639

Để chạy các ứng dụng về cơ bản bạn cài đặt Sinatra: gem install sinatra

Và chạy nó: ./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, thực sự tốt đẹp và dễ dàng để kiểm tra mã ví dụ. – Heikki

+0

Cảm ơn! Tôi không thấy điều này cho đến khi câu hỏi được "phổ biến" :-) – igorgue

Trả lời

27

Chỉ định data-url cho trang thank_you của bạn. Điều đó buộc thay đổi url khi gửi biểu mẫu.

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

Tôi tìm thấy thông tin đó từ tài liệu theo Redirects and linking to directories.

Điều này cũng cho phép bạn trả về các url thay đổi do chuyển hướng, ví dụ: bạn có thể đăng biểu mẫu lên "/login.html" nhưng trả lại trang từ url "/ tài khoản" sau gửi thành công.

+2

Câu trả lời này đã lưu cả tháng của tôi, CẢM ƠN BẠN! Đối với những người khác có thể bị mắc kẹt về vấn đề này, bạn nên gán giá trị của request.fullpath cho url dữ liệu trên trang bố cục chính nếu bạn có. Đối với tôi, nó có thể giải quyết hơn 5 lỗi cùng một lúc. –

Các vấn đề liên quan