I'm making a Debt management app and I have #opened_debts and #all_debts (opened and returned debts) in my controller.
By default I load only #opened_debts on page. But also I have a link for showing all debts on a page.
Show all debts
I want page to reload debts_div with #all_debts after clicking this link.
If I make a <script> tag with click event in the bottom of a page to load it with
$('#debts_div).replaceWith('<%= j render #all_debts %>');
Rails in fact renders all debts and make them invisible for user until he click the link. But it makes page loading slower with all this huge script.
Can I load this list without rendering it on a page until user clicks link?
Thanks in advance!
use rails_ujs
<%= link_to "Show all depts", model_path(), :remote => true %>
then your request will be sent as ajax. create a view for js with
_index.html
<div>some code</div>
inside index.html.erb to make DRY
<%= render :partial => 'index.html' %>
index.js.erb to make DRY
$('#debts_div).replaceWith('<%= j( render :partial => 'index', :format => :html ) %>');
that should work
Related
I have the following form for posting data using Ajax.
<%= form_tag(check_answer_path, :id =>'myForm', :method => 'post', :remote => true) do %>
some form fields here...
<%= submit_tag('Next', :class => 'btn btn-primary') %></td>
But the form does not submit when I click on the Next button. To my surprise when I remove the :id and :remote attributes the form submits with no problem(but the page reloads which i do not want).
GOAL: I want to submit the form using ajaxForm() to handle the call back i.e $("#myForm").ajaxForm(). So I need the :remote attribute and I also need to identify my form(using the :id attribute).
Why is my form not submitting when I include :id and :remote attributes?
Am using rails 3.2.8 and jquery-rails.
Thanks in advance.
Adding remote to the form tag means that it's going to send the request using JS.
So it's actually submitting the form but it's not submitting it in the expected way.
In your controller add the following:
respond_to do |format|
format.js
format.html
end
and you will be able to respond to that request place a file.js.erb in your views and place the needed js code to complete the request.
Hope that helps.
I am using pjax for main navigation and pagination (kaminari). Within the page I make ajax calls to change the state to some of the items on the page. The ajax call updates a partial which contains the pagination. The problem is that after an ajax request, the pjaxified pagination breaks. Instead of showing the links to the next/previous pages, all the links in the pagination is now the same as the last ajax call.
Here's the template being called after the ajax request, toggle_state.js.erb:
$("#link-list").html("<%= escape_javascript(render 'links') %>")
Here's the partial 'links', being rendered after the ajax call:
<%= render #links %>
<%= paginate #links %>
Forcing some of the parameters set by the ajax request to nil made it work:
<%= paginate #links, :params => {:controller => 'links', :action => 'index', :id => nil, :toggle_to => nil} %>
It kind of makes sense when you think about it, but I also think there must be a more elegant way to do it.
I have a single form partial:
<% form_remote_for(#snapshot_comment, :html => { :class => "snapshot_comment", :id => "snapshot_comment" }, :auth_key => params[:auth_key]) do |f| %>
some stuff...
<span class="button"><%= f.submit 'Submit ยป' %></span>
or cancel
<% end %>
It gets input into tooltips into a page multiple times via jQuery (targeting snapshot_id). This works well:
//Insert class and partial by targeting snapshot id
$j('<div class="info"><%= escape_javascript(render :partial => "snapshot_comments",
:locals => {
:snapshot => #snapshot,
:comments => #comments
})
%></div>').appendTo("#slide_<%= #snapshot.id %>");
The partial (snapshot_comments) contains the code for the form:
<%= render_snapshot_comment_form_for snapshot %>
The problem is that when data gets posted - it posts as many times as there are forms on the page.
So If a user enters info and clicks submit --- the content is inserted in every tooltip rather than just the tooltip it belongs to. I am using Qtip2.
Is there a way to submit the form specific to the tooltip it resides in?
If the form is being rendered multiple times per page from the same partial, then it sounds like your element IDs are the same from form to form within that page.
If your elements don't have unique IDs, then the response gets put into each place where that ID appears.
For example - if you have a page that puts results into a div with an id of "output", and that div gets rendered from a partial 5 times (each time with the same id of "output"), then you're going to see the response rendered 5 times.
Do a "view source" on your resulting page, and look for duplicate IDs, and see if that's the case.
So I have a form that is for adding topics (tags) to videos:
<%= form_for #video, :url => {:action => "update"}, :remote => true do |f| %>
<div class="field">
<%= f.text_field :topic_names, :class => "topic_field" %>
</div>
<%= f.submit "Add Topic" %>
<% end %>
However, I want the form to initially not be there and appear only after a user clicks a link. Initially I wanted to load in the form from a different file with jQuery with this code:
$("#edit_topics_link").click(function(e){
e.preventDefault();
$(".topic_form").load("topic_form.html.erb");
$("#edit_topics_link").hide();
});
The problem with this is that the second I remove the form from its original view, I get this JS error: Uncaught TypeError: Cannot set property '_renderItem' of undefined
I think this might have something to do with the fact that the form is handled with an AJAX request since I pass the :remote => true option to it.
Anyway, because of this error, I'm thinking of just keeping the form in the view and hiding it, and then showing it when the user clicks the link. Is this a bad idea? If I should be loading in the form, how can I prevent that JS error?
I would go with loading it and keeping it hidden when the page loads and then show it when they click. The form will show faster than doing another request to the server, and what does it really cost you by adding it to pages where a user may not show it? probably a millisecond worth of view load and a millisecond of http data transfer?
Although I think this is a better approach its worth noting that your error is probably resulting form this:
$(".topic_form").load("topic_form.html.erb");
You should be calling a controller/action inside the load. Jquery load makes a request to the server, and it will be calling this URL: http://yoursite.com/topic_form.html.erb. I am assuming that routes does not exist. You need to render this form from your controller action.
Is it possible to set the location you want to submit a form to dynamically at runtime with a form_tag? What I have is a shared partial view that is used to filter data on several screens. The view contains several different form fields and a submit button, so the UI for these controls is the same for all the screens that use it, thus the shared partial view. The difference is that I want the submit to go back to a different location depending upon which page the partial view is contained in. Is there someway to pass the destination in via the render tag like the following?
<%= render 'shared/event_filter', :dest => event_path %>
and then consume it within the partial view as follows?
<%= form_tag(:dest, :method => "get") do %>
The above code doesn't work, it gives me a nomethod error on the :dest in the form_tag, but I was just putting in this question to help illustrate what I was trying to do.
Any help/suggestions would be appreciated.
I think you might be looking for something along these lines:
<%= render :partial => 'shared/event_filter', :locals => {:form_action => event_path} %>
Which just renders the partial named shared/_event_filter.html.erb and passes in a variable called form_action with value of event_path.
Then inside your partial:
<%= form_tag form_action, :method => "get" do %>
<!-- snip -->
<% end %>