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>
Related
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.
How to combine this search form
<%= form_tag index_path, :method => 'get' do %>
<%= text_field_tag :search, params[:search]%>
<%= submit_tag "search", :title => nil %>
<% end %>
with this bootstrap style
<div class="row">
<div class="input-group">
<input type="text" class="form-control" placeholder="Search for...">
<span class="input-group-btn">
<button class="btn btn-default" type="button">search</button>
</span>
</div>
</div>
You can add any class you like to any Rails form tag. You just need to be careful that your method call matches one of the valid call signatures for the tag helper. For instance, the API for the form tag is documented here.
Here is my take on combining the above. This may need some tuning:
<div class="row">
<%= form_tag index_path, :method => 'get', class: 'input-group' do %>
<%= text_field_tag :search, params[:search], class: 'form-control', placeholder: 'Search for...' %>
<span class="input-group-btn">
<%= submit_tag "search", class: "btn btn-default" %>
</span>
<% end %>
</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.
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");