如何让这个 AJAX 请求在我的 Ruby on Rails 表预订应用程序中工作？答案

【问题标题】：How do I get this AJAX request to work in my Ruby on Rails Table Reservation App?如何让这个 AJAX 请求在我的 Ruby on Rails 表预订应用程序中工作？
【发布时间】：2016-04-10 02:56:33
【问题描述】：

好的，伙计们，这个问题很长，但我会尽量保持简洁。

我正在尝试创建一个餐桌预订应用程序，如下所示：

当您点击地图中的任何摊位或餐桌时，“餐桌 ID”字段将填满您刚刚选择的餐桌编号（即餐桌编号“A1”等）。之后，一旦您点击“创建预订”，表格就会变为黄色，表示当前登录的用户现在正在预订表格。

该应用程序运行良好，我能够让表格以黄色突出显示（以显示成功预订）并让用户的电子邮件在预订时与表格相关联。不过有问题。

有两种类型的帐户，“用户”（客户）和“所有者”（您当前尝试预订的餐厅的实际所有者）。在用户端，他们可以看到保留的表，但我希望所有者也看到用户也进行了预订（我希望它动态更新，用户创建预订的那一刻，表以黄色突出显示表明预订很好，业主也可以）。

有人告诉我 AJAX 是解决这个问题的方法，但我以前从未使用过 AJAX，而且我正在查看的教程也不是完全适合我正在制作的项目，这是有点独特。

这是我到目前为止的代码，也是我迄今为止尝试过的代码。

这是 Reservations / Index.html.erb 文件

<div class="house">

    <%= image_tag("restaurant-floor.jpg", class: "floor") %>

    <%= content_tag(:div, nil, remote: true, class: "top-right-booth-empty") %>

    <%= image_tag("toprightbooth.png", class: "top-right-booth") %>

    <%= content_tag(:div, nil, remote: true, class: "top-left-booth-empty") %>

    <%= image_tag("northleft.png", class: "top-left-booth") %>

    <%= content_tag(:div, nil, remote: true, class: "diagonal-upper-left-booth-empty") %>

    <%= image_tag("upperleftbooth.png", class: "diagonal-upper-left-booth") %>

    <%= content_tag(:div, nil, remote: true, class: "left-booth-empty") %>

    <%= image_tag("leftbooth.png", class: "left-booth") %>

    <%= content_tag(:div, nil, remote: true, class: "diagonal-bottom-left-booth-empty") %>

    <%= image_tag("bottomleftbooth.png", class: "diagonal-bottom-left-booth") %>

    <%= content_tag(:div, nil, remote: true, class: "bottom-left-booth-empty") %>

    <%= image_tag("bottomleft.png", class: "bottom-left-booth") %>


    <%= content_tag(:div, nil, remote: true, class: "bottom-right-booth-empty") %>

    <%= image_tag("bottomrightbooth.png", class: "bottom-right-booth") %>

    <%= content_tag(:div, nil, remote: true, class: "round-table-left-bottom-empty") %>

    <%= image_tag("roundtable.png", class: "round-table-left-bottom") %>


    <%= content_tag(:div, nil, remote: true, class: "round-table-left-top-empty") %>

    <%= image_tag("roundtable.png", class: "round-table-left-top") %>


    <%= content_tag(:div, nil, remote: true, class: "round-table-middle-top-left-empty") %> 

    <%= image_tag("roundtable.png", class: "round-table-middle-top-left") %>


    <%= content_tag(:div, nil, remote: true, class: "round-table-middle-top-middle-empty") %> 

    <%= image_tag("roundtable.png", class: "round-table-middle-top-middle") %>


    <%= content_tag(:div, nil, remote: true, class: "round-table-middle-top-right-empty") %> 

    <%= image_tag("roundtable.png", class: "round-table-middle-top-right") %>

    <%= content_tag(:div, nil, remote: true, class: "round-table-middle-bottom-left-empty") %> 

    <%= image_tag("roundtable.png", class: "round-table-middle-bottom-left") %>

    <%= content_tag(:div, nil, remote: true, class: "round-table-middle-bottom-middle-empty") %> 

    <%= image_tag("roundtable.png", class: "round-table-middle-bottom-middle") %>

    <%= content_tag(:div, nil, remote: true, class: "round-table-middle-bottom-right-empty") %> 

    <%= image_tag("roundtable.png", class: "round-table-middle-bottom-right") %>


    <%= render 'reservation_form' %>

</div>

这是预订表格：

<%= form_for @reservation, remote: true do |f| %>
    <%= f.label :num_of_people, "Number of Guests"%>
  <%= f.number_field :num_of_people %>
  <br />
  <br />
  <%= f.label :reservation_time, "Reservation Time" %>
  <%= f.time_field :reservation_time %>
  <br />
  <br />
  <%= f.label :table_id, "Table ID"%>
<%= f.text_field :table_id, value: "" %>
  <br />
  <br />
  <%= f.submit %>
<% end %>

这是 CSS

.navbar-nav img{
    margin-top: 3%;
    width: 27%;
}

.wrapper{
    margin-top: 50px;
}

#signup-popup {
    border: 1px solid red;
    width: 35%;
    margin: auto;
    height: 600px;
    text-align: center;
    vertical-align: middle;
    display: none;
}

#signin-popup {
    border: 1px solid red;
    width: 35%;
    margin: auto;
    height: 600px;
    text-align: center;
    vertical-align: middle;
    display: none;
}

#signin-popup p{
    margin-top: 10%;
}

#signin-popup img{
    width: 30%;
    top:0;
    bottom: 0;
    left: 0;
    right: 0;
}

#signup-popup p{
    margin-top: 10%;
}

#signup-popup img{
    width: 30%;
    top:0;
    bottom: 0;
    left: 0;
    right: 0;
}

#flash{
    position: absolute;
    top: 0px;
    left: 0px;
    margin: 0 auto;
    text-align: center;
    z-index: 100;
    width: 100%;
    border: 1px solid red;
    display: none;
}


.navbar-default{
    padding-right: 15%;
    padding-left: 15%;
    position: fixed;
    z-index: 9999;
    width: 100%;
    top: 0;
}


.banner{
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 66%;
    height: 65vh;
}

.floor{
    margin-top: 124px;
    width: 1100px;
    margin-left: 300px;
}

.top-right-booth{
    position: absolute;
    top: 229px;
    left: 614px;
    width: 100px;
    display: none;
    cursor: pointer;
    cursor: hand;
}

.top-right-booth-empty{
    position: absolute;
    top: 229px;
    left: 614px;
    width: 100px;
    height: 90px;
    cursor: pointer;
    cursor: hand;
}


.top-left-booth{
    position: absolute;
    top: 238px;
    left: 452px;
    width: 100px;
    display: none;
    cursor: pointer;
    cursor: hand;   

}

.top-left-booth-empty{
    position: absolute;
    top: 238px;
    left: 452px;
    width: 100px;
    height: 90px;
    cursor: pointer;
    cursor: hand;

}

.diagonal-upper-left-booth{
    position: absolute;
    top: 265px;
    left: 338px;
    width: 100px;
    display: none;
    cursor: pointer;
    cursor: hand;
}

.diagonal-upper-left-booth-empty{
    position: absolute;
    top: 265px;
    left: 338px;
    width: 100px;
    height: 90px;
    cursor: pointer;
    cursor: hand;

}

.left-booth{
    position: absolute;
    top: 401px;
    left: 307px;
    width: 80px;
    display: none;
    cursor: pointer;
    cursor: hand;
}

.left-booth-empty{
    position: absolute;
    top: 401px;
    left: 307px;
    width: 80px;
    height: 90px;
    cursor: pointer;
    cursor: hand;

}

.diagonal-bottom-left-booth{
    position: absolute;
    top: 522px;
    left: 338px;
    width: 100px;
    display: none;
    cursor: pointer;
    cursor: hand;   
}

.diagonal-bottom-left-booth-empty{
    position: absolute;
    top: 528px;
    left: 338px;
    width: 100px;
    height: 90px;
    cursor: pointer;
    cursor: hand;
}

.bottom-left-booth{
    position: absolute;
    top: 566px;
    left: 454px;
    width: 100px;
    display: none;
    cursor: pointer;
    cursor: hand;   
}

.bottom-left-booth-empty{
    position: absolute;
    top: 566px;
    left: 454px;
    width: 100px;
    height: 90px;
    cursor: pointer;
    cursor: hand;   
}

.bottom-right-booth{
    position: absolute;
    top: 578px;
    left: 615px;
    width: 100px;
    display: none;
    cursor: pointer;
    cursor: hand;   
}

.bottom-right-booth-empty{
    position: absolute;
    top: 578px;
    left: 615px;
    width: 100px;
    height: 90px;
    cursor: pointer;
    cursor: hand;
}

.round-table-left-bottom{
    position: absolute;
    top: 465px;
    left: 446px;
    width: 80px;
    display: none;
    cursor: pointer;
    cursor: hand;   
}

.round-table-left-bottom-empty{
    position: absolute;
    top: 465px;
    left: 446px;
    width: 80px;
    height: 80px;
    cursor: pointer;
    cursor: hand;
}

.round-table-left-top{
    position: absolute;
    top: 366px;
    left: 446px;
    width: 80px;
    display: none;
    cursor: pointer;
    cursor: hand;   
}

.round-table-left-top-empty{
    position: absolute;
    top: 366px;
    left: 446px;
    width: 80px;
    height: 80px;
    cursor: pointer;
    cursor: hand;
}

.round-table-middle-top-left{
    position: absolute;
    top: 350px;
    left: 700px;
    width: 80px;
    display: none;
    cursor: pointer;
    cursor: hand;   
}

.round-table-middle-top-left-empty{
    position: absolute;
    top: 350px;
    left: 700px;
    width: 80px;
    height: 80px;
    cursor: pointer;
    cursor: hand;
}

.round-table-middle-top-middle{
    position: absolute;
    top: 350px;
    left: 805px;
    width: 80px;
    display: none;
    cursor: pointer;
    cursor: hand;   
}

.round-table-middle-top-middle-empty{
    position: absolute;
    top: 350px;
    left: 805px;
    width: 80px;
    height: 80px;
    cursor: pointer;
    cursor: hand;   
}

.round-table-middle-top-right{
    position: absolute;
    top: 350px;
    left: 920px;
    width: 80px;
    display: none;
    cursor: pointer;
    cursor: hand;   
}

.round-table-middle-top-right-empty{
    position: absolute;
    top: 350px;
    left: 920px;
    width: 80px;
    height: 80px;
    cursor: pointer;
    cursor: hand;
}

.round-table-middle-bottom-left{
    position: absolute;
    top: 450px;
    left: 700px;
    width: 80px;
    display: none;
    cursor: pointer;
    cursor: hand;   
}

.round-table-middle-bottom-left-empty{
    position: absolute;
    top: 450px;
    left: 700px;
    width: 80px;
    height: 80px;
    cursor: pointer;
    cursor: hand;
}

.round-table-middle-bottom-middle{
    position: absolute;
    top: 450px;
    left: 807px;
    width: 80px;
    display: none;
    cursor: pointer;
    cursor: hand;   
}

.round-table-middle-bottom-middle-empty{
    position: absolute;
    top: 450px;
    left: 807px;
    width: 80px;
    height: 80px;
    cursor: pointer;
    cursor: hand;
}

.round-table-middle-bottom-right{
    position: absolute;
    top: 450px;
    left: 920px;
    width: 80px;
    display: none;
    cursor: pointer;
    cursor: hand;   
}

.round-table-middle-bottom-right-empty{
    position: absolute;
    top: 450px;
    left: 920px;
    width: 80px;
    height: 80px;
    cursor: pointer;
    cursor: hand;
}

#new_reservation{
    text-align: center;
    padding: 5px;
    margin: 2%;
    width: 40%;
    margin: 0 auto;
}

#myform {
    text-align: center;
    padding: 5px;
    border: 1px solid red;
    margin: 2%;
    width: 40%;
    margin: 0 auto;
}
.qty {
    width: 40px;
    height: 25px;
    text-align: center;
}
input.qtyplus { width:25px; height:25px;}
input.qtyminus { width:25px; height:25px;}

这是 JS 文件：

$(document).ready(function() {
    $("#flash").fadeOut(1800);
    $(".signup").on("click",function() {
        $("#signup-popup").show();
    });
    $(".signin").on("click",function() {
        $("#signin-popup").show();
    });

    $(".top-right-booth-empty").on("click",function() {
        $(".top-right-booth").show();
        $(".top-right-booth").on("click",function() {
            $(".top-right-booth").hide();
        });
    });


    $(".top-left-booth-empty").on("click",function() {
        $(".top-left-booth").show();
        $(".top-left-booth").on("click",function() {
            $(".top-left-booth").hide();
        });
    });

    $(".diagonal-upper-left-booth-empty").on("click",function() {
        $(".diagonal-upper-left-booth").show();
        $(".diagonal-upper-left-booth").on("click",function() {
            $(".diagonal-upper-left-booth").hide();
        });
    });     

    $(".left-booth-empty").on("click",function() {
        $(".left-booth").show();
        $(".left-booth").on("click",function() {
            $(".left-booth").hide();
        });
    });

    $(".diagonal-bottom-left-booth-empty").on("click",function() {
        $(".diagonal-bottom-left-booth").show();
        $(".diagonal-bottom-left-booth").on("click",function() {
            $(".diagonal-bottom-left-booth").hide();
        });
    });

    $(".bottom-left-booth-empty").on("click",function() {
        $(".bottom-left-booth").show();
        $(".bottom-left-booth").on("click",function() {
            $(".bottom-left-booth").hide();
        });
    });

    $(".bottom-right-booth-empty").on("click",function() {
        $(".bottom-right-booth").show();
        $(".bottom-right-booth").on("click",function() {
            $(".bottom-right-booth").hide();
        });
    });

    $(".round-table-left-bottom-empty").on("click",function() {
        $(".round-table-left-bottom").show();
        $(".round-table-left-bottom").on("click",function() {
            $(".round-table-left-bottom").hide();
        }); 
    });

    $(".round-table-left-top-empty").on("click",function() {
        $(".round-table-left-top").show();
        $(".round-table-left-top").on("click",function() {
            $(".round-table-left-top").hide();
        }); 
    });

    $(".round-table-middle-top-left-empty").on("click",function() {
        $(".round-table-middle-top-left").show();
        $(".round-table-middle-top-left").on("click",function() {
            $(".round-table-middle-top-left").hide();
        }); 
    });

    $(".round-table-middle-top-middle-empty").on("click",function() {
        $(".round-table-middle-top-middle").show();
        $(".round-table-middle-top-middle").on("click",function() {
            $(".round-table-middle-top-middle").hide();
        }); 
    });

    $(".round-table-middle-top-right-empty").on("click",function() {
        $(".round-table-middle-top-right").show();
        $(".round-table-middle-top-right").on("click",function() {
            $(".round-table-middle-top-right").hide();
        }); 
    });

    $(".round-table-middle-bottom-left-empty").on("click",function() {
        $(".round-table-middle-bottom-left").show();
        $(".round-table-middle-bottom-left").on("click",function() {
            $(".round-table-middle-bottom-left").hide();
        }); 
    }); 

    $(".round-table-middle-bottom-middle-empty").on("click",function() {
        $(".round-table-middle-bottom-middle").show();
        $(".round-table-middle-bottom-middle").on("click",function() {
            $(".round-table-middle-bottom-middle").hide();
        }); 
    });

    $(".round-table-middle-bottom-right-empty").on("click",function() {
        $(".round-table-middle-bottom-right").show();
        $(".round-table-middle-bottom-right").on("click",function() {
            $(".round-table-middle-bottom-right").hide();
        });         
    });

    $(".top-right-booth-empty").on("click",function() {
        $("#reservation_table_id").val("A1");   
    });

    $(".top-left-booth-empty").on("click",function() {
        $("#reservation_table_id").val("A2");   
    });

    $(".diagonal-upper-left-booth-empty").on("click",function() {
        $("#reservation_table_id").val("A3");   
    });

    $(".left-booth-empty").on("click",function() {
        $("#reservation_table_id").val("A4");   
    });

    $(".diagonal-bottom-left-booth-empty").on("click",function() {
        $("#reservation_table_id").val("A5");   
    });

    $(".bottom-left-booth-empty").on("click",function() {
        $("#reservation_table_id").val("A6");   
    });

    $(".bottom-right-booth-empty").on("click",function() {
        $("#reservation_table_id").val("A7");   
    });

    $(".round-table-left-bottom-empty").on("click",function() {
        $("#reservation_table_id").val("B1");   
    });

    $(".round-table-left-top-empty").on("click",function() {
        $("#reservation_table_id").val("B2");   
    }); 

    $(".round-table-middle-top-left-empty").on("click",function() {
        $("#reservation_table_id").val("B3");   
    }); 

    $(".round-table-middle-top-middle-empty").on("click",function() {
        $("#reservation_table_id").val("B4");   
    }); 

    $(".round-table-middle-top-right-empty").on("click",function() {
        $("#reservation_table_id").val("B5");   
    }); 

    $(".round-table-middle-bottom-left-empty").on("click",function() {
        $("#reservation_table_id").val("B6");   
    }); 

    $(".round-table-middle-bottom-middle-empty").on("click",function() {
        $("#reservation_table_id").val("B7");   
    }); 

    $(".round-table-middle-bottom-right-empty").on("click",function() {
        $("#reservation_table_id").val("B8");   
    });     

});

这是预订控制器

class ReservationsController < ApplicationController
  def index
    @reservation = Reservation.new
  end


  def create
    @reservation = Reservation.new(reservation_params.merge(email: current_user.email, user_id: current_user.id))
    # @reservation.table 
    @reservation.save

    respond_to do |format|
      format.html { redirect_to reservations_path }
      format.js # render reservations/create.js.erb
    end
  end

  private

  def reservation_params
    params.require(:reservation).permit(:num_of_people, :reservation_time, :table_id, :email, :user_id)
  end
end

我正在尝试学习一些教程，因此我在预订文件夹中创建了一个 create.js.erb 文件并添加了以下代码：

$('').append(@reservations)

但是，我意识到了一些事情，我不知道在美元符号后面的单引号应该放什么。我已经为博客 cmets 之类的东西做过这件事，但我的项目是不同的。对于我的项目，您必须单击一个 div 元素（可以是该表映射上可能的 15 个表中的任何一个），然后将其锚定到位于 Table ID 表单字段中的值。有没有人知道我将如何做这件事，甚至如果我设法走上正确的轨道，我什至会如何检查 AJAX 是否在远程工作？

【问题讨论】：

标签： jquery html ruby-on-rails ruby ajax

【解决方案1】：

听起来您正在尝试在用户进行预订时更新所有者的浏览器。

如果是这种情况，您将不得不使用 AJAX/JS，但这还不是全部。您还需要一个 pub 子系统。

ActionCable 是 Rails 5 的新方法，但它是全新的，刚刚合并到 Rails 中。还有一种叫做 faye 的宝石已经存在了很长一段时间，它可以完成这项工作。

以下是一些帮助您入门的链接：

https://github.com/rails/rails/tree/master/actioncable

https://github.com/faye/faye

https://github.com/jamesotron/faye-rails

我希望我能理解您的目标，并且希望这对您有所帮助。如果没有，请发表评论，我会尝试改进我的答案。

【讨论】：

这是正确的安德鲁，我一直在看 youtube，似乎 faye 可以完成我需要的。我的应用程序有点像这样：youtube.com/watch?v=QSjpv86vNAM 除了不是正方形，它们将是圆桌。无论如何，我现在有了方向感，我会看看我是否能找到这颗宝石，非常感谢！