2

現在、私のウェブサイトで段階的な登録プロセスを作成しています。

プロセス全体は、ここでキャストされたレールで見られるのとまったく同じセットアップで正常に作成されました: http://railscasts.com/episodes/217-multistep-forms

すべてが機能するようになった後、すべてを Ajax に変換しました。各ステップの送信ボタンまたはフォームのいずれかを使用して、次のように単純に追加しました。

remote:true

次に、適切な応答処理を追加した後:

respond_to do|format|
  format.js { render 'new' }
  format.html { render 'new' }
end

new.js.erb には次のものがあります。

$('#steps_content').fadeOut('fast', function(){
  $('#steps_content').html("<%= j render "#{@subscription.current_step}_step" %>", 
     $('#steps_content').fadeIn('fast', function(){})
  )
});

ここに new.html.erb があります:

<div id='steps_content' >
   <%= render "#{@subscription.current_step}_step" %>
</div>

ステップバイステップでAjax化！

とにかく、すべてがAjax化されているので、ブラウザの戻るボタンを前のステップに移動させ、ページに戻るボタンを持たせようとしています。

これを new.js.erb の先頭に追加することで、そこにたどり着きます。

history.pushState(
   null, 
   '', 
   '#step=<%= j "#{@subscription.current_step}" %>'
);

そして、これは最後まで：

if (!$(window) || !$(window).data('events') || 
    !$(window).data('events')['popstate']) {

      $(window).bind('popstate', function() {
        $.getScript(location.href);
      });

}

これは私にかなりの問題を引き起こしています！

現在のセットアップでは: JQuery アニメーションが起動します。と思ったら、同じステップにフェードイン、フェードアウトするだけです。発生する理由は、すべてのステップ コードが作成アクション (投稿) にあり、戻るボタンが起動する新しいアクション (取得) ではないためであることがわかりました。そこにコードを入れても、ブラウザの戻るボタンは :back_button パラメータをスローしません。

戻るボタンを Ajax で動作させるためにかなりの調査を行ってきましたが、私が見つけたすべてのケースが実際には当てはまりません! これは、私の設定全体がコントローラ コードの current_step を変更したためだと思います。コントローラーのコードを新しいアクションに入れても、:back_button パラメーターがないため、前のステップは読み込まれません。

私の最初の質問は次のようになると思います :ブラウザの戻るボタンが押されたときにのみ :back_button パラメータを追加する方法はありますか?

現在のコードはすべて機能するので、それは理想的です。何らかの形で ajax send コールバックにバインドすることでそのパラメーターを追加できることはわかっていますが、ブラウザーの戻るボタンが押されたときにのみ発生させたいと思っています。何とか history.back にバインドできるのではないかと思ったのですが、それは不可能のようです。

私の主な質問: ブラウザーを適切な手順に戻すには、どうすればこれを修正できますか?

現在のステップを設定するためにアンカー パラメータを何らかの方法で読み取ることはできますか?

各ステップに進むために使用する方法全体を変更する必要がありますか?

多分私は失敗して何か間違ったことをしているのですか？

私はとても近くにいるように感じます！

仲間のコーダー、私を正しい方向に向けるガイド、またはよりきれいな代替方法も役立つでしょう。また、これを達成するために既製のプラグインを使用したくありません。

さらに情報が必要な場合は、お知らせください。

ありがとう！

編集：

私はこの質問を開いて、強力な裏付けがあり、本番環境で使用するのに十分にサポートされている適切な既製のプラグイン/宝石/ライブラリを含める可能性があります.

4

3 に答える 3

2

私は jQuery BBQ と呼ばれる jQuery プラグインを使用しています。

基本的に、ユーザーが現在のページを離れるたびに、(通常は ajax の状態を記録するために) データの配列をプッシュできます。ユーザーが戻るボタンをクリックすると、状態配列がポップされ、配列に基づいて ajax 状態を復元するイベント ハンドラーを作成できます。

いずれにせよ、一年前に使い始めて以来、サポートの問題が発生したことは一度もないので、一見の価値があります.. http://benalman.com/code/projects/jquery-bbq/docs/files/jquery-ba- bbq-js.html

また、最新のブラウザー (サファリを含む) でもテストされています。確かに、Safari で hashchange イベントがサポートされていないことを回避するために、どのような変更が導入されているかはわかりませんが、とにかく問題なく動作します。

于 2012-07-11T01:06:52.237 に答える
0

プラグイン Jquery Adress でそれを行うことができます: http://www.asual.com/jquery/address/

于 2012-07-17T15:24:28.250 に答える