Changing inline javascript with Perl variables into a function - javascript

I currently have a select tag with an inline onChange property like this:
<select id="owner_sel" name="owner"
<% print ' style="display: none"' if(!$user->has_permission($task->cid, $PERMISSION_CHANGE_OWNER)); %>
onChange="if(!this.selectedIndex == 0) {
if(this.form.state_id.value == <%= $STATE_NEW %>) {
this.form.state_id.value = <%= $STATE_ASSIGNED %>
}
} else {
this.form.state_id.value = <%= $STATE_NEW %>
}">
<option></option>
<%
foreach my $h (#sorted_users){
foreach my $uid (keys %{$h}) {
my $selected = ($uid == ($form->{owner} || $task->owner)) ? 'selected="selected"' : '';
print qq{<option value="$uid" $selected>$h->{$uid}</option>};
}
}
%>
</select>
and I wanted to move it into a function like this:
<script>
// code...
</script>
Im pretty newbie with javascript and I also don't know if Perl variables can be called the same way in javascript functions?
edit
<script>
$(document).on('change', '#owner_sel', function() {
if(!this.form.owner_sel.selectedIndex == 0) {
if(this.form.state_id.value == <%= $STATE_NEW %>) {
this.form.state_id.value = <%= $STATE_ASSIGNED %>
}
} else {
this.form.state_id.value = <%= $STATE_NEW %>
}
});
$(document).on('change', '#state_id', function() {
if (this.form.state_id.value = <%= $STATE_NEW %> ){
this.form.owner_sel.selectedIndex = 0;
}
});
</script>
----------Question-----------
I redid my code to something like that. When it is just one function, everything works but when I have both scripts included like the snippet above, there is an error.
I was wondering, in my second function if the state_id = 'NEW' and the owner_sel changes to index '0' does that re-trigger the first function?

<script>
$(document).on('change', '#owner_sel', function() {
if(!this.form.owner_sel.selectedIndex == 0) {
if(this.form.state_id.value == <%= $STATE_NEW %>) {
this.form.state_id.value = <%= $STATE_ASSIGNED %>
}
} else {
this.form.state_id.value = <%= $STATE_NEW %>
}
});
$(document).on('change', '#state_id', function() {
if (this.form.state_id.value == <%= $STATE_NEW %> ){
this.form.owner_sel.selectedIndex = 0;
}
});
</script>
The way you translated it was correct. And yes, Perl variables can be called into the javascript function the same way you called on them inline.
The reason your code is conflicting is because your second line of code in the .on('change', '#state_id' code is using a single '=' and I think you meant to use '==' to check if the state is 'NEW'. The way you have it now would just change the owner_sel.selectedIndex to '0' everytime the state_id is changed.
if (this.form.state_id.value == <%= $STATE_NEW %> ){

Related

How to add in else statement in underscore template

I have the following code:
var c = 'Credits: <% if (credits) { %> <%= credits %> <% } %> <% else { %> N/A <% } %>'
However I get Unexpected token else. Is the else statement different than how the if statement is added? What should the above correctly be?
Just get rid of the %> <% between } and else. Like this:
var c = 'Credits: <% if (credits) { %> <%= credits %> <% } else { %> N/A <% } %>';
Alternatively, the ternary operator is one of my faves:
var c = 'Credits: <%= credits ? credits : "N/A" %>';
In case it's unclear, the ternary is basically a reduced if/else statement. The part before the ? is the expression being evaluated for truthiness. If it's truthy, the middle part between ? and : is executed, but if it's falsey, the last part after : is executed instead.
A better way to do this would be with the OR operator:
var c = 'Credits:</b> <%= credits || "No credits" %></div>

How to convert rails request.env to javascript?

I have next js.erb file:
<% if Rails.env == 'production' %>
<% if request.env['SERVER_NAME'] == 'example.com' %>
$(function () {
...
...
});
<% end %>
<% end %>
How to convert second line in JavaScript without Ruby?
Output the SERVER_NAME as a string, and do the comparison client-side:
<% if Rails.env == 'production' %>
if ('<%= request.env['SERVER_NAME'] %>' == 'example.com') {
$(function () {
...
...
});
}
<% end %>
If the second line can "only contain javascript" (I strongly question this) then you can move the Ruby bit out to a variable:
var serverName = '<%= request.env['SERVER_NAME'] %>';
<% if Rails.env == 'production' %>
if (serverName == 'example.com') {
$(function () {
...
...
});
}
<% end %>
I found the answer as:
<% if Rails.env == 'production' %>
if (window.location.hostname == 'example.com') {
$(function () {
...
...
});
}
<% end %>

Javascript multiple nested if statements don't work with Rails code

I have a method inside helper which fires an action which changes value of instance variable. Inside my javascript I've done this:
if(cat_id == 1)
{
<% cat_appointments(1) %>
}
else if(cat_id == 2)
{
<% cat_appointments(2) %>
}
else if(cat_id == 3)
{
<% cat_appointments(3) %>
}
My helper:
module StaticHelper
def cat_appointments(cat_id)
#appointments = Appointment.where(cat_id: cat_id)
end
end
The problems is that appointments are set like every time there is selected cat with id=3. If I put alert in those conditions, alert with selected id is displayed correctly when user selects specific cat.
Any ideas what is wrong with this code? How to change that variable?
When I replace:
else if(cat_id == 2)
{
<% cat_appointments(2) %>
}
with:
else if(cat_id == 3)
{
<% cat_appointments(3) %>
}
Then there are not always displayed appointments with cat_id=3. Now there are always displayed events with cat_id=2. So, the last 'else if' statement is always correct.
Thank you.
Can you try adding =
<%= cat_appointments(1) %>

Reference a Coffeescript event in a separate JS file

Basically I already have a piece of coffeescript that animates a drop down menu:
menu_in = -> $('.cart_pulldown').slideDown(250)
menu_out = -> $('.cart_pulldown').slideU(150)
$('#store_menu').hoverIntent(over: menu_in, out: menu_out, timeout: 150)
And I want to tie this to the add-to-cart-button action so that the menu slideDown/slideUp sequence happens when a user adds to their cart, heres that js code:
function set_product_page_variant_state() {
var varel = $('div#product-social-links');
var cart_link = $("#add-to-cart-button");
if(varel && cart_link) {
if(variant_id = varel.attr('data-variant-id')) {
$.post('/flash_sales/get_state.json', {'variant_ids[]': [variant_id]}, function(data) {
var state = data[variant_id];
if(state) {
if(state=='on_hold') {
cart_link.text("On Hold").show();
} else if(state=='in_my_cart') {
// TODO: this is funking ugly and slow to load, this whole thing needs a good old fashion refactorin'.
cart_link.text("In My Cart")
.hide()
.after("<a href='/cart' class='action-button add_to_cart' id='#add-to-cart-button'>In My Cart</a>")
.remove()
} else if(state=='available') {
cart_link.removeAttr('disabled').show();
} else if(state=='sold_out') {
cart_link.text("Sold Out").show()
} else {
// something went wrong, enable the button
cart_link.removeAttr('disabled').show()
}
} else { cart_link.removeAttr('disabled').show() }
});
} else { cart_link.removeAttr('disabled').show() }
}
}
and just to be thorough, here is the associated html:
<div id="cart-form">
<%= form_for :order, :url => spree.populate_orders_url do |f| %>
<div id="inside-product-cart-form" itemprop="offers" itemscope itemtype="http://schema.org/Offer">
<% if #product.price %>
<div>
<div class="add-to-cart">
<%= hidden_field_tag "variants[#{#variant.id}]", 1 %>
<%= button_tag "Add to Cart", :class => "hidden action-button add_to_cart", :type => :submit, :disabled => true, :id => "add-to-cart-button" %>
</div>
</div>
<% end %>
</div>
<% end %>
</div>
Any advice is greatly appreciated, thanks in advance!
You can use jQuery delegate events in your Coffeescript file. For example, to show the menu for 500ms before triggering menu_out:
$(document).on 'click', '#add-to-cart-button', (event) ->
menu_in()
setTimeout 500, menu_out
Since CoffeeScript puts your code in a closure you need to manually attach global variables to the window, like window.menu_in = -> ...

using if statement in each-loop

I have a loop
<% _.each(kw, function (x) { %>
now I want to use a if statement which checks a string
<% if ( <%=x%> == "condition") { %>
<div>..</div>
<% } %>
but doesn't work :( any ideas?
another question:
<script>
var maxKW = $("[id^='kalenderwoche']:first").attr("id");
</script>
is declared above and what would be the correct if statement when I want to use maxKW
<% if ( <%=x%> == maxKW) { %>
<div>..</div>
<% } %>
would be great if you could help me :)
<% if (x === "condition") { %>
<div>..</div>
<% } %>
Pass maxKW as attribute to the compiled template:
var maxKW = $("[id^='kalenderwoche']:first").attr("id");
var html = _.template('your html')({maxKW:maxKW});

Categories