I'm trying to add this if statement in a loop in an underscore template:
<% _.each( looks, function( listItem, index ){ %>
<% if(_.contains(firstBatch, listItem.id)){ %>
<% if (index % 2 == 0) { %>
<div class="large-6 column overlay-col">
<% } else { %>
<div class=" column overlay-col">
<% } % %>
<% } %>
<% }) %>
Basically it's to detect if index is an even number, but I get this console error:
SyntaxError: missing : after property id
if (index % 2 === 0) {
what's wrong with code?
I think your syntax has a bozo on line 7:
<% } % %>
What's that extra percent?
This becomes apparent when you remove all the decoration around the function:
_.each( looks, function( listItem, index ){
if(_.contains(firstBatch, listItem.id)){
if (index % 2 == 0) {
<div class="large-6 column overlay-col">
} else {
<div class=" column overlay-col">
} %
}
})
Related
I have a dropdown menu and I want to show and hide DIVs based on the selection of that dropdown menu. I have duplicated fields in templates because I do not know the better way to handle, so if someone can suggest me simpler way to code, I will appreciate it.
The code I wrote is below
Template(html)
<div id="pack-method" class="col-sm-30">
{{ form.item_packmethod|as_crispy_field }}
</div>
<div id="hidden2-1">
<div class="col-sm-20">
{{form.pallet_count|as_crispy_field}}
</div>
<div class="col-sm-20">
{{form.pallet_width|as_crispy_field}}
</div>
<div class="col-sm-20">
{{form.pallet_height|as_crispy_field}}
</div>
</div>
<div id="hidden2-2">
<div class="col-sm-20">
{{form.pallet_count|as_crispy_field}}
</div>
<div class="col-sm-20">
{{form.pallet_width|as_crispy_field}}
</div>
<div class="col-sm-20">
{{form.pallet_height|as_crispy_field}}
</div>
<div class="col-sm-20">
{{form.pallet_depth|as_crispy_field}}
</div>
</div>
<script type="text/javascript">
$('#hidden2-1').css({
'display': 'none'
});
$('#hidden2-2').css({
'display': 'none'
});
$('#pack-method').on('change', function() {
if (this.value === 'Pallet') {
$('#hidden2-1').show();
$('#hidden2-2').hide();
}
else if ($(this).val() == 'Rack') {
$('#hidden2-1').hide();
$('#hidden2-2').show();
}
else if ($(this).val() == 'Box') {
$('#hidden2-1').hide();
$('#hidden2-2').show();
}
else {
$('#hidden2-1').hide();
$('#hidden2-2').hide();
}
});
</script>
Forms.py
BLANK_CHOICE = (('', '----------'),)
PALLET = 'Pallet'
RACK = 'Rack'
BOX = 'Box'
PACK_TYPE = (
(PALLET, 'Pallet'),
(RACK, 'Rack'),
(BOX, 'Box'),
)
item_packmethod = forms.ChoiceField(label="Pack Method", choices = BLANK_CHOICE + PACK_TYPE,required=False)
I have solved the problem.
For those who might be interested, I changed
$('#pack-method').on('change', function() {
if (this.value === 'Pallet') {
$('#hidden2-1').show();
$('#hidden2-2').hide();
}
...
}
to
$('select').on('change', function() {
var a = $(this).val();
if (a === 'Pallet') {
$('#hidden2-1').show();
$('#hidden2-2').hide();
}
...
}
Am using rails 4 in my application with active admin gem. i am using fullcalender to show the events.
my code is below index.html.erb
<br />
<div class="link_back">
<%= link_to "Back", meeting_rooms_path, class: "btn-sm btn-primary" %>
</div>
<br />
<%= render 'errors' %>
<p>
<%=link_to 'Create Event', new_event_url(meeting_room_id: params["meeting_room_id"]), :id => 'new_event' %>
</p>
<br />
<!-- <div>
<div class='calendar'></div>
</div> -->
<div>
<div id='calendar'>
</div>
</div>
<div id = "desc_dialog" class="dialog" style ="display:none;">
<div id = "event_desc">
</div>
<br/>
<br/>
<div id = "event_actions">
<span id = "edit_event"></span>
<span id = "delete_event"></span>
</div>
</div>
<div id = "create_event_dialog" class="dialog" style ="display:none;">
<div id = "create_event">
</div>
</div>
<script>
// page is now ready, initialize the calendar...
$('#new_event').click(function(event) {
event.preventDefault();
var url = $(this).attr('href');
$.ajax({
url: url,
beforeSend: function() {
$('#loading').show();
},
complete: function() {
$('#loading').hide();
},
success: function(data) {
$('#create_event').replaceWith(data['form']);
$('#create_event_dialog').dialog({
title: 'New Event',
modal: true,
width: 500,
close: function(event, ui) { $('#create_event_dialog').dialog('destroy') }
});
}
});
});
$('#calendar').fullCalendar({
editable: true,
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay'
},
//defaultView: 'agendaWeek',
defaultView: 'month',
height: 500,
slotMinutes: 15,
loading: function(bool){
if (bool)
$('#loading').show();
else
$('#loading').hide();
},
events: "/events/get_events?meeting_room_id=<%= params[:meeting_room_id]%>",
timeFormat: 'h:mm t{ - h:mm t} ',
dragOpacity: "0.5",
eventDrop: function(event, dayDelta, minuteDelta, allDay, revertFunc){
// if (confirm("Are you sure about this change?")) {
moveEvent(event, dayDelta, minuteDelta, allDay);
// }
// else {
// revertFunc();
// }
},
eventResize: function(event, dayDelta, minuteDelta, revertFunc){
// if (confirm("Are you sure about this change?")) {
resizeEvent(event, dayDelta, minuteDelta);
// }
// else {
// revertFunc();
// }
},
eventClick: function(event, jsEvent, view){
if ((<%= current_user.id %>) == event.user_id){
showEventDetails(event);
}
},
});
</script>
the same fullcalender i have used with normal rails 4 applicaiton its working fine.
but with activeadmin its throwing the javascript error as,
TypeError: $(...).fullCalendar is not a function
and the calender is not displaying in view
Because of this error am not able to continue pls help ..
You are not importing fullcalendar js and css files, add these lines
in app/assets/javascripts/active_admin.js.coffee
#= require fullcalendar
in app/assets/javascripts/active_admin.css.scss
#import "fullcalendar"
I want to create a "details" row dynamically like below:
I'd like to be able to toggle details for every item on the grid. Can you advise how I can achieve this functionality?
I'm using rails 4 with wice_grid gem
I found out how to do this:
VIEW:
<%= grid(#items_grid) do |g|
g.after_row do |fill, number_of_columns|
content_tag(:tr, class: 'extra-row') do
content_tag(:td,
content_tag(:div) do
# without buffer only the last tag will appear
buffer = content_tag(:p,"data1: #{item.add_data1}")
buffer += content_tag(:p,"data2: #{item.add_data2}")
raw buffer
end,
colspan: number_of_columns)
end
g.column name: "ID", attribute: 'id' do |item|
item.id
end
g.column name: "Data", attribute: 'data' do |item|
item.data
end
g.column do |item|
button_tag("Details", class: "btn btn-default toggle-trigger")
end
end -%>
.JS:
$(document).on("page:load ready", function(){
$(".toggle-trigger").click(function(){
$(this).parents('tr').next('.extra-row').slideToggle("fast");
return false;
});
});
.CSS:
.extra-row {
display: none;
}
I am trying to animate some SVG circles across the entire body element of a webpage, but they seem to be getting clipped when they reach this line, <%= yield %> in the application.html.erb of the RoR app.
The application.html.erb looks like the following,
<!DOCTYPE html>
<html>
<head>
<title>KegCop</title>
<%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track' => true %>
<%= javascript_include_tag 'application', 'data-turbolinks-track' => true %>
<%= csrf_meta_tags %>
<%= favicon_link_tag 'favicon.ico' %>
<%= render 'layouts/ie_shim' %>
</head>
<body>
<%= render 'layouts/nav' %>
<div id="container-fluid">
<%= render 'layouts/bubbles' %>
<%= yield %>
<%= render 'layouts/footer' %>
</div>
<%= render 'layouts/google_analytics' %>
<%= render 'layouts/beer_background' %>
<%= audio_tag("/audios/bottle-open.ogg", autoplay: true, controls: false) %>
</body>
</html>
And the D3.js script that animates the bubbles, _bubbles.html.erb
w = window.innerWidth,
h = window.innerHeight;
var svg = d3.select("body").append("svg:svg")
.attr("width", w)
.attr("height", h);
var circle = svg.selectAll("circle")
.data(d3.range(70).map(function(datum,interval) {
return {
x: interval*20,
y: 0,
dx: 5,
dy: -3 * (Math.random()+1),
mu: Math.random()*2
};
}))
.enter().append("svg:circle")
.attr("r", 2.5)
.attr("fill","blue")
.attr("opacity",".5");
var text = svg.append("svg:text")
.attr("x", 20)
.attr("y", 20);
var start = Date.now(),
frames = 0;
d3.timer(function()
{
// Update the FPS meter.
var now = Date.now(), duration = now - start;
text.text(~~(++frames * 1000 / duration));
if (duration >= 1000) frames = 0, start = now;
// Update the circle positions.
circle
.attr("cx", function(d) { d.x += Math.random()*3*Math.sin(Math.random()*3*d.x + Math.random()*10); if (d.x > w) d.x -= w; else if (d.x < 0) d.x += w; return d.x; })
.attr("cy", function(d) { d.y += d.dy ; if (d.y > h) d.y -= h; else if (d.y < 0) d.y += h; return d.y; })
.attr("r",function(d)
{
return (d.y < 100) ? d3.select(this).attr("r") : d.mu*500/d.y;
});
});
Update:
Below is what I would expect to see, but it is clipping off at the bottom of the form elements on the webpage I am working with.
http://jsfiddle.net/ipatch/4C8c8/8/
I ended up changing <div id="container-fluid"> to <div class="wrapper"> and changing the wrapper CSS style to position: absolute and now the "bubbles" / SVG circles are animating across the entire <body> element of the page.
The key was setting the wrapper class to a position of absolute.
I need to retrieve the index position of each value in a list I have. I'm doing this so that I can display a gsp table with alternating row background colors. For example:
(list.indexVal % 2) == 1 ? 'odd' : 'even'
How can I get the index position number of each item in a Groovy list? Thanks!
According the documentation, the g:each tag in the gsp view allows the "status" variable
where grails store the iteration index in.
Example:
<tbody>
<g:each status="i" in="${itemList}" var="item">
<!-- Alternate CSS classes for the rows. -->
<tr class="${ (i % 2) == 0 ? 'a' : 'b'}">
<td>${item.id?.encodeAsHTML()}</td>
<td>${item.parentId?.encodeAsHTML()}</td>
<td>${item.type?.encodeAsHTML()}</td>
<td>${item.status?.encodeAsHTML()}</td>
</tr>
</g:each>
</tbody>
Any of g:each, eachWithIndex, or for loops can be used.
But, for this specific case, the index value is not needed. Using css pseudo-classes is recommended:
tr:nth-child(odd) { background: #f7f7f7; }
tr:nth-child(even) { background: #ffffff; }
If you still need to get the index, options are:
<g:each status="i" in="${items}" var="item">
...
</g:each>
<% items.eachWithIndex { item, i -> %>
...
<% } %>
<% for (int i = 0; i < items.size(); i++) { %>
<% def item = items[i] %>
...
<% } %>