I have the following form:
= form_tag '/posts', {id: "link-form"} do
= text_field :post, :link
= submit_tag "Add link", {id: "submit-button"}
, which renders:
<form accept-charset="UTF-8" action="/posts" id="link-form" method="post">
<div style="margin:0;padding:0;display:inline">
<input id="post_link" name="post[link]" type="text">
<input id="submit-button" name="commit" type="submit" value="Add link">
</form>
It seems that Rails automatically add another div in the second line:
<div style="margin:0;padding:0;display:inline">
This div inherits everything from its parents, and I can't get access to this div (such as assigning an ID) to change its appearance.
How I can access this div, or how to go around it?
Its div for hidden inputs with existing data.
You do not have to touch it.
Related
I wanna do this in rails way.
<form action="/home/result" method="GET">
<input name="hidden-query" value="hidden-data" type="hidden" >
<input name="public-query" value="public-data">
</form>
I tried with
<%= link_to 'TO RESULT',home_result_path(public_query: public_data,hidden_query: hidden_data)%>
It shows hidden_query parameter in view's url.
What I wanna do is hiding hidden_query.
How can I do it? Thanks!
problem: I have a form but the submit button doesn't do anything.
i instantiate the class the form is for in the employee_controller controller.
def employee
#body_class = "employee membership"
#employee_contact_form = CorporateContactForm.new
end
I create the form in the page the above controller action serves
= simple_form_for [#employee_contact_form] do |f|
= f.input :firstname
= f.button :submit
In my routes I set the resources for the contact forms
resources :corporate_contact_forms
I then have a controller that serves the form
class CorporateContactFormsController < ApplicationController
def create
raise
end
I am aware there is no code in the corporatecontactcontroller, but the submit button should at least fire to an error. It doesn't do anything.
This feels like such a simple problem, and surely it is.
What am I missing?
update
html output
<form>
<form accept-charset="UTF-8" action="/corporate_contact_forms" class="simple_form new_corporate_contact_form" id="new_corporate_contact_form" method="post"><div style="display:none"><input name="utf8" type="hidden" value="✓" /><input name="authenticity_token" type="hidden" value="7iMwWQOuyzV3jJt4jTtr9MGvI129hPaG+m+Pe2D3YyM=" /></div> <div class="input string optional corporate_contact_form_firstname"><label class="string optional" for="corporate_contact_form_firstname">Firstname</label><input class="string optional" id="corporate_contact_form_firstname" maxlength="255" name="corporate_contact_form[firstname]" size="255" type="text" /></div>
<input class="button" name="commit" type="submit" value="Create Corporate contact form" />
</form>
</form>
According to the documetation (http://api.rubyonrails.org/classes/ActionView/Helpers/FormHelper.html#method-i-form_for), you can do something like this to force the form to go to CorporateContactFormsController#create
<%= simple_form_for #employee_contact_form, url: corporate_contact_forms_path, method: :post do |f| %>
# awesome code...
<% end %>
Also I'm not sure if the f.button :submit has something to do, the default for submitting is f.submit
I am trying to update a div based on a form submit. I am on Rails 3.1.1. I am trying to adapt someone else's recipe. My code in the view is something like this in main.html.erb:
<%= javascript_include_tag :defaults %>
<div id='seq_search'>
<%= form_tag(:remote => true, :update => 'seq_select', :action => 'select') do %>
<p>
<%= search_field_tag :query, '', :size => 45 %>
</p>
<p>
<%=submit_tag "Submit", :disable_wth => "Adding ..."%>
</p>
<% end %>
</div>
<div id='seq_select'>
</div>
The controller looks like
class SearchAjaxController < ApplicationController
def main
end
def select
render :text => '<li> '+params[:query] + ' </li>'
end
end
However, when I enter something in the text box and press submit, instead of updating the div, it goes off to another page rendering just the output of the select method of the controller.
If I look at the page source of the form, it is something like this:
<div id='seq_search'>
<form accept-charset="UTF-8" action="/search_ajax/select?remote=true&update=seq_select" method="post"><div style="margin:0;padding:0;display:inline"><input name="utf8" type="hidden" value="✓" /><input name="authenticity_token" type="hidden" value="wlOm4H7GvZAQoIVpjxPLqHAQLOIpJ4V5r0WYEpvCCrQ=" /></div>
<p>
<input id="query" name="query" size="45" type="search" value="" />
</p>
<p>
<input disable_wth="Adding ..." name="commit" type="submit" value="Submit" />
</p>
</form></div>
<div id='seq_select'>
</div>
It seems that the form is simply passing remote=true&update=seq_select as arguments to the controller's method/function. Is this what is supposed to happen?
Update:
So I tried to add to follow Mike Campbell's sugggestion and added the following code to my view (`.html.erb') file
<SCRIPT type='text/Javascript'>
$(function(){
$('#form-id').bind('ajax:success', function(xhr, data, status){
$('#seq_select').html(data);
});
}
</SCRIPT>
and also gave an id to the form:
<%= form_tag(:remote => true, :update => 'seq_select', :action => 'select', :id => 'form-id') do %>
Submitting the form still doesn't update the page. It simply skips to a new rendered view as before. The generated HTML reads:
<SCRIPT type='text/Javascript'>
$(function(){
$('#form-id').bind('ajax:success', function(xhr, data, status){
$('#seq_select').html(data);
});
}
</SCRIPT>
<div id='seq_search'>
<form accept-charset="UTF-8" action="/ajax_search/select/form-id?remote=true&update=seq_select" method="post"><div style="margin:0;padding:0;display:inline"><input name="utf8" type="hidden" value="✓" /><input name="authenticity_token" type="hidden" value="wlOm4H7GvZAQoIVpjxPLqHAQLOIpJ4V5r0WYEpvCCrQ=" /></div>
<p>
<label> Search by identifiers, accessions, and gene names.. </label>
</p>
<p>
<input id="query" name="query" size="45" type="search" value="" />
</p>
<p>
<input disable_wth="Adding ..." name="commit" type="submit" value="Submit" />
</p>
</form></div>
<div id='seq_select'>
</div>
Update:
It seems that the syntax for form_tag was wrong, and the first argument has to be the name of the action. I now have <%= form_tag( 'select', :remote => true, :id => 'form_id') do %> which generates the associated HTML <form accept-charset="UTF-8" action="select" data-remote="true" id="form_id" method="post">. Which is better, but my Ajax is still not working.
I think this has to do with respond to xhr in the controller. you should specify this is a xhr request.
See here for a question on that.
I am trying to create a form that serves as confirmation for the destroy method on a controller. In my routes I have:
resources :leagues do
get 'delete', :on => :member
end
In my delete.html.erb, I have the following for:
<% form_for current_league, :html => {:method => :delete} do |form| %>
<%= form.submit 'Yes' %>
<%= form.submit 'No', :name => 'cancel' %>
<% end %>
current_league is a helper function defined by:
def current_league
#current_league ||= League.find_by_id(params[:id])
end
So the problem is that the form that is generated only edits the league model, as seen by the form method="post".
<form accept-charset="UTF-8" action="/leagues/1" class="edit_league" id="edit_league_1" method="post">
<div style="margin:0;padding:0;display:inline"><input name="utf8" type="hidden" value="✓" />
<input name="_method" type="hidden" value="delete" />
<input name="authenticity_token" type="hidden" value="abcdefg" />
</div>
<input id="league_submit" name="commit" type="submit" value="Yes" />
<input id="league_submit" name="cancel" type="submit" value="No" />
</form>
How can I fix this?
I think that will already work. As in rails guide http://guides.rubyonrails.org/form_helpers.html#how-do-forms-with-patch-put-or-delete-methods-work-questionmark
However, most browsers don’t support methods other than “GET” and “POST” when it comes to submitting forms.
Rails works`around this issue by emulating other methods over POST with a hidden input named "_method", which is set to reflect the desired method:
as you see in the output form there is
<form accept-charset="UTF-8" action="/leagues/1" class="edit_league" id="edit_league_1" method="post">
....
<input name="_method" type="hidden" value="delete" />
....
</form>
When reading this variable, rails understood that this is a DELETE method, not a POST method. even though the form it self is a POST.
I am trying to generate a hidden div with a rails partial inside it. My intention is to use that hidden div as target for fancybox to open the edit form in a popup.
My partial code looks like:
<div style="display:none">
<div id="inline-edit-form-<%=feed_item.id%>" class="inline-edit-form">
<%= form_for (feed_item) do |f| %>
<%=render :partial => 'calendars/form', :locals => { :f => f }%>
<% end %>
</div>
</div>
Now, in Chrome, the layout is as intended and the partial is hidden initially. Fancybox manages to render this partial when its source link is clicked and things work fine. But in Firefox, the hidden DIV is not hidden by default and all controls are displayed. I checked HTML DOM structure on both Chrome and Firefox and there are huge differences.
Markup in Chrome (correct):
<div style="display:none">
<div id="inline-edit-form-596" class="inline-edit-form">
<form accept-charset="UTF-8" action="/calendars/596" class="edit_calendar" d="edit_calendar_596" method="post"></form>
<div style="margin:0;padding:0;display:inline">
<input name="utf8" type="hidden" value="✓">
<input name="_method" type="hidden" value="put">
<input name="authenticity_token" type="hidden" value="">
</div>
<div>
<label for="calendar_event">Event</label><br>
<input class="inline-edit-input" id="calendar_event" name="calendar[event]" size="30" type="text" value="Interesting event">
</div>
The above markup is correct and what is expected. The shocking markup in Firefox is:
<div style="display: none;">
<div class="inline-edit-form" id="inline-edit-form-598">
</div>
</div>
<div style="margin: 0pt; padding: 0pt; display: inline;"></div>
<div>
<label for="calendar_event">Event</label><br>
<input type="text" value="Another interesting important event" size="30"
name="calendar[event]" id="calendar_event" class="inline-edit-input">
</div>
This mark up is not only incorrect, its not even rendering the FORM tag at all. I checked and rechecked my CSS and DOM structure but Firefox simply choses to screw the layout.
Any help?
Thanks for the hint. There was one validation error which fixed the error. The error was that I was including inside the table. After moving the hidden divs outside the table, the issue got resolved.