jquery - How do I get this AJAX request to work in my Ruby on Rails Table Reservation App? -
okay guys, lengthy question, going try , keep condensed possible.
i have table reservation app i'm trying create, looks this:
when click on of booths or tables in map, "table id" field fills number of table selected (i.e table number "a1", etc). afterwards, once hit "create reservation" table turns yellow signify user signed in reserving table.
the app works fine, able table highlight in yellow (to show successful reservation) , user's email become associated table upon making reservation. there's problem though.
there 2 types accounts, "users" (the customer), , "owners" (the actual owner of restaurant trying make reservation for). on users side, can see table reserved, want owner see user made reservation (i want update dynamically, moment user creates reservation , table highlights in yellow show reservation go, owner).
i told ajax way go this, have never used ajax before in life, , tutorials looking @ aren't quite tailored project making well, kind of unique.
here code far , here's have tried far.
this reservations / index.html.erb file
<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> this reservations form:
<%= form_for @reservation, remote: true |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 %> this 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;} this js file:
$(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"); }); }); and reservations controller
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 |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 i trying follow tutorials created create.js.erb file in reservations folder , added code:
$('').append(@reservations) however, realized something, have no idea put single quotes after dollar sign. i've seen done blog comments , like, project different. project, have click on div element (which of possible 15 tables on table map), anchored value located in table id form field. have idea of how go doing or yet, if manage on right track, how check see if ajax remotely working?
it sounds trying update owners' browser when user makes reservation.
if case, have use ajax/js, not all. need pub sub system well.
actioncable new rails 5 way of doing this, brand new , merged rails. there gem called faye has been around quite while can job.
here links started:
https://github.com/rails/rails/tree/master/actioncable
https://github.com/jamesotron/faye-rails
i hope understand goal , find helpful. if not, comment , try , improve answer.
Comments
Post a Comment