I need help to rectify the following issue on some of my jQuery submit buttons. A single submit button displays two buttons with one on top of the other.
(source: nyumbanipap.com)
Any help will be appreciated.
html:
<input type="submit" name="confirmpayment" value="Confirm Payment" data-theme="a" />
It is a normal submit button on a form.
EDIT
I have noticed that this happens when returning from a non-ajax page. e.g. I am using PayPal and when I am redirected back from Paypal, this when the buttons are double displayed.
Any help will appreciated.
I just had the same problem. Turned out that I included the jquery mobile js file twice. Maybe that helps someone.
I was having the same issue within a rails app with jQuery mobile (in which I'm not always using AJAX either). Adding data-role="none" to the submit tag on the form worked for me.
<input type="submit" value="Next Question" class="ui-btn ui-state-disabled btn" data-role="none">
Go to bottom to read about that:
http://demos.jquerymobile.com/1.0/docs/forms/docs-forms.html
I know this is old but do not use the tags.
it should look like this
< p >< a href="#whatever you are naming your form or submit area" DATA-ROLE="button">Submit< /a>< /p>
Related
I have some HTML for a Checkbox im trying to click:
<td class="surface center">
<div class="checkbox-inline checkbox-inline--empty">
<input type="hidden" value="0" name="stuff_check">
<input id="stuff_1" class="boolean optional" type="checkbox" name="stuff_1_checked" value="1" data-item="5">
<label class="optional" for="stuff_1">Checked</label>
</div>
</td>
When running a page.find_by_id('id').trigger('click') it does indeed work, just using click however it complains about Poltergeist possibly clicking another elements:
Capybara::Poltergeist::MouseEventFailed:
Firing a click at co-ordinates [-9468.5, 6] failed. Poltergeist detected another element with CSS selector '' at this position. It may
be overlapping the element you are trying to interact with. If you
don't care about overlapping elements, try using
node.trigger('click').
However I felt maybe this is because of it being set as "hidden", so I tried doing page.find_by_id('ID', :visible => false).click however it gave the same issue.
Any suggestions? Since I know using trigger.('click') isn't advised.
There is no way to do a proper click on a hidden element because there would be no way for a user to click on an element that doesn't appear on the screen.
Your example is confusing because the hidden element doesn't have the same name attribute as the checkbox element which is what I would normally expect in this kind of setup. Assuming that what you're really trying to do is check the "stuff_1" checkbox (and that is hidden via CSS) then you should be doing what a user of your app would have to do - click on the label.
page.find('label[for="stuff1"]').click
Try
within('.checkbox-inline checkbox-inline--empty') do
check('#stuff_1')
end
I really recommend using Pry to do this though as you'll save yourself a ton of pain finding which elements are where.
I have a HTML page. I have a submit button on the page. When user clicks the button, I want to redirect him to another site. Where should I put the code? Please be specific.
Thanks for advance !
Try something like
<form action="http://myRedirectedSite.com/redirectedPage.html" method="get">
<input type="submit" value="Submit">
</form>
You could use either get or post as the method depending on the other site. Note that any form field values will be passed to the other site.
I have a rails application with a resoruce items. I have noticed that if I add some handlers, they are removed when the page changes.
<%=link_to "Add fund","#",:class=>"addfund btn btn-primary"%>
<form class="addfundform hide"action="<%=addFund_item_path :id=>item.id %>">
<input type="text" name="fund">
<input type="submit" value="Add" class="btn">
<a href="#" class="cancelfund btn btn-warning" >Cancel</a>
</form>
addfundform is hidden by default and when you click on addfund, the addfundform form is displayed.
$(document).ready(function(){
function showfundform(){
console.log("Hello")
var $item=$(this);
$item.next("form").show();
return false;
}
$(".addfund").click(showfundform)
})
So when I click on addfund button, the form is displayed. It however disappears when i click the cancel button. (this is funny because i haven't added anything to it yet) After this, the addfund button doesn't do anything. As if the handlers had been removed.
Also if I don't go to the items page. I go the new Item page, and then to the item page, the handler isn't loaded etiher
This rather wierd since I am not fetching anything via ajax. This is a rails4 app. I saw an error saying something about turbolinks, although I don't know any more
Rails 4 comes with a feature of Turbolinks and it seems to be causing trouble. Follow these steps:-
Remove the //= require turbolinks from your app/assets/javascripts/application.js.
Remove the two "data-turbolinks-track" => true hash key/value pairs from your app/views/layouts/application.html.erb.
and you should be good to go.
I'm creating a large dynamic form and want to create checkboxes and radio buttons like:
<label><input type="radio" name="myradio"><span class="foo">This is the Label</span></label>
This is for a number of reasons. There's nothing wrong with this as far as HTML spec goes.
But, jquery mobile generates a DOM error for every checkbox or radio button generated this way. It really seems to want:
<input type="radio" name="myradio" id="radio1"><Label for="radio1">...</label>
Any workarounds? Ideas?
This works fine: http://jsbin.com/ofuhaw/228/edit with latest JQM
Maybe you should just swap the order of elements.
Hy
What i want to do is to create a custom renderer for will_paginate which renders first, previous, next and last page and a input field where the user can type in the page number manually. I already have the links for first, last etc. but i stuck at the input field. I could create a form in the view but the input field has to be rendered between the previous and next links.
Does anyone know how to do this?
Thanks for your help
You can do this as a separate form (make sure it is a GET). All you
need is the one input element named page. Something as simple as this
should work (not all browsers may like the #). I dropped it into a
site I'm playing with now and it worked. Put it anywhere on your page.
You might have to make something more complicated if you need to
incorporate search terms.
<form action="#" method="get">
Go to page: <input type="text" name="page" value="" size="2"
maxlength="4" />
<input type="submit" name="btnSubmit" />
</form>