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
Related
As far as I can tell button_to is for submitting a form. Is there something in rails dedicated for buttons that just run some javascript on the client without sending anything to the server?
If you want to run only javascript on client side, you can add plain html button and call some function to run your required javascript, by binding an event to that button. You dont need to use rails code at all.
That has nothing to do with rails but rather HTML.
You can always place normal HTML markup (like a <button> or a <a> on the form and make it trigger some action in JavaScript)
Sample:
<%= form_for(#post) do |f| %>
...
<button id="clicktrigger">Click Me!</button>
<% end %>
Please try this:
you can call javascript function using onclick. It will not submit a form.
<%= submit_tag "Test me!", :type => 'button', :onclick => 'alert("It works!")' %>
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.
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.
I have the following form in my Rails application:
<% form_tag password_resets_path, :id => 'recoverPasswordForm' do %>
<label for="passwordRecoveryEmailAddress">Email Address:</label>
<%= text_field_tag "passwordRecoveryEmailAddress" %>
<%= submit_tag 'Recover' %>
<br />
<div id="forgotPasswordLoginLinkContainer">
<a id="forgotPasswordLoginLink" href="/login">Login Instead</a>
</div>
<% end %>
When this form is submitted, the page must reload. I would like to easily turn this form into an AJAX form, such that the form submits via AJAX, and a page reload does not happen.
I could do this easily using jQuery, hooking into the .submit() function. But, I am curious: does Rails provide some easy way to turn any given form into an AJAX form? Or, what's the simplest (yet elegant) way possible? Maybe something like
<% form_tag password_resets_path, :id => 'recoverPasswordForm', :ajax => true do %>
I'm using Rails 2.
Yes, and you were close with your guess. Rails 3 allows you to do form_tag ..., :remote => true to let the form use AJAX if Javascript is available.
See http://railsapi.com/doc/rails-v3.0.0/classes/ActionView/Helpers/FormTagHelper.html#M002483
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.