javascript - Ajax on Rails How to use Ajax append method for render HTML? -
i not english speaker.i ask of understanding.sorry
/app/views/sale/index.html.erb
want ajax here
<div class="col-lg-4" style="padding:5px;" id=reply_preview> <%= render 'sale/billpreview'%> </div> this button sending data
<button type="submit" class="btn btn-defalut reply_sale" value="<%= m.id %>" name="menuid" script
<script> $(".reply_sale").click(function(){ send_value=this.value; $.ajax({ method: "post", url: "/sale/billpreview", data: { menuid : send_value }, datatype : 'json' }) .done(function() { $( "#reply_preview" ).append( "<%= render 'sale/billpreview'%>");// <-- error point }); }); </script> here error point
$( "#reply_preview" ).append( "<%= render 'sale/billpreview'%>");// <-- error point what type here?
/app/views/sale/_billpreview.erb
<div style="background-color:white; height:410px;"> <div style="padding:15px;"> <div style="color:black"> <h4>order list</h4> <div>=================================</div> <div style="height:250px; margin-left:1px; margin-right:1px;"> <div class="row" style="font-size:14px; height:200px;"> <% @total_price = 0 %> <% if current_user.store.billopen %> <% if @billshow.present? %> <% @billshow.salesmenu.each |m|%> <span class="col-lg-4"><%= m.menu.name %></span> <span class="col-lg-4"><%= m.menu.price * m.qty %></span> <span class="col-lg-4"> <form action="/sale/qty_plus" method = "post"> <button type="submit" class="glyphicon glyphicon-plus" name = "qty" value ="<%=m.id%>"> </button> </form> <span><%= m.qty %></span> <form action="/sale/qty_minus" method = "post"> <button type="submit" class="glyphicon glyphicon-minus" name ="qty" value ="<%=m.id%>"> </button> </form> </span> <% @total_price = @total_price + (m.menu.price * m.qty) %> <% end %> <% else %> <% end %> <% else %> <% end %> </div> <div>--------------------------------------------------------</div> <div class="row"> <span class="col-lg-4">total price</span> <span class="col-lg-8" style="text-align:right"><%= @total_price %> </span> </div> </div> <div>=================================</div> </div> <div class="row" style="margin-top:15px;"> <form class="col-lg-4" action="/sale/billfinish" method = "post"> <button type="submit" formmethod="post" formaction="/sale/billfinish" class="btn btn-default">완료</button> </form> <form class="col-lg-4"> <button type="submit" onclick="location.href='/sale/index'" class="btn btn-default">initialization</button> </form> <form class="col-lg-4"> <button type="submit" onclick="location.href='/home/index'" class="btn btn-default">cancel</button> </form> </div> </div> </div> /app/controllers/home_controller.rb
def billpreview if current_user.store.billopen @salesmenu = salesmenu.new @salesmenu.menu_id = params[:menuid] @salesmenu.bill_id = current_user.store.bills.last.id @salesmenu.save @billshow = current_user.store.bills.last else # @bill = bill.new @bill.store_id = current_user.store.id #db connect (bill <-> store) @bill.workperiod_id = current_user.store.workperiod.last.id #db connect (bill <-> workpeiod) @bill.save @salesmenu = salesmenu.new @salesmenu.menu_id = params[:menuid] @salesmenu.bill_id = @bill.id @salesmenu.qty = 1 @salesmenu.save @billshow = @bill #current_user.store.bills.last end @temp_store = current_user.store @temp_store.billopen = true @temp_store.save return head :no_content #redirect_to :back end also, don't know return head :no_content mean copy , paste @ google. i'm not sure if right. correct?
a few things should know , have learn go on:
rails links come built in function send ajax requests this:
<%= link_to "my ajax request text", post_new(@post), remote: true %> the "remote: true" option sends ajax request link specified path (in case new post).
your controller receives every request , responds redirecting or rendering views refreshes page. when ajax request don't want that. want controller responds via ajax too. once again, rails has built in function that:
def billpreview # write logic , set instance variables objects want # @salesmenu respond_to |format| format.html format.js end end respond_to looks @ request , determines if html request (no ajax) or ajax request. if ajax request responds javascript file, else responds html file default.
in view folder need create new file javascript file rails can send when ajax request:
billpreview.html.erb billpreview.js.erb billpreview.html.erb have been using until now. billpreview.js.erb use when request ajax response.
inside of billpreview.js.erb can use same instance variables used in billpreview.html.erb.
#billpreview.js.erb $('#id_in_your_view').append('<%= j render @salesmenu %>'); usually pick id in view ($('#id_in_your_view')) can append or prepend content. have use <%= j render @salesmenu %> not "render" because using javascript. once understand logic behind it, becomes easy. luck.
i recommend watch these 2 youtube videos:
Comments
Post a Comment