i'm trying to get the content of a div to change when i click a link. i can see from the console that the partial and the js is being rendered, however, my html does not update
in index.html:
<div id="test">this is supposed to change</div>
...
<%= link_to 'planner', test_path(:budget => "b2", :size => "g2", :age => "a1", :activity => "l2", :tourist => "t2", :city => "boston"), :method => :get, :remote => true, :id => "linkto" %>
in my planner_controller:
respond_to do |format|
format.html
format.js {render :layout => false}
in update.js.erb:
$("#test").update(" <%= escape_javascript(render('load')) %>")
_load.html file:
<p> test </p>
could the error be that i'm just testing the code, and not actually doing anything with the results of the query?
You are updating an element with an id of test but you don't have that element anywhere on your page.
$("#test").update(" <%= escape_javascript(render :parial => "load") %>")
Try this
You can use replaceWith() in place of update()
$("#test").replaceWith(" <%= escape_javascript(render('load')) %>")
Related
In my project I show last 4 comments on a post and then when someone click on the expand comments link rest of the comments should show. I have following code
<%= link_to demo_expand_comments_path(:post_id => post.id, comment_id => comment_id ), remote: true do %>
This is the link to expand comment.
<div id="comments_container_<%= post.id %>">
<%= render :partial => 'community/comments/comment_box_posts', :collection => post.comments.order('id DESC').limit(4).reverse, :as => :comment %>
</div>
Here I am rendering first 4 comments
Now when someone click on expand comments, expand_comments action is called and in expand_comment.js.erb has following code
$('#comments_container_<%= #post_id %>').prepend('<%= escape_javascript(render :partial => 'community/comments/comment_box_posts', :collection => #comments, :as => :comment) %>');
controller action
def expand_comments
#post_id = params[:post_id]
post = Post.find(params[:post_id])
#comments = post.comments.where('id < ?', params[:comment_id]).order("created_at ASC")
I need the last shown comment_id here
respond_to do |format|
format.js{}
end
end
Now what I need help is that when expand comments action is called I want to send the post id and the last comment id I am showing now.
There are several ways to do this. You can change your "expand comment" link as well as you render comments.
In controller:
def expand_comments
...
#comment_id = #comments.last.id
Then in expand_comment.js.erb:
$('#comments_container_<%= #post_id %>').prepend('<%= escape_javascript(render :partial => 'community/comments/comment_box_posts', :collection => #comments, :as => :comment) %>');
$('#id_of_link').attr('href', '<%= demo_expand_comments_path(:post_id => #post_id, comment_id => #comment_id ) %>');
But it is not way I like.
Don't send comment_id parameter like url parameter. You should send it by ajax request.
Remove comment_id parameter from url, store it like data-attribute:
<%= link_to demo_expand_comments_path(:post_id => post.id), data: {comment_id: #comment_id} do %>
This is the link to expand comment.
...
Note that you have to remove "remote: true" from link_to too.
Send ajax request when link clicking:
$('#id_of_link').click(function() {
$.ajax({
type: "get",
url: $(this).attr('href),
data: { comment_id: $(this).data('comment_id') },
dataType: 'script'
});
return false;
});
And update comment_id attribute when comments rendering:
$('#comments_container_<%= #post_id %>').prepend('<%= escape_javascript(render :partial => 'community/comments/comment_box_posts', :collection => #comments, :as => :comment) %>');
$('#id_of_link').data('comment_id', '<%= #comment_id %>');
I'm not sure why the Chosen Plugin is not being called when my form partial is dynamically called.
Relative Gems -
rails, 3.1.0
cancan, 1.6.7
dynamic_form, 1.1.4
simple_form, 2.0.1
jquery-rails
Scenario -
I have a page called /index and you can add a House, Dog or Cat. The page starts out blank but has links on the side that you can click to dynamically bring up one of the forms. These forms are in a their own partials.
DogsController
def new
#dog = Dog.new
respond_to do |format|
format.js
end
end
dogs/_form.html.erb
<%= simple_form_for(#dog, :remote => true, :html => { :class => 'form-horizontal span8' }) do |f| %>
<%= render :partial => "shared/error_message", :locals => { :f => f } %>
<%= f.association :house, :prompt => "Select a House", :input_html => { :id => "house-select", :class => "span4" } %>
<%= f.button :submit, 'Done', :class => 'btn-primary span2' %>
<% end %>
PagesController
def index
#cats = current_user.cats.all
#dogs = current_user.dogs.all
respond_to do |format|
format.html
end
end
pages/index.html.erb
<li><%= link_to "Dog", new_dog_path, :remote => true %></li>
<li><%= link_to "Cat", new_cat_path, :remote => true %></li>
<div id="generate-form">
<div class="ajax-loader"></div>
</div>
dogs/new.js.erb
$("#generate-form").html("<%= escape_javascript(render(:partial => 'dogs/form', locals: { dog: #dog })) %>");
All of this code successfully brings up the chosen form on a link click.
My dog model is the same as the cat one. These are the ones with the Chosen plugin issue. Now why isn't the Chosen plugin detected when either form is brought up?
Answer
dogs/new.js.erb
$("#generate-form").html("<%= escape_javascript(render(:partial => 'dogs/form', locals: { dog: #dog })) %>");
$('.house-select').chosen();
I don't see any call to the chosen plugin in your code sample, but I've had the same issue.
The initial call to $('.chzn-select').chosen() will apply to all DOM elements that are on the page at the time, but not to elements that get added later.
To add the plugin to the new .house-select elements that are inserted via AJAX, add this to the end of dogs/new.js.erb:
$('#generate-form .house-select').chosen();
It's worth noting that you can safely run the jQuery .chosen() function on a select box more than once. It adds its own css classes to track which ones have had chosen applied and will gracefully ignore them on consecutive runs.
I am having some problems with link_to remote sending a post to another controller... The result are not quite what I expect..
I have this in node_content.html.erb:
<% #node.videos.each do |vid| %>
<div id="vid_vid"><%= link_to image_tag("http://img.youtube.com/vi/#{vid.content}/1.jpg"), :controller => 'videos', :action => "iframize", :video_id => vid.id, :method => :post, :remote => true %></div>
<% end %>
And I have this in videos_controller:
def iframize
#video = Video.find(params[:video_id])
respond_to do |format|
format.js
end
end
And this in routes:
resource :videos do
collection do
post 'iframize'
end
end
Problem is that when I click the link, it takes me to
http://localhost:3000/videos/iframize?method=post&video_id=20
and I get
Couldn't find Video with id=iframize
I looked through tens of various examples and they seem to recommend the above, but it does not work.. What am I doing wrong?
Any input greatly appreciated!
Thanks!
EDIT:
I tried this approach jquery function and it kinda worked (only for the first video in the loop of course):
<% #node.videos.each do |vid| %>
<%= image_tag("http://img.youtube.com/vi/#{vid.content}/1.jpg", :id => 'img_div') %>
<div id="vid_vid"> <%= vid.id %></div>
<% end %>
$('#img_div').on({
'click': function() {
var vid_id = document.getElementById("vid_vid").innerHTML;
$.post("/videos/iframize/", {video_id: vid_id});
}
});
Do you have rails_ujs included via jquery_ujs in assets/application.css file
= link_to image_tag("http://img.youtube.com/vi/#{vid.content}/1.jpg"), "url_path", :method => :post, :remote => true
Convert the following into a rails path: like iframeize_videos_path (generated via rake routes)
:controller => 'videos', :action => "iframize", :video_id => vid.id,
You need to differentiate the url options, html options.so use
<%= link_to image_tag("http://img.youtube.com/vi/#{vid.content}/1.jpg"),
{ :controller => 'videos', :action => "iframize", :video_id => vid.id },
{ :method => :post, :remote => true} %>
In my new.html.erb page, i use the following line to render a partial and it works fine.
<%= render :partial => "submissions/player_form", :locals => { :submission => #submission } %>
Now i want to render exactly the same partial via RJS
<p>Player Type: <%= f.select(:PLAYER_TYPE, $playersList, {:prompt => 'Select the Player Type'} %></p>
<%= observe_field("submission_PLAYER_TYPE", :frequency => 1,
:url => { :controller => 'submissions',
:action => :display_player_form },
:with => "'player='+value") %>
display_player_form.rjs:
page.replace_html 'observed_assay_form', :partial => 'submissions/player_form', :locals => {:submission => #submission }
Nothing is displayed!!
Am i missing something??
Thanks for helping me out with this :)
I finally figured it out. So here are my findings:
In the partial, include the form_for tag, just like in the original form--
<% form_for #object do |f| %>
In the action used when observing the field, in my case, 'display_player_form', create a new instance of the object(see below)
#object = Object.new
In your rjs file, enter the following:
page['id of div'].replace_html :partial => 'your_partial_name'
There you go...
Hope this helps
I would rename display_player_form.rjs to display_player_form.js.erb and have its contents look like this:
$("#observed_essay_form").html('<%=
escape_javascript(
render :partial => 'submissions/player_form', :locals => {:submission => #submission }
)
-%>');
$("img[src$='spinner.gif']:visible").hide(); // optional - hide any visible spinner.gif images
I use jQuery, not Prototype, by the way.
I have a form that when I click submit, should update a partial that is on the same page...
When I place this here:
page.replace_html 'show_cards_div', 'Hello'
It does just as it should, display hello when I need it to. But when I make it into this....
page.replace_html 'show_cards_div', :partial => "reloadThisPartial"`
It simply does not do anything. What am I doing wrong?
The request might not be an Ajax call. Make Ajax call. User remote_form_for instead of form_for or use jquery.form for sending ajax calls to controller. If you are using jquery then do something like:
<%= javascript_include_tag "jquery-1.4.4.min.js", "jquery.form" %>
<%= form_for :user, :url => {:controller => "come_controller",:action => "some_action"}, :html => {:id => 'form_id', :class => 'cmxform', :onsubmit => "return false;"} do |f| %>
......................................
<% end %>
<script type="text/javascript">
$('#form_id').submit(function() {
var container = $("#show_cards_div");
$(this).unbind('submit').ajaxSubmit({
success: function(data) {
container.html(data);
}
})
return false
});
</script>
in controller do something like this.
render :partial => "reloadThisPartial", :layout => false, :locals =>{:users =>#users}