提交Rails的形式使用jQuery和Ajax形式、Rails、Ajax、jQuery

2023-09-10 16:30:15 作者:花落彼岸

编辑:想通了这样问一个相关的问题

Figured it out so asking a related question.

这里是我的JavaScript

here's my Javascript

jQuery.ajaxSetup({
    'beforeSend': function(xhr) {
        xhr.setRequestHeader("Accept", "text/javascript")
    }
})

jQuery.fn.submitWithAjax = function() {
    this.submit(function() {
        $.post(this.action, $(this).serialize(), null, "script");
        return false;
    })
    return this;
};

    $('.error').hide();
$("#business_submit").click(function() {
    // validate and process form here

    $('.error').hide();
    var name = $("input#business_name").val();
    if (name == ""  || name == "Required Field") {
        $('#namelabel').show()
        $("#business_name").focus();
        return false;
    }
    var address = $("#business_address").val();
    if (address == ""  || address == "Required Field") {
        $('#addresslabel').show();
        $("#business_address").focus();
        return false;
    }
    var city = $("#business_city").val();
    if (city == "" || city == "Required Field") {
        $('#citylabel').show();
        $('#business_city').focus();
        return false;
    }
    var state = $("#business_state").val();
    if (state == ""  || state == "Required Field") {
        $('#statelabel').show();
        $("#business_state").focus();
        return false;
    }
    var zip = $("#business_zip").val();
    if (zip == ""  || zip == "Required Field") {
        $('#ziplabel').show();
        $("#business_zip").focus();
        return false;
    }
    var phone = $("#business_phone").val();
    if (phone == ""  || phone == "Required Field") {
        $('#phonelabel').show();
        $("#business_phone").focus();
        return false;
    }

    var category = $("#business_business_category_id").val();
    if (category == " - Choose one - ") {
        $('#categorylabel').show();
        $("#business_business_category_id").focus();
        return false;
    }


   $.ajax ({
        type: "POST",
        data: form.serialize()
    });
    return false;
})

在阿贾克斯code类火灾,其中包含我的create.js.erb文件

the .ajax code fires my create.js.erb file which contains

$("#new_business").submitWithAjax();
$("#new_business")[0].reset();
$("#new_business").hide();

下面是桌子下面的表格。

Here's the table below the form.

<div id="unapproved">
  <table width="650" align="center" cellpadding="6" cellspacing="0">

    <tr>
      <td width="150"><a class="Contact<%=h @business.id %>" href="#"><%=h @business.name %></a></td>
      <td width="150"><%=h @business.address %></td>
      <td width="100"><%=h @business.business_category.name %></td>
      <td width="200"><%=h @business.description %></td>
      <td width="50"><%= link_to(image_tag('/images/accept.png', :alt => 'Approve'), :id =>@business.id, :action => 'approve') %>
        <a class="Edit<%=h @business.id %>" href="#"><img src="/images/pencil.png" alt="Edit" /></a>
      <%= link_to(image_tag('/images/bin.png', :alt => 'Remove'), @business, :confirm => 'Are you sure?', :method => :delete) %></td>
    </tr>
  </table>
</div>

现在我唯一的问题是,我下面的表格表不获取动态刷新。它增加了数据到数据库罚款,所有验证的伟大工程。但我必须刷新页面。我尝试添加像

Now my only problem is that the table below my form isn't getting refreshed dynamically. It adds the data to the database fine and all the validation works great. But I have to refresh the page. I tried adding something like

$("#unapproved").append("<%= escape_javascript(render(:file => 'business')) %>");

但只是打破它。

but that just breaks it.

推荐答案

工作!我只是试图模仿railscast 136.我我的表扔进一个名为_unapproved.html.erb。在我的索引我的表替换为:

Working! I just tried to mimic the railscast 136. I threw my table into a file called _unapproved.html.erb. In my index I replaced the table with:

<div id="unapproved">
  <%= render :partial => "unapproved" %>
</div>

然后在我的create.js.erb,我有:

And then in my create.js.erb, I had:

$("#unapproved").append("<%= escape_javascript(render(:partial => "unapproved")) %>");

在游戏。 GG!

Game over. GG!