So, I have partial where is a table row and different table datas. By clicking a button (which is in <tr>) I send Ajax request (simply, with remote: true) and also update item data (displayed in <tr>) with action.
It all goes fine, but I can't send received data from Ajax to specific <td>. If more items being displayed - all of them receives that data.
_partial.html.erb:
<body>
<div>
<tr data-line-item-id='<%= line_item.id %>' class='line-item'>
<td data-th="Product">
<div class="row">
<div class="col-sm-2 hidden-xs"></div>
<div class="col-sm-10">
</div>
</div>
</td>
<td data-th="Price"><%= number_to_currency(line_item.product.price) %></td>
<td data-th="Quantity">
<%= line_item.quantity %>
</td>
<td data-th="Subtotal" class="text-center" class="subtotal">
<%= number_to_currency(line_item.total_price, :unit => "€", separator: ",", format: "%n %u") %></td>
<td class="actions" data-th="">
<td><%= link_to "-", decrease_line_item_path(product_id: line_item.product), remote: true %></td>
<td><%= link_to "+", increase_line_item_path(product_id: line_item.product), remote: true %></td>
</td>
</tr>
</div>
</body>
decrease.js.erb:
$("td[data-th='Quantity']").html('<%= #line_item.quantity %>');
My 'nice tries' were something like:
$(this).parent().parent().find("td[data-th='Quantity']").html('<%= #line_item.quantity %>');
But my 'best achievement' was to update only the particular, found by number item, like this:
$("td[data-th='Quantity']").eq(0).html('<%= #line_item.quantity %>');
Otherwise they all get updated...
UPDATE
This, kinda made it working, but if I increase numbers of one item and then increase other item numbers, first click shows the number of previously updated item number... But answer is close. Hope someone could help... Many thanks
increase.js.erb:
$(document).ready(function(){
$('.increase').click(function(){
var element = $(this).parent().parent()
$(element).find("td[data-th='Quantity']").html('<%= #line_item.quantity %>');
});
});
You should not add click event in js.erb file in your case as when the page loads increase.js.erb's click function is not available.
Lets say current quantity is 2.
Now on first click AJAX request is sent, in response $('.increase') function is loaded but it will not execute as the first click happened before the AJAX response.
def increase
# quantity is increased to 3.
end
The increase function which just loaded will have new incremented number.
// first click function loaded not triggered.
$(document).ready(function(){
$('.increase').click(function(){
var element = $(this).parent().parent()
// $(element).find("td[data-th='Quantity']").html('<%= #line_item.quantity %>');
$(element).find("td[data-th='Quantity']").html('3');
// but as the click is not triggered in first click, the value has changed to 3.
});
});
On second click on increase button, the first click function gets executed, changing the value of the td cell to 3. And in response to AJAX call of 2nd click on increase button, one more $('.increase').click() is loaded with a value 4. But again this newly loaded function doesn't execute.
// second click function loaded not triggered in response to second click.
$(document).ready(function(){
$('.increase').click(function(){
var element = $(this).parent().parent()
// $(element).find("td[data-th='Quantity']").html('<%= #line_item.quantity %>');
$(element).find("td[data-th='Quantity']").html('4');
// but as the click is not triggered in second click, the value has changed to 4.
});
});
// this 2nd function will get executed on third click.
decrease.js.erb
$('tr[data-line-item-id]').each(function(){
if ($(this).data('line-item-id') == '<%= #line_item.id %>' ){
$(this).each(function(){
if ( $(this).data('th') == 'Quantity' ) {
$(this).html('<%= #line_item.quantity %>');
}
});
}
});
This can be made a lot simpler if you add an id attribute to each tr, for example:
<tr data-line-item-id='<%= line_item.id %>' id='row-<%= line_item.id %>' class='line-item'>
---
</tr>
and then access it in decrease.js.erb like this:
$('#row-<%= #line_item.id %> td:nth-child(3)').html('<%= #line_item.quantity %>');
Related
I am building "comments" model for "post". Single profile will be having two tabs. Each tabs will be having ten posts. So , I am calling post using UUID (Unique Id).On first time, comments get posted and index page for comments is shown. But for the next time, without refreshing the page, comments getting posted via ajax but index page is not shown.
My comments section in Posts/index is
<% #posts.each do |p| %>
<% a = SecureRandom.uuid %>
<i class="fa fa-comment post-comment coms" data-a="<%= a %>"
style="cursor:pointer;" data-postid="<%= p.id %>" data-class="<%=
p.class.to_s %>"></i>
<%= p.comments.count %>
<div id="comments_post_<%= a %>"></div>
<% end %>
<script type="text/javascript">
var comments_url = "<%= comments_path %>";
$(".coms").click(function(e){
var p_a = $(this).data("a");
var c_type = $(this).data("class");
var id = $(this).data("postid");
e.stopImmediatePropagation()
$("#comments_post_"+p_a).toggle(
function(){($("#comments_post_"+p_a).load(comments_url+"?c_type="+c_type+"&id="+id+"&p_uuid="+p_a));}
);
});
In jquery, I am passing the UUID as p_uuid to the comments index action.
comments/controller index action is
def index
#holder = params[:c_type].constantize.find(params[:id])
#c_uuid = params[:p_uuid] unless params[:p_uuid].blank?
render partial: "comments/index"
end
I am assigning params[:p_uuid] to the #c_uuid.
comments/index is
<div class="row postComment"">
<div class="col-md-2 col-sm-2"><%= image_tag(current_user.image_url[:url], :class => "commentpic") rescue "" %></div>
<div class="col-md-10 col-sm-10">
<textarea id="commentText" class="annotation send-comm form-control" placeholder="Add a comment"
data-c-id="<%= #holder.id %>" data-c-type="<%= #holder.class.to_s %>" data-uuid="<%= #c_uuid %>"></textarea>
<div class="hint">Press Shift + Enter for a new Line</div>
</div>
</div>
<script>
var comments_url = "<%= comments_path %>";
function postComment(context){
var comment = $(context).val();
var c_type = $(context).data("c-type");
var c_id = $(context).data("c-id");
var uuid=$(context).data("uuid");
var commParams = {
commentable_type: c_type,
commentable_id: c_id,
body: comment
}
postData( comments_url, { comment: commParams }, function(data){
$("#comments_"+"<%= #holder.class.to_s.downcase %>_<%= #c_uuid %>").load(comments_url+"?c_type=<%= #holder.class.to_s %>&id="+"<%= #holder.id %>");
});
</script>
Actual problem is, I am posting first comment, its getting posted and index page is shown. But , for the second time the comments getting saved in database but its not getting shown on index or index not getting updated.
I checked with the console.log, #c_uuid from comments controller in passed to the comments/index for the first time, but its not available for the second time. Means, #c_uuid is nil for the second time.Please, help me in this.
I am trying to render in another partial, like this:
<% cobran = #detalleco.cobran %>
$("#cobran_<%= #detalleco.IdCobranza %>").fadeOut(500, function(){
$(this).remove();
$(".child").remove();
$("#container_cobranza").html("<%=escape_javascript(render(:partial => 'cobranza/cobran', cobranza: cobran))%>");
});
but I get this error:
ActionView::Template::Error (undefined local variable or method cobran' for #<#<Class:0xb47692ec>:0x83cb1500>
Did you mean? cobran_url):
1: <tr id="cobran_<%= cobran.id %>">
2: <td><%=cobran.id%>
3:
4:
app/views/cobranza/_cobran.html.erb:1:in_app_views_cobranza__cobran_html_erb__36360536__1042659538'
app/views/detallecob/create.js.erb:12:in `_app_views_detallecob_create_js_erb__76211164__1041949938'
don't recognize the variable "cobran" because in the view is doing the render this way:
<tbody id="container_cobranza">
<%= render #cobranza %>
</tbody>
And in the partial puts the singular of "cobranza" that is "cobran" like this:
<tr id="cobran_<%= cobran.id %>">
<td><%=cobran.id%>
<td><%=cobran.FechaReg%></td>
<td><%=cobran.FechaVence%></td>
<td><%=cobran.TipoDoc%></td>
</tr>
How can I solve this issue? thanks
You can't use that erb variable in javascript. Pass it to the javascript via a data attribute. Add to one of your elements: data-cobran="<%= #detalleco.cobran %>" Put an id on the element and then access it by the id var cobran = $("#nameOfId").data('cobran')
After that you can use it.
I've lost in thought. I have a checkbox that I want to use to transfer a corresponding object to another scope on my page. Moreover, I want only to transfer one field of this checked object. I had used earlier Ajax by creating a .json file and then I responded to it in my controller. In my case input checkbox doesn't seem to have a remote: true option.
views/tasks/_index.html
<h3>Tasks database</h3>
<table>
<% #tasks.each do |task| %>
<tr class='tasks' id="task_<%= task.id %>">
#Some stuff
<td>
<input type="checkbox" class='check' data-id="<%= task.id %>" >
</td>
</tr>
<% end %>
</table>
<h3>Completed</h3>
<div class="complete-tasks">
</div>
Hence, I'm trying to accomplish that using an event via javascript.
So far I've managed to write some javascript code that moving my entire object.
application.js
$(document).on('ready page:load', function () {
$('.check').on('change', function(){
if ($(this).is(':checked')) {
id = $(this).attr('data-id');
task = $(this).closest("tr");
$('.complete-tasks').last().after(task);
}
});
})
But I want to relocate only one 'title' field using Ajax. Can someone please explain me how to accomplish that? I suspect I need to pass in some id's in checkbox and to define $.ajax.
models/task.rb
class Task < ActiveRecord::Base
scope :complete, -> { where(complete: true) }
scope :incomplete, -> { where(complete: nil) }
belongs_to :user
end
All you have to do is make the request to the url and then move the table row/title cell.
$(document).on('ready page:load', function () {
$('.check').on('change', function(){
if ($(this).is(':checked')) {
id = $(this).attr('data-id');
//Url is the site you want to hit.
var jqXHR = $.ajax(url);
var element = this;
jqXHR.done(function(data){
//Ajax finish here.
task = $(element).closest("tr");
$('.complete-tasks').last().after(task);
});
}
});
});
Edit: Fixed context use.
Check the jQuery documentation on how to set up the jqXHR properly:
http://api.jquery.com/jquery.ajax/
I am creating a JSP page with a html table to display employee directory. This is scriptlet :
<%
String selectedItem = "";
List<Employee> list = new ArrayList<Employee>();
PhoneListController controller = new PhoneListController();
list = controller.getAllContacts();
}
for (Employee eachEmp : list) {
%>
<tr >
<td><%=eachEmp.getLast()%></td>
<td><%=eachEmp.getFirst()%></td>
<td><%=eachEmp.getExt()%></td>
<td><%=eachEmp.getLoc()%></td>
<td><%=eachEmp.getCell()%></td>
<td><%=eachEmp.getTeam1()%></td>
</tr>
<% } %>
and then i display the table rows and columns for each employee object(PS: I know scriptlets are bad and obsolete but this is my first individual project.)
I would like to change the background color of certain rows based on value of one particular value(based on eachEmp.getManagerCode).
How can i achieve that by using javascript? I tried to call a js function by calling onload event on . But as I need to check for each row that is not the possible solution. I have not tried jquery yet as I am very new to jquery and I didnt quite understand how to do it in jquery.
Please help.
Thanks
you can simply use an if statement
<%
String selectedItem = "";
List<Employee> list = new ArrayList<Employee>();
PhoneListController controller = new PhoneListController();
list = controller.getAllContacts();
}
for (Employee eachEmp : list) {
if (eachEmp.getManagerCode==1) { %>
<tr class="red">
<% } else { %>
<tr class="blue">
<% } %>
<td><%=eachEmp.getLast()%></td>
<td><%=eachEmp.getFirst()%></td>
<td><%=eachEmp.getExt()%></td>
<td><%=eachEmp.getLoc()%></td>
<td><%=eachEmp.getCell()%></td>
<td><%=eachEmp.getTeam1()%></td>
</tr>
<% } %>
Or if you don't want to use css class you can simply write etc.. etc..
you can put how many if you want, or use the switch statement
I am trying to call a javascript function from my form page in a Rails 3 project. I need to send the function the ID of a particular element. Unfortunately I can't get the ID easily since it is automatically generated by a plugin.
I tried doing it this way:
<%= t.select :number_type, #id_types, {}, {:onchange => "has_other_field(' + the_value.id.to_s + "');"} %>
<% if (!the_value.nil?) && (!the_value.number_type.nil?) && !#id_types_sm.include? the_value.number_type) %>
<script type="text/javascript">
setup_other_field("<%= the_value.number_type %>", ###ID WOULD GO HERE###);
</script>
<% end %>
.. But since I don't know the ID of the element, I can't call it from the function.
So now I'm trying to do it this way, by calling the function from an "onload" when the input element loads:
<% if (!the_value.nil?) && (!the_value.number_type.nil?) && (!#id_types_sm.include? the_value.number_type) %>
<%# Call the function from the form helper only if the conditions are met %>
<%= t.select :number_type, #id_types, {}, {:onchange => "has_other_field(this.id);", :onload => "setup_other_field('" + the_value.number_type + "', this.id);"} %>
<% else %>
<%# Use the form helper without calling the function %>
<%= t.select :number_type, #id_types, {}, {:onchange => "has_other_field(this.id);"} %>
<% end %>
BUT I realize that onload does not work for this situation. Is there any workaround for this? How can I either
A) get the element ID from the field to the function in the first option, or
B) call this function from this input element whenever it loads?
... or C) an alternative way to do this?
Thanks in advance and let me know if more details would help.
If you have ID saved in the model, get it with <%= model.id %>
Exception to this rule is when you create object, and it is before it is written to database. If you go to edit or anywhere else it will be ok.
If you have it somewhere on the page :/ then you can use jQuery to get it for you.
< div id="id_of_the_element" attr_with_my_id="15" >ABC< /div >
$("#id_of_the_element").attr('attr_with_my_id')
< input id="id_of_the_element ... >< /input >
$("#id_of_the_element").value