Why doesn't the chosen plugin update? - jquery-chosen

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");

Related

Displaying a single document from a mongo database?

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.

Ruby on Rails. How to combine a search form with bootstrap style?

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>

Inline-block for search form in Bootstrap 3

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>

docpad plugin-tagging Why lists all the tags?

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>

How to set a file_upload control for a field in rails_admin?

I'm new to rails and I recently discovered rails_admin.
How to set a file_upload control for a field in rails_admin?
If you are using the Carrierwave gem for your file uploads you can do something like this
https://gist.github.com/884835 or in erb if you prefer that:
<%= label_tag "#{field.abstract_model.to_param}_#{field.name}", field.label %>
<div class="input">
<% image = field.bindings[:object].send(field.name) %>
<% if image.path %>
<div class="row">
<% default_version = image.versions[:main] %>
<%= image_tag default_version && default_version.url || image.url %>
<br />
<%= form.check_box "remove_#{field.name}" %>
<%= form.label "remove_#{field.name}", "Remove existing #{field.label.downcase}", :class => "inline" %>
</div>
<% end %>
<div class="row">
<%= form.file_field field.name, :class => "fileUploadField #{field.has_errors? ? "errorField" : nil}" %>
<%= form.hidden_field "#{field.name}_cache" %>
</div>
</div>