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}
Related
For example, I use data remote for the pagination like this :
<%= paginate #products, :remote => true %>
It works. But the problem is I have multiple lists to paginate in one page. So, I need a way to send the call to a separate files so I can render the appropriate content. How can I do this?
My index.js.erb :
<% if params[:list] %>
$('#products').html('<%= escape_javascript render(#products) %>');
$('#paginator').html('<%= escape_javascript(paginate(#products, remote: true, param_name: 'list' ).to_s) %>');
<% end %>
For this you need to add another param with paginate.
<%= paginate #products, :remote => true, :param_name => param_name %>
This params name will pass as parameter to controller so you can control which ajax pagination you are calling.
If you are calling same action then on the basis of param name you can change the value of #products also. One more thing you need to consider in your xxxx.js.erb file you need to render paginate object also.
In your js file you can change html on the basis of param also.
- if params[:xxx]
$('#xxx').html('#{escape_javascript render(:partial =>"partial_name",:locals => { :posts => #products, :param_name => 'xxx'})}');
$('#xxx #paginator').html('#{escape_javascript(paginate(#products, :remote => true, :param_name => 'xxx').to_s)}');
- if params[:yyy]
$('#yyy').html('#{escape_javascript render(:partial =>"partial_name",:locals => { :posts => #products, :param_name => 'yyy'})}');
$('#yyy #paginator').html('#{escape_javascript(paginate(#products, :remote => true, :param_name => 'yyy').to_s)}');
In your controller you should use param_name instead of params page
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 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')) %>")
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 will not submit:
<% form_for :venue, :html => { :id => "create_venue_form" } do |f| %>
<%= render :partial => 'venues/venue_form_fields', :locals => { :f => f } %>
<%= submit_to_remote 'add_venue_button',
'Save Venue',
{
:url => add_venue_path(#user.id),
:before => "alert(this.form);",
:html => {
:id => "add_venue_button"
},
:update => "venue_select"
}
%>
<% end %>
The problem is that this.form is null when prototype goes to serialize the form. I have put the alert statement in other forms and this.form popped up to be an HTML form element, so I know it should not be evaluating to null.
Does anyone know why this might be happening?
Thanks!
You can't create nested forms in HTML. You can put that nested form in a div and use serializeElements to serialize all inputs within that div.
If you are doing an AJAX update, which is how it appears, you should look at remote_form_for
Peer