重新加载提交表单Ajax调用

时间:2014-05-11 23:30:48

标签: javascript ruby-on-rails ajax forms ruby-on-rails-4

我正在使用form_for @user提交注册注册。控制器通常在保存用户以重新加载页面时处理逻辑但由于某种原因,使用javascript和ajax在保存并创建新用户时不会重新加载页面。

我假设我需要以某种方式实现此功能,以便在保存后重新加载页面?我一直在搞乱它,但我无法找出任何仍然正确提交表格的东西,但也会重新加载页面。

我目前已将底部注释掉,因此提交按钮现在可以正常工作,但我无法重新加载页面。我知道有一个重新加载的功能,但我不知道如何将它放在下面的函数中,所以它实际上正确地提交了页面。

// $(".myform").click(function() {
//     $.ajax({
//        type    : 'POST',
//        url     : '/', // like the "action" path on your form element
//        data    : $("myform").serialize(), // serialize your form data
//        success : function(response){
//            // the form was submitted successfully
//            // so now you can reload with javascript
//             location.reload();
//        }
//     });

//     // stop default behavior of submitting the form
//     return false;
// });

我要提交的表单是:

<%= form_for @user, :remote => true do |f| %>
  <div id="msform">
<!-- multistep form -->
  <!-- progressbar -->
  <ul id="progressbar">
    <li class="active">Part 1</li>
    <li>Part 2</li>
  </ul>
  <!-- fieldsets -->
  <fieldset>
    <h2 class="fs-title">Part 1</h2>
    <h3 class="fs-subtitle">Name/Email/Password</h3>
    <%= f.text_field :username, :placeholder => "Your Name"%><br />
    <%= f.text_field :email, :placeholder => "Email"%>
    <%= f.password_field :password, :placeholder => "Password" %><br />
    <input type="button" name="next" class="next action-button" value="Next" />
  </fieldset>
  <fieldset>
    <h2 class="fs-title">Part 2</h2>
    <h3 class="fs-subtitle">Your site name</h3>
    <%= f.text_field :name, :placeholder => "What do you want to be called?"%><br />
    <input type="button" name="previous" class="previous action-button" value="Previous" />
    <input type="submit" name="submit" class="submit action-button" value="Submit" />
  </fieldset>
</div>
<% end %>

1 个答案:

答案 0 :(得分:0)

使用javascript重新加载当前文档:

location.reload();

您可以尝试使用AJAX执行此操作,以便在尝试刷新之前确保您的表单已提交。

$("your_form").submit(function() {
    $.ajax({
       type    : 'POST',
       url     : 'some\path', // like the "action" path on your form element
       data    : $("your_form").serialize(), // serialize your form data
       success : function(response){
           // the form was submitted successfully
           // so now you can reload with javascript
           // using location.reload();
       }
    });

    // stop default behavior of submitting the form
    return false;
});