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.
Related
I have created a form,
<%= semantic_form_for [:admin, #resource], builder: ActiveAdmin::FormBuilder do |f| %>
<%= f.semantic_errors %>
<%= f.inputs do %>
<%= f.input :resource_template, :as => :select, :collection => Resource.select {|r| r.resource_template ==true }, :input_html => { :style => 'width: 20%;'} %> //added now ,just to try out how it may work.
<%= link_to 'COPY', admin_root_path, class: 'myButton' %> //added now,just to try out how it may work.
<%= f.input :title %>
<%= f.input :url %>
<%= f.actions %>
This form helps us creating new resources, now I have added a drop-down to select old existing resources.
How can i pre-fill the rest of form after clicking COPY of whatever value selected in the dropdown list?
User might edit some prefill value and create its own new resource accordingly.
Unless you're OK with submitting the form immediately after the user selects an option, which id probably a bad idea, you're going to have to do this with JavaScript.
The exact implementation depends largely on how your app is configured, but the general approach would probably be something like:
Add an endpoint in your resources controller that accepts an POST request with an :id param and returns a JSON version of your resource
Add a change listener on your select box that sends a POST request to the endpoint in step 1. You'll also have to send the resource id as a param.
If the response from the endpoint in step 1 returns any data, use the keys and values in the JSON data to fill the form fields accordingly
This is a fairly broad question, so it's hard to give you a more detailed answer without knowing which JavaScript frameworks you have in your app, but this should point you in the right direction.
On clicking of copy button you need to fire an ajax request with option selected in the select box, get data in controller with which you want to fill the form, in success callback of your ajax request , fill the fields returned from the ajax request.
I'm trying to create a very small simple form that edits a single checkbox, and submits automatically with AJAX when the checkbox is modified. Here's the code, which other SO questions imply should work:
<%= form_for(workitem, :remote => true) do |f| %>
<%= f.check_box :is_complete, :onchange => 'this.form.submit()' %>
<% end %>
The problem is that this results in a full page HTML submit, rather than an AJAX submit. How do I trigger an AJAX submit?
This seems to work:
$(this.form).submit();
Good 'ol jquery to the rescue.
This is simply in Rails way :
$("#myform").trigger('submit.rails');
find it here : same question
I'm having some trouble and I hope someone can help me. I have an erb file with a form in it that has a button. When you click the button it redirects the page elsewhere and shows the erb file that I told it to point to. This is great except I'd really like to stuff the content of that directed-to erb file into a div that is sitting below my form. My view looks something like this.
<div id="formentry">
<%= form_for #time, :url => {:action => 'list'}, :remote => true, :update => 'results' do |f|%>
<%= select :time, :period, TimeSelectModel::TIMEVALUES %>
<%= f.submit "Submit" %>
<% end %>
</div>
<div id="results"></div>
From what I've read online this seems like the approach you're supposed to take to do this in Rails3 but I'm not finding that it's working. (see: the page is completely redirecting) What am I doing wrong? Thanks.
My impression from your post is that you want to submit a form and show the results without leaving the page. What you are looking to do requires use of javascript/ajax.
Checkout railscast 205 for an example of how to do this.
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 %>
I want to reload a part of a form generated with the form_for-helper via AJAX.
After reloading the part I still want to have access to the form object.
How can I do this?
Best regards
I am not sure if your are using different terminology than I've heard, but what do you mean "still want to have access to the form object"?
Do you mean access to it in JavaScript? That should still work as long as you don't overwrite the form tags.
Do you mean in the html.erb code generating the partial? That doesn't really make sense, because that form_for object has already generated its html tags and gone out of scope. You need to use to the regular form of the helpers that takes the name of the object as the first parameter. There is no problem with this working with the tags generated by the form_for version of the helpers.
So, in your main page:
<%= form_for :person, #person, :url => { :action => "create" } do |f| %>
<%= f.text_field :name %>
<div id="reloadable">
</div>
<% end %>
And in your partial that fills that div:
<%= text_field :person, :name %>
No step 3.