I use ejs to display the information but I am having trouble displaying only one document. I would like to display one document until user clicks the next button.
View:
<div>
<h1>This is the movie page</h1>
<ul>
<% for(var i =0; i < movies.length; i ++) {%>
<li>
<span style="font-weight: bold">Title:</span> <%= movies[i].DVD_Title %>
</li>
<li>
<span style="font-weight: bold">Studio:</span> <%= movies[i].Studio %>
</li>
<li>
<span style="font-weight: bold">Genre:</span> <%= movies[i].Genre %>
</li>
<li>
<span style="font-weight: bold">Year:</span> <%= movies[i].Year %>
</li>
<br>
<% } %>
<button type="button" id="prev">Prev </button>
<button type="button" id="next">Next</button>
</ul>
</div>
Controller:
var express = require('express');
var router = express.Router();
var moviesModel = require("../models/movies");
/* GET /movies/ listing. */
router.get('/', function(req, res, next) {
moviesModel.find({}).where('Price').gt(10000).exec(function(err,movies){
if(err) throw err;
res.render('movies', {movies:movies});
});
});
module.exports = router;
Link to my repo found here.
Thanks!
Since the mongodb query data is returned to the view as an json objects I cannot increment it. I have to push it to its own array and increment that.
Here is my new view:
<div>
<h1>This is the movie page</h1>
<ul>
<% var movieArray = new Array();
for(var i =0; i < movies.length; i ++) {
movieArray.push(movies[i]);
}
var x = 0;
%>
<li>
<span style="font-weight: bold">Title:</span> <%= movieArray[x].DVD_Title %>
</li>
<li>
<span style="font-weight: bold">Studio:</span> <%= movieArray[x].Studio %>
</li>
<li>
<span style="font-weight: bold">Genre:</span> <%= movieArray[x].Genre %>
</li>
<li>
<span style="font-weight: bold">Year:</span> <%= movieArray[x].Year %>
</li>
<br>
<h1><%= movieArray.length %></h1>
<button type="button" id="prev" onClick="prev_movie">PrevĀ </button>
<button type="button" id="next" onClick="next_movie">Next</button>
</ul>
</div>
Once Prev or Next is pushed the x value will decrease or increase unless user reaches -1 or array.length.
Related
I have the following navbar in my Rails app. I can't figure out why the search button, which is an image, won't stay inline to the right of the search form. I'm sure there is a some parent CSS that is preventing it, but I can figure it out.
<nav class="navbar navbar-static-top navbar-default" role="navigation">
<div class="container">
<div class="navbar-header">
<%= link_to "theTens", root_path, class: "navbar-brand" %>
</div>
<div class="collapse navbar-collapse navbar-ex1-collapse">
<ul class="nav navbar-nav navbar-left">
<li>
<%= link_to 'theReviewers', reviewers_path %>
</li>
<li>
<%= link_to 'theComments', comments_board_path %>
</li>
<li>
<%= link_to 'theStats', stats_path %>
</li>
<li>
<form action="/pins" class="form-inline col-xs-12" method="get">
<input id="search" type="text" name="search" class="form-control" placeholder="Search">
<%= image_submit_tag("search.png", :name => nil) %>
</form>
</li>
</ul>
<div class="collapse navbar-collapse navbar-ex1-collapse">
<ul class="nav navbar-nav navbar-right">
<% if user_signed_in? %>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown"> theMenu
<span class="caret"></span>
</a>
<ul class="dropdown-menu">
<li class="dropdown-toggle"><%= link_to 'Add +', new_pin_path %></li>
<li><%= link_to 'Edit Profile', edit_user_registration_path %></li>
<li><%= link_to 'Logout', destroy_user_session_path, method: :delete %></li>
</ul>
<li><%= link_to (image_tag current_user.image(:small), class: "smallpic"), current_user %></li>
<% else %>
<li><%= link_to 'Login', new_user_session_path %></li>
<% end %>
</ul>
</div>
</div>
I was trying use nested if in eco template. Here is my code
<% for document in #getCollection('posts').toJSON()[#document.page.startIdx...#document.page.endIdx]: %>
<% if true %>
<p> <%= new Date(document.date.toDateString()).getTime() <= new Date(new Date().toDateString()).getTime() %> </p>
<div class='row-fluid'>
<div class='span12 blogShadow'>
<div class="row-fluid">
<div class='span12 archiverow'>
<span>(<%= document.date.toDateString() %>) => </span>
<span>
<%= document.title %>
</span>
</div>
</div>
<div class="row-fluid archiverow">
<% if document.img:%>
<img class="span1" src="<%= document.img %>" width=100 height=100 />
<span class="span11"><%= document.description %></span>
<% else: %>
<span class="span12"><%= document.description %></span>
<% end %>
</div>
</div>
</div>
<% end %>
<br/>
<br/>
<% end %>
if I remove first if with its corresponding end statement things working fine, but if I put that it is giving parsing error with message unexpected dedent.
for the else statement down there
<% else: %>
<span class="span12"><%= document.description %></span>
<% end %>
I am new to eco and I don't understand the message. Is this kind of nested if is possible and if not what is the work around for this.
As, I am using docpad and eco I am using as template engine.
Please let me know if any further details is required.
I able to solve the issue by following code. I was missing : to evaluate expression.
<% for document in #getCollection('posts').toJSON()[#document.page.startIdx...#document.page.endIdx]: %>
<% if (new Date(document.date.toDateString()).getTime() <= new Date(new Date().toDateString()).getTime()): %>
<div class='row-fluid'>
<div class='span12 blogShadow'>
<div class="row-fluid">
<div class='span12 archiverow'>
<span>(<%= document.date.toDateString() %>) => </span>
<span>
<%= document.title %>
</span>
</div>
</div>
<div class="row-fluid archiverow">
<% if document.img:%>
<img class="span1" src="<%= document.img %>" width=100 height=100 />
<span class="span11"><%= document.description %></span>
<% else: %>
<span class="span12"><%= document.description %></span>
<% end %>
</div>
</div>
</div>
<% end %>
<% end %>
both if is working without any issue.
i have a view called Index with 4 partial view like _tab1,_tab2,_tab3 and _tab4 , each partial view has form fields including submit and cancel button, when i click on _tab4 cancel button i want to reload the same _tab4 partial view with form data cleared.
<ul class="tab">
<li class="active" id="tab1">tab1</li>
<li class="" id="tab2">tab2</li>
<li class="" id="tab3">tab3</li>
<li class="" id="tab4">tab4</li>
</ul>
<div class="tabbody" style="display: block; ">
<% Html.RenderPartial("_tab1"); %>
</div>
<div class="tabbody"style="display: block; ">
<% Html.RenderPartial("_tab2"); %>
</div>
<div class="tabbody"style="display: block; ">
<% Html.RenderPartial("_tab3"); %>
</div>
<div class="tabbody" style="display: block; ">
<% Html.RenderPartial("_tab4"); %>
</div>
Each partial view has submit and cancel button
Mark each of your divs with unique id:
<div id="tab1-content" class="tabbody" style="display: block; ">
<% Html.RenderPartial("_tab1"); %>
</div>
Execute some jQuery code on cancel button click function:
$("cancelTab1buttonselector").click(function() {
$.get("#Html.Action("Tab1")", function(data) {
$("#tab1-content").html(data);
});
});
Where "cancelTab1buttonselector" is selector for cancel button in tab1. Do same for each tab.
You need to create controller's actions returning each tab content as PartialViewResult:
public ActionResult Tab1()
{
var model = ...get model...
return PartialView("_tab1", model);
}
Try just load ur partials to the wrapper with data check attribute
html:
<ul class="tab">
<li class="active tab" id="tab1" data-tabid="tab1">tab1</li>
<li class="tab" id="tab2" data-tabid="tab2">tab2</li>
<li class="tab" id="tab3" data-tabid="tab3">tab3</li>
<li class="tab" id="tab4" data-tabid="tab4">tab4</li>
</ul>
<div class="tabbody" style="display: block; ">
<% Html.RenderPartial("_tab1"); %>
</div>
jquery :
$(document).on('click','.tab',function(){
var tabId = $(this).data('tabid');
if(tabId=='tab1'){
$('.tabbody').empty().load('/Controller/_tab1');
}
if(tabId=='tab2'){
$('.tabbody').empty().load('/Controller/_tab2');
}
if(tabId=='tab3'){
$('.tabbody').empty().load('/Controller/_tab3');
}
if(tabId=='tab4'){
$('.tabbody').empty().load('/Controller/_tab4');
}
});
Why lists all the tags?
I use:
<div class="tags">
<ul>
<% for tag, item of #getTagCloud(): %>
<li><a class="tag_item" href="<%= item.url %>" data-tag-count="<%= item.count %>" data-tag-weight="<%= item.weight %>"><%= item.tag %> (<%= item.count %>)</a></li>
<% end %>
</ul>
</div>
How to display a specific page tags?
<div class="tags">
<ul>
<% for tag in #document.tags: %>
<li><a class="tag_item" href="<%= #getTagUrl(tag) %>"><%= tag %></a></li>
<% end %>
</ul>
</div>
I have the models Dog and Category with their forms being on the same page. I'm using the Chosen Plugin and when I add a category it doesn't update the category select for the dog form. Both of them are remote forms and are created the same way so the new.js.erb and create.js.erb are basically the same:
pets/index.html.erb
<div class="tabbable">
<ul class="nav nav-tabs">
<li class="active">
Dog
</li>
</ul>
<ul class="nav nav-tabs">
<li class="active">
Category
</li>
</ul>
<div class="tab-content">
<div class="tab-pane active add-dog-form" id="tab1">
<%= render "dogs/form" %>
</div>
</div>
<div class="tab-content">
<div class="tab-pane active add-category-form" id="tab2">
<%= render "categories/form" %>
</div>
</div>
</div>
dogs/new.js.erb
$('.add-dog-form').html('<%= escape_javascript(render(:partial => 'dogs/form', locals: { dog: #dog })) %>');
dogs/create.js.erb
$('.add-dog-form').html('<%= escape_javascript(render(:partial => 'dogs/form', locals: { dog: #dog })) %>');
dogs/_form.html.erb
<%= form_for(#dog, :remote => true) do |f| %>
<%= f.text_field :name %>
<%= f.select :category_ids, Category.all.collect {|c| [c.name, c.id]}, {},
{ :multiple => true, :class => "category-select" } %>
<%= f.submit %>
<% end %>
application.js
jQuery( function($) {
// Chosen Select Menu
$('.category-select').chosen().trigger("liszt:updated");
});
Anyone else work with this plugin and/or know how to update the select menu?
In application.js
Instead of:
$('.category-select').chosen().trigger("liszt:updated");
Use:
$('.category-select').trigger("liszt:updated");