<% docs.forEach( function ( doc ){ %>
<div class="item">
<% if (doc.Active) { %>
<style> .item { background-color:red }</style>
<% } %>
</div>
<% }); %>
Imagine 3 docs,
doc1 (Active == true)
doc2 (Active == true)
doc3 (Active == false)
I want to give style to Active == true only. I coded like above, but the result is every div was given style. so finally all has red background, this is not what I expected.
How can I give style conditionally in EJS?
You would want to conditionally set a class like .active and have that with your CSS styles (such as the red background-color). Like this:
<% docs.forEach(function (doc) { %>
<div class="item <%= doc.Active ? 'active' : '' %>"></div>
<% }); %>
The syntax is:
<style> .item { background-color:red; } </style>
and to only set that to just one of the items, use:
<style>
.active { background-color:red; }
</style>
<% docs.forEach( function ( doc ){ %>
<% if (doc.Active) { %>
<div class="item acitve">
<% } else { %>
<div class="item">
<% } %>
...
</div>
<% }); %>
Related
I have a page of divs that I want only to appear if the proper link is clicked. Each div has an id corresponding to tag id to be displayed. For example for my tag with id 1, the link to click has an id="tag1s" and the div with the object information has an id="tag1". Here is my javascript that I want to work in the html:
<script>
$(document).ready(function() {
$('tag'+id+'s').click(function(event) {
event.preventDefault();
$('#tag'+id).toggle();
});
});
</script>
Currently this works if I put in the specific ids. But I want this to work for every id in my #tags. Here is the html:
<h1>Tags</h1>
<div class="home unlimited">
<div class="flex-container top-row">
<div class="tag-buttons">
<% #tags.each do |tag| %>
<%= link_to "#", id:"tag#{tag.id}s", class:"tag-btn" do%>
<div class="tag-button">
<%= tag.name %>
</div>
<% end %>
<% end %>
<div class="tag-button">
<%= render :partial => 'layouts/create_tags', :locals => { :tag => Tag.new} %>
</div>
</div>
<div class="tag-display">
<% #tags.each do |tag| %>
<div id=<%="tag#{tag.id}"-%> class="individual-tags">
<%= render :partial => "show_display", :locals => { :courses => #tag_relation_c[tag], :lessons => #tag_relation_l[tag], :tag => tag } %>
</div>
<% end %>
</div>
</div>
</div>
How can make it so I can have the function work for every tag_id?
It's close. Just make the selector on a class for the button press and read the id off an attribute of the button, something like this...
<script>
$(document).ready(function() {
$('tag-btn').click(function(event) {
var id = $(this).data('tag-id');
event.preventDefault();
$('#tag'+id).toggle();
});
});
</script>
Then change your markup accordingly...
<h1>Tags</h1>
<div class="home unlimited">
<div class="flex-container top-row">
<div class="tag-buttons">
<% #tags.each do |tag| %>
# The line below is all that changes
<%= link_to "#", class:"tag-btn", data: { tag_id: tag.id % } do%>
<div class="tag-button">
<%= tag.name %>
</div>
<% end %>
<% end %>
<div class="tag-button">
<%= render :partial => 'layouts/create_tags', :locals => { :tag => Tag.new} %>
</div>
</div>
<div class="tag-display">
<% #tags.each do |tag| %>
<div id=<%="tag#{tag.id}"-%> class="individual-tags">
<%= render :partial => "show_display", :locals => { :courses => #tag_relation_c[tag], :lessons => #tag_relation_l[tag], :tag => tag } %>
</div>
<% end %>
</div>
</div>
</div>
I have the following code.
<body>
<div class="container">
<div class="row">
<% for(let i=0;i<seats.length;i++) { %>
<div class="col-lg-6">
<h3> <%= seats[i].name %> </h3>
<% if(<%= seats[i].isBook %> == false) { %>
<% document.querySelector("h3").disabled = true; %>
<% } %>
</div>
<% } %>
</div>
</div>
I get the following error:
Error: Could not find matching close tag for "<%".
at d:\seat booking\node_modules\ejs\lib\ejs.js:710:19
at Array.forEach()
...
The Problem is your if sentence. You are opening the tag <% and before closing it you are opening another one, which doesn't work and is not needed.
You can try the following:
<div class="container">
<div class="row">
<% for(let i=0;i<seats.length;i++) { %>
<div class="col-lg-6">
<h3> <%= seats[i].name %> </h3>
<% if(seats[i].isBook == false) {
document.querySelector("h3").disabled = true;
} %>
</div>
<% } %>
</div>
</div>
As you can see, I did not just remove the tags within the if(..). The other tags I removed are also unnecessary, because you don't have any HTML code in between your if sentence.
I have a page that makes a foreach and show some photos like this
<% imgs.forEach(function(img) { %>
<img src="uploads/<%=user.username%>/screenshots/<%= img %>">
<% }); %>
And I want make a if statement because, in case that not photos to show gives a message like this:
"no photos uploaded"
Something like this:
<% if(imgs.length > 0){ %>
<% imgs.forEach(function(img) { %>
<img src="uploads/<%=user.username%>/screenshots/<%= img %>">
<% }); %>
<% } else{ %>
<p>no photos uploaded</p>
<% } %>
Reference
The shorthand version is correct, but it does have a syntax error
<%= role === 'admin' ? 'Super Admin' : 'Admin' %>
Or
<% if(role === 'admin'){ %>
<p>Super Admin</p>
<% } else{ %>
<p>Admin</p>
<% } %>
Yes , Here is short hand version :
<%= role == 'A' ? 'Super Admin' : 'Admin' %>
Do you mean something like this...?
<% if (kindOfDay === "Sarturday" || kindOfDay === "Sunday") { %>
<h1 style="color: green;"><%= kindOfDay %> Todo List</h1>
<% } else { %>
<h1 style="color: blue;"><%= kindOfDay %> Todo List</h1>
<% } %>
I am using $.getJSON in a jquery script to get data from a php file and display it in a template(underscore).
My template:
<script type="text/template" id="user-template">
<% _.each(users, function(user){%>
<div class="id"><%=user.id%> </div>
<div class="name"><%= user.name %></div>
<div class="city"><%= user.city %></div><br />
<% }); %>
</script>
My script:
$.getJSON(url, function(data){
var results = userTemplate({ users: data.users}),
$("#theresults").html(results);}
On each page im listing 10 users (or 10 results). The code works fine. I want to be able to show another div after every 4 results. Like an ad or a promotional content.
<div id="mycustomdiv">Custom DIV</div>
How do i do that?
Thanks.
Just use the second argument of the callback function to determine the current index
<% _.each(users, function(user, index){%>
<div class="id"><%=user.id%> </div>
<div class="name"><%= user.name %></div>
<div class="city"><%= user.city %></div><br />
<% if(index !== 0 && (index % 4) === 0) { %>
<div id="mycustomdiv">Custom DIV</div>
<% } %>
<% }); %>
i have two div id=left and div id=right. now, there are multiple checkboxes with item listed in left div. when i select one check box then that item should remove from left div and added to right div and do it same for move selected item from div id=right to div id=left. and when i click one check box its status also updated in database. so tell me how to perform this task with jquery-ajax in rails 3.
Script :
<script>
$(function () {
$(".checkbox").click(function() {
$('.allchkb').each(function(){
var item = $(this).attr('id');
if($(this).is(':checked')){
$("#right > span."+item).appendTo("#left");
$(this).siblings("#left").css("text-decoration","line-through");
$(this).siblings("#left").css("color","#aaa");
$(this).parent('li').css("background-color","#ccc");
}
else
{
$("#left > span."+item).appendTo("#right");
}
});
});
});
</script>
rails code:
<div class="box-body box-body-nopadding" id="left">
<% #activity.each do |p| %>
<% p.task.each do |t| %>
<ul class="tasklist">
<li class="bookmarked">
<label class="checkbox">
<%= check_box_tag 'activity_status', task.id, :class => 'checkbox'%>
<%= link_to task.title, mytask_path(#task), :title => "is responsible. , Total my task : " %>
<span class="task-actions">
<%= link_to "Edit", task(#activity) %> |
<%= link_to "delete", #task, :method => :delete %>
</span>
<span class="task-actions">
<%= task.due_date %>
</span>
</li><li>
</li>
</ul>
<% end %>
<% end %>
</div>
<div class="box-body box-body-nopadding" id="right">
</div>