堆栈内存溢出
  繁体   English   中英

如何获得此AJAX请求以在我的Ruby on Rails Table Reservation App中工作？

[英]How do I get this AJAX request to work in my Ruby on Rails Table Reservation App?

 原文  2016-01-06 05:06:53  6   1    jquery/ html/ ruby-on-rails/ ruby/ ajax

问题描述

好的，这个问题很长，但是要尽量保持简洁。

我有一个尝试创建的预订应用程序，看起来像这样：

餐桌预订应用

当您单击地图上的任何摊位或桌子时，“桌子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

我试图遵循一些教程，所以我在Reservations文件夹中创建了一个create.js.erb文件并添加了以下代码： 

$('').append(@reservations)

但是，我意识到一些事情，我不知道在美元符号后的单引号中要写些什么。 我已经看到博客评论之类的东西了，但是我的项目却不同。 对于我的项目，您必须单击div元素（可以是该表映射上可能的15个表中的任何一个），然后将其锚定到“表ID”表单字段中的值。 有没有人知道我将如何执行此操作，甚至还没有任何想法，如果我设法走上正确的路，我什至会检查AJAX是否在远程工作？

1 个解决方案

解决方案1
 1  2016-01-06 09:18:27

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

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

ActionCable是实现这一目标的新的Rails 5方法，但是它是全新的，并且刚刚合并到Rails中。 还有一种叫做王菲的宝石已经存在了很长时间，可以胜任这项工作。

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

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

https://github.com/faye/faye

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

希望我了解您的目标，对您有所帮助。 如果没有，请发表评论，我将尝试并改善答案。

暂无
暂无

声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 如何通过AJAX发送Ruby on Rails的放置请求 如何使用Ajax向我的Rails控制器发出POST请求？ 如何在Rails中获取JSON Ajax请求的数据？ 如何使jQuery和PHP与Ajax一起使用？ 如何在Wordpress中使用我的AJAX电子邮件 如何让我的 ajax POST (preventDefault) 工作？ 在 ruby-on-rails 应用程序上提交带有 AJAX 的表单后，如何让 jQuery 更新页面上的元素？ 如何使我的JQuery脚本在HTML中工作-表 我无法让我的Ajax请求工作 如何在Rails中使用ruby提出ajax请求？
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM