0

このプラグインをRails3.2アプリにスタイリングしようとしていますが、問題が発生しています。http://www.jankoatwarpspeed.com/post/2009/09/28/webform-wizard-jquery.aspx

[送信]をクリックしてもフォームがモデルに保存されず、最初のステップにリダイレクトされます。..。

これが私のビューコードです：

     <h1>Tell us a little about yourself.</h1>


    <form id="SignupForm" action="">
    <fieldset>
    <legend>Personal Information</legend>
    <%= simple_form_for @user do |f| %>

      <%= f.input :city %>
      <%= f.input :address %>
      <%= f.input :zipcode %>
      <%= f.input :date_of_birth, :as => :date, :start_year => Date.today.year - 90,
        :end_year => Date.today.year - 12,
        :order => [:month, :day, :year ] %>
      <%= f.input :gender, :collection => ['male','female'] %>
      </fieldset>

      <fieldset>
      <legend>Interests & Holidays</legend>
      <h2>Select your top 3 interests..</h2>
      <label class="checkbox">


      <%= f.association :interests, :as => :check_boxes, :label => false %>
      </label>
      <br></br>
      <h2>What holidays do you celebrate?</h2>
        <label class="checkbox">
        <%= f.association :holidays, :as => :check_boxes, :label => false %>

        </label>
        <br></br>
        </fieldset>
        <fieldset>
        <legend>Friends Birthdays</legend>
        <h2>Add up to 10 friends birthdays that you would like to remember..</h2>
        <br></br>
        <%= f.simple_fields_for :friends do |friend_f| %>
          <div id="input1" style="margin-bottom:4px;" class="clonedInput">
          <%= friend_f.input :name %>
          <%= friend_f.input :dob, :label => :Birthday, :as => :date, :start_year => Date.today.year - 90,
            :end_year => Date.today.year - 12,
            :order => [:month, :day, :year ] %>
          <%= f.input :gender, :collection => ['male','female'] %>

          <input type="button" id="btnAdd" value="add another name" />
          <input type="button" id="btnDel" value="remove name" />
          </div>
        <% end %>


        <%= f.button :submit %>
        <%end%>
        </fieldset>
    </div>

そしてここにjsがあります：

(function($) {
    $.fn.formToWizard = function(options) {
        options = $.extend({  
            submitButton: "" 
        }, options); 

        var element = this;

        var steps = $(element).find("fieldset");
        var count = steps.size();
        var submmitButtonName = "#" + options.submitButton;
        $(submmitButtonName).hide();

        // 2
        $(element).before("<ul id='steps'></ul>");

        steps.each(function(i) {
            $(this).wrap("<div id='step" + i + "'></div>");
            $(this).append("<p id='step" + i + "commands'></p>");

            // 2
            var name = $(this).find("legend").html();
            $("#steps").append("<li id='stepDesc" + i + "'>Step " + (i + 1) + "<span>" + name + "</span></li>");

            if (i == 0) {
                createNextButton(i);
                selectStep(i);
            }
            else if (i == count - 1) {
                $("#step" + i).hide();
                createPrevButton(i);
            }
            else {
                $("#step" + i).hide();
                createPrevButton(i);
                createNextButton(i);
            }
        });

        function createPrevButton(i) {
            var stepName = "step" + i;
            $("#" + stepName + "commands").append("<a href='#' id='" + stepName + "Prev' class='prev'>< Back</a>");

            $("#" + stepName + "Prev").bind("click", function(e) {
                $("#" + stepName).hide();
                $("#step" + (i - 1)).show();
                $(submmitButtonName).hide();
                selectStep(i - 1);
            });
        }

        function createNextButton(i) {
            var stepName = "step" + i;
            $("#" + stepName + "commands").append("<a href='#' id='" + stepName + "Next' class='next'>Next ></a>");

            $("#" + stepName + "Next").bind("click", function(e) {
                $("#" + stepName).hide();
                $("#step" + (i + 1)).show();
                if (i + 2 == count)
                    $(submmitButtonName).show();
                selectStep(i + 1);
            });
        }

        function selectStep(i) {
            $("#steps li").removeClass("current");
            $("#stepDesc" + i).addClass("current");
        }

    }
})(jQuery);
4

1 に答える 1

1

これが私が問題を解決した方法です。私は最初にformToWizard.jsファイルのオプションを次のように編集しました。

.options = $ .extend（{submitButton："submit"}

次に、私の見解では、以下に示すようにフォーム要素を変更しました。

<script type="javascripts" src="formToWizard.js"></script>
  <form id="SignupForm" action= "users#create" method="post">
    <%= simple_form_for @user do |f| %>
     <fieldset><div id='step'>

       #multiple input fields

     <%= f.submit "Create my account", class: "btn btn-large btn-primary" %>
   <% end %>
  </div></fieldset>
</form>

これを使用してユーザーをサインアップしたので、フォーム要素がusers＃createパスを指していることを確認してから、メソッド「post」を使用しました。コントローラで作成アクションを実行するために使用するルートがわからない場合は、rakeルートを実行し、それを使用してフォームの「アクション」フィールドと「メソッド」フィールドに入力してください。

于 2012-07-05T20:13:09.803 に答える