Jquery/javascript flash function for multiple elements - javascript

Check out this piece of code:
var shipping = $('#shipping_cell');
var total = $('#total_cell');
flash_cell(shipping);
flash_chell(total);
function flash_cell(target){
var background = target.css('backgroundColor');
target.stop().css("background-color", "#ac4341").animate({ backgroundColor: background}, 1500);
}
When I run this code, only the #shipping cell flashes.
If I switch the lines flash_cell(shipping); and flash_cell(total); around, neither one flashes.
Why don't they both flash?
Edit - here is my html
<td id = 'total_cell'><%= view_in_preferred_currency(#order.total) %></td>
<td id = "shipping_cell">
<% if #order.free_shipping? or #order.collection? %>
<%= view_in_preferred_currency(0) %>
<% else %>
<%= view_in_preferred_currency(#order.shipping_option.price) %>
<% end %>
</td>

Fix your typo:
flash_chell(total) to flash_cell(total)

Related

EJS comparison between two same strings

I try in ejs to compare two Strings which in the current situation are the same and it runs the else case. Here is the code:
<% var idf = notifications.data[i].from; %>
<% var ids = notifications.users[a].id; %>
<% if(idf == ids){ %>
<% index = a; %>
<script>alert('<%= index %>');</script>
<% break; %>
<% }else{ %>
<script>console.log('<%= idf %> - <%= ids %>');</script>
<% } %>
It logs 5d5ecfd1ad6d193de86c2264 - 5d5ecfd1ad6d193de86c2264
Use === instead of == to see if this fixes the issue, as it will prevent internal type coercion.
It might also be worth trimming the strings to see if there is any white space or padding added to them.
You could use the below code to compare two string values in ejs
<% if("some text" === "some text"){ %>
<h1>Yes the above text are equal</h1>
<% } %>
If you are comparing mongoDB objectId, then use toString().
<% var idf = notifications.data[i].from; %>
<% var ids = notifications.users[a].id; %>
<% if(idf.toString() == ids.toString()){ %>
<% index = a; %>
<script>alert('<%= index %>');</script>
<% break; %>
<% }else{ %>
<script>console.log('<%= idf %> - <%= ids %>');</script>
<% } %>

How can I get the dynamic Id of nested form?

I got the following code, which I want to show the Add option button when the user chooses the OPTIONS type in the select box. It only works for the first time to add the question. I know the problem which is I gave the id to the select box, but if I do not do that, how can I get the dynamic id of the select box?
<%= f.fields_for :questions do |question_form| %>
<%= question_form.text_field :question_text %>
<%= question_form.select(:question_type, [ 'TEXT', 'OPTIONS', 'UPLOAD' ],{:prompt => 'Select One'}, :id => "my_id", :onchange => "myFunction()") %>
<%= question_form.link_to_remove "Remove this Question" %>
<%= question_form.fields_for :options do |option_form| %>
<%= option_form.text_field :option_text %>
<%= option_form.link_to_remove "Remove this option" %>
<% end %>
<p id = "test" hidden><%= question_form.link_to_add "Add a option", :options %></p>
<% end %>
<p><%= f.link_to_add "Add a Question", :questions %></p>
<p>
<%= f.submit %>
</p>
<% end %>
<script>
function myFunction(){
var e = document.getElementById("my_id");
var x = e.options[e.selectedIndex].value
if (x == "OPTIONS"){
document.getElementById("test").hidden = false;
}
else{
document.getElementById("test").hidden = true;
}
}
</script>
While I'm not entirely sure what you mean by "It only works for the first time to add the question", it sounds like you're confident that using document.getElementById() is the problem. (I don't know why it would be, but I'm unfamiliar with Rails, so I'll assume you're correct.)
If so, you can avoid that selector by using the target property of the EventListeners's built-in "event" parameter:
function myFunction(event){
`var x = event.target.options[e.target.selectedIndex].value`
...
(And you might be able to shorten this to event.target.value.)

User-editable table with variable number of rows in Rails

I'm running Rails 3.2.11. I'm working on a simple wiki project as I learn Rails and Javascript. What I want to do is store a two-column table in my database whose contents and number of rows can be edited by users, and use jQuery to add forms for a new table row on a button click. The table is stored as a hash containing hashes for each row's columns. i.e. {"row1" => {"head" => "first column/header content", "tail" => "second column/data content"}, "row2" => {"head" => "first column/header content", "tail" => "second column/data content"}} The part of my _form.html.erb for editing the table looks like this:
<div id="node_table_row_0">
<%= f.fields_for :table do |table_rows| %>
<%= table_rows.fields_for :row do |table_cols| %>
<%= table_cols.text_field :head, :id => 'node_table_row_head_0' %>
<%= table_cols.text_field :tail, :id => 'node_table_row_tail_0' %>
<% end %>
<% end %>
<button id="add_table_row" type="button" class="btn btn-small">Add Row</button>
</div>
I'm displaying the table on my page like so:
<table class="table">
<% #node.table.each do |row| %>
<tr>
<th><%= row[1]['head'] %></th> <td><%= row[1]['tail'] %></td>
</tr>
<% end %>
</table>
And my node.js file contains the following:
$(document).ready(function(){
$('#header').append('Script loaded')
var newIndex = 0
$('#add_table_row').click(function(){
$('.sidebar_img').append('onclick event activated')
var prevIndex = newIndex
var prevRow = $('#node_table_row')
newIndex = newIndex + 1
var newRow = prevRow.clone(true).attr('id', 'node_table_row_'+newIndex)
newRow.find('#node_table_row_head').attr({ id: 'node_table_row_head_'+newIndex, name: 'node[table][row'+newIndex+'][head]'})
newRow.find('#node_table_row_tail').attr({ id: 'node_table_row_tail_'+newIndex, name: 'node[table][row'+newIndex+'][tail]'})
newRow.after(prevRow)
});
});
When I click the "add row" button, I get my confirmation that the onclick event has been recognized, but the forms are not appended. Am I approaching this entirely the wrong way? It seems like there would be a simpler way to go about this.
Have you tried using the jQuery insertAfter() method? use jQuery to select the table then use .children().insertAfter(newRow);

Nested .each on embedded ruby not printing anything

I'm having some problems with embedded ruby. I'm trying to iterate through some variable, to print some JavaScript code.
This is the following code:
<% color1 = '#ff0000' %>
<% color2 = '#00ff00' %>
<% color3 = '#ffff00' %>
<% i = 0 %>
<% j = 0 %>
<% #chapters.each do |chapter| %>
sigInst.addNode('cap<%= chapter.reference %>',{
label: 'cap <%= chapter.reference %>',
color: '<%= j%2==0 ? color1 : color2 %>',
x: <%= i = i %>,
y: <%= i = i %>
}).draw();
<% i = i + 0.1 %>
<% j=j+1 %>
<% end %>
<% #chapters.each do |chapter| %>
<% chapter.decisions do |decision| %>
sigInst.addEdge('cap<%= chapter.reference %>_cap<%= decision.destiny_num %>','cap<%= chapter.reference %>','cap<%= decision.destiny_num %>').draw();
<% end %>
<% end %>
I'm using Sigma js to implement a graph. The first .each appears in the view, but the second part doesn't print anything. What's happening? Thanks
You forgot to do a .each on your decisions.
So the fixed line would be: <% chapter.decisions.each do |decision| %>
Ruby has the sometimes annoying feature of allowing you to pass a block to anything, whether it uses it or not. So in this case, you're just passing the block to the decisions method, which does nothing with it.

Rails + JS - Using instance variable (array of arrays with strings)

I have the following in a html.erb file:
<%= #location_list = [['test',2]] %>
<script type="text/javascript">
var test = <%= #location_list.to_json %>
alert(test);
</script>
And the alert is not showing up.
However if I do <%= #location_list = [[3,2]] %> - The alert is showing up.
Why?
<%= %> tag means output something. In your case, you probably dont want to output anything, so I guess you are looking for
<% #location_list = [['test',2]] %>, which means normal statement no output will be involved
Sorry, havn't really answer your question.
var test = <%= #location_list.to_json %>
should be
var test = "<%=j #location_list.to_json %>"

Categories