0

我试图将此插件样式设置到我的 rails 3.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 回答