This seems to be a common asked question, but I feel I have tried absolutely everything now. (find, click_button, locate etc. etc). Nothing works (all listed below)
Seems to be consensus that if the css (e.g. divs out of place) it causes problems from Capybara. so I've now stripped back my html to the absolute bare minimum (below). yet nothing seems to find my confirm button.
I am using zurb foundation, but doesn't seem to be anything that suggests this is at fault.
I'm sure its something simple (It always is!) but damned if I can find…. any thoughts much appreciated?
html
<html>
<head>
<link rel="stylesheet" type="text/css" href="/css/foundation.css">
</head>
<body>
<form accept-charset="UTF-8" action="/register_user" enctype="multipart/form-data" id="form_wizard2" method="post">
<div style="margin:0;padding:0;display:inline">
<input name="utf8" type="hidden" value="✓" />
<input name="authenticity_token" type="hidden" value="hvDwKcztZ4jS0KNtRMD324EfTo+eNtHfSZVD/yDWVZc=" />
</div>
<input class="button postfix" id="confirm_email_btn" name="commit" type="submit" value="Confirm" />
</form>
</body>
</html>
generated from rails erb
<%= form_tag("/register_user", :method => :post, :multipart => true, :id => "form_wizard2") do -%>
<%= submit_tag "Confirm", :class => "button postfix", :id => "confirm_email_btn" %>
<% end %>
rspec test
it 'asks an anonymous user for their email address and asks to check inbox', :driver => :poltergeist, :js => true do
< find test what ever it is >
end
what I have tried
check html
puts page.html to check outputs
save_and_open_page to check html
Capybara::ElementNotFound Exception
find(:xpath,'//a[#id="confirm_email_btn"]')
all(:xpath,'//a[#id="confirm_email_btn"]').first
find("#confirm_email_btn")
find('input#commit')
breaks poltergeist
scoping (seems to break poltergeist)
within("//form[#id='form_wizard2']") do
find("//input[#type='submit']").click
end
other
prefixing all the above with "page."
Related
Submitting a basic xhr-form in a turbolinks-activated rails project (5.1), does trigger the correct server-side response but the client (turbolinks) discards the response. Neither get nor post do work. Tested in Firefox and Chromium. Forms with redirection work as intended.
Here's a simple test page that fails for me
test.html.erb:
<h1><%= #value %></h1>
<%= form_with url: 'test' do |f| %>
<%= f.check_box :anything %>
<%= f.submit %>
<% end %>
controller:
def test
if request.post?
#value = 'post'
else
#value = 'get'
end
end
routes:
post '/test', to: 'controller#test'
get '/test', to: 'controller#test'
rails response payload:
<h1>post</h1>
<form action="test" accept-charset="UTF-8" data-remote="true" method="post"><input name="utf8" type="hidden" value="✓" /><input type="hidden" name="authenticity_token" value="X1sh+tc/Jx4P0rdDqc2CD1RetKQKr+lVh4fD29JOMY/b+PdPNgw1qyzoyv6t3I2I+6jV1mmn6voXN+YySaUISw==" />
<input name="anything" type="hidden" value="0" /><input type="checkbox" value="1" name="anything" />
<input type="submit" name="commit" value="submit" data-disable-with="submit" />
</form>
</div>
The form loads like expected, but after submitting the page does not change. Inside the xhr-response the correct answer is visible, but it does not get applied to the DOM.
Is this a bug, or am I using turbolinks wrong?
I'm seeing this as well and I'm not sure how to proceed. What is nice about Turbolinks is that you don't have to create js responses for each request. This is true until you submit a form. At that point, you have no choice but to create a js.erb respone file or change the form to local: true. Am I missing something?
Try using data: { turbolinks: false } in the any links to the page containing the form.
E.g.
<%= link_to "Get in Touch", 'contact', data: { turbolinks: false } %>
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 need to put the input text field and the sumit button on the same line. I tried a lot things, but nothing worked.
The form:
<%= form_tag("/recherche", :method => "get") do %>
<%= search_field_tag :recherche, params[:recherche] %>
<%= submit_tag "Recherche", :name => nil, :id => "submit"%>
<% end %>
Which produces:
<form accept-charset="UTF-8" action="/recherche" method="get"><div style="margin:0;padding:0;display:inline"><input name="utf8" type="hidden" value="✓" /></div>
<input id="recherche" name="recherche" type="search" />
<input id="submit" type="submit" value="Recherche" />
</form>
I have no idea what CSS to use... I tried with float, display, etc.
FYI, the form is wrapped in a <li>.
You should add the display: inline or display: inline-block to your input tags. THe simplest way is to add this css style
input {
display: inline;
}
This will apply the inline on all inputs, you may need to refine it.
In comments, you add that you are using jQuery Mobile. This appears to be the cause of the problem, so the apparent solution would be to stop using it. But if you need it for some reason, check out how it affects your form field widths. How wide is is the input element? You may need to set it smaller, e.g.
<style>
#recherche { width: 15em; }
</style>
I think they are already in the same line, see:
http://jsfiddle.net/hhzFd/
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.
The view:
<%= form_for :blog_post do |f| %>
<ul>
<li>
<%= f.label :title %>
<%= f.text_field :title, :type => 'text', :id => 'title', :size => '', :limit => '255' %>
</li>
</ul>
<% end %>
<!DOCTYPE html>
<html>
<head>
<title>LevihackwithCom</title>
<script src="/javascripts/prototype.js?1285902540" type="text/javascript"></script>
<script src="/javascripts/effects.js?1285902540" type="text/javascript"></script>
<script src="/javascripts/dragdrop.js?1285902540" type="text/javascript"></script>
<script src="/javascripts/controls.js?1285902540" type="text/javascript"></script>
<script src="/javascripts/rails.js?1285902540" type="text/javascript"></script>
<script src="/javascripts/application.js?1285902540" type="text/javascript"></script>
<meta name="csrf-param" content="authenticity_token"/>
<meta name="csrf-token" content="UnhGSHHanJHfgJYhnksqJ1bfq3W+QEU2GJqLAMs2DmI="/>
</head>
<body>
<form accept-charset="UTF-8" action="/blog_post/new" method="post">
<div style="margin:0;padding:0;display:inline">
<input name="utf8" type="hidden" value="✓" />
<input name="authenticity_token" type="hidden" value="UnhGSHHanJHfgJYhnksqJ1bfq3W+QEU2GJqLAMs2DmI=" />
</div>
<ul>
<li>
<label for="blog_post_title">Title</label>
<input id="title" limit="255" name="blog_post[title]" size="" type="text" />
</li>
</ul>
</form>
</body>
</html>
I'm messing around with form helpers. The above code shows my view file as well as the HTML it generates. What is with the terrible div full of inline CSS stuffed with hidden fields I didn't explicitly ask for? What settings cause these fields to be generated? Is there a way for me to remove the inline CSS?
These fields are generated in rails forms for robustness:
utf8=✓
The utf8 hidden field ensures that the form values are submitted as UTF8. It does this by ensuring that at least one UTF8 character in the form gets submitted. Most browsers respect the document's encoding and treat the form values the same, but there's one browser that has a problem. Hence, utf8 gets a checkmark.
The authenticity_token is there to prevent cross-site request forgery.
Similar hidden fields get generated for checkboxes. Since unchecked checkboxes don't get submitted to the server, a hidden field ensures that a "0" (false) value gets submitted: this is helpful when you have an array of checkboxes.
These fields get wrapped in a div with inline styles to ensure that they don't break the layout. You could poke around in the form helper source code and override this, but I wouldn't recommend it: it's minimally intrusive, and it's there for a reason.
If you want to get rid of the utf8=✓ you may be interested in this gem, which adds it only to non-complying browsers:
https://github.com/softace/utf8_enforcer_workaround