I don't know what to look at on this. I have a Rails 3.2.8 application, and I have a page where all of my Coffeescripts are firing except one.
My controller is called "apps", and my Coffeescript file is app.js.coffee. Here is a the call that is not firing:
$("#products_id").change ->
alert "hello"
The item in my view renders as follows:
<select id="products_id" class="select required" name="products[id]">
<option value=""></option>
<option value="1368">015-0761</option>
<option value="1752">030-237</option>
</select>
I am using Firefox and Firebug to debug. I have verified that the apps.js script is indeed loaded with my changes. I'm getting no activity on the select box when I choose different things.
I have also moved the call around inside the apps.js.coffee file, and I'm using TextMate to view the invisible characters to make sure I don't have any bad whitespace.
Doh! That element doesn't exist when the page is rendered, it's displayed later. Therefore, I needed to change the call to this:
$("#products_id").live "change", ->
alert "hello"
That works!
Related
In the website I want to automate the there is a button I want to click on, if you inspect the element of the button it looks like this:
<input type="submit" value="Login" class="submit">
So I click on this line any then do "Copy xpath" and copy it to my code like this:
val loginButton: WebElement = driver.findElement(By.xpath("""//*[#id="loginForm"]/fieldset/font/font/input """))
loginButton.click()
Its very weird cause in other places it worked perfectly and sometimes I have problems with it, and then I try by cssSelector but here nothing works :/
The path includes two layers of font elements which seems rather fragile to me - any slight changes to the page structure will mean this path fails to match.
I would try a path that considers just the "semantics" of which element you want to target, and not the precise structure of the page. You want the submit button in the login form, so how about a path like
//*[#id="loginForm"]//input[#type="submit"]
which finds any <input type="submit"> anywhere in the form. If there are several submit buttons you can be more specific with #type="submit" and #value="Login"
XPath is prone to break and IMHO overly complicated... I would use a CSS Selector.
driver.findElement(By.cssSelector("input.submit")).click();
This is Java, BTW, but hopefully you can translate it, if needed.
In XPages Mobile controls I'm having a problem with Typeahead. Actually I think the behavior changed recently - maybe with the last update of the Ext. Library but I'm not sure. Thats when we noticed the change by the way. Is has been working as desired.
Below are 2 screenshots. The first one is on a normal XPage and the second is inside Mobile Controls.
Notice how the user starts typing a "D" in the first one there's no "autocomplete". But in the second screenshot the user typed a "D" and it immediately added in the first value which in this case starts with an "O". It replaced the "D" that the user typed.
(The fact that the record with the beginning "O" is showing is working as designed, so ignore that.)
The problem is I don't want that autocomplete happening at all. I want the behavior of the first screenshot inside mobile controls. so the user can keep typing and it'll will continue to filter the list and not overwrite what the user entered.
I'm fairly certain it used to do that and I don't know what changed. The code itself did not change - that I know.
I've attempted to set autocomplete and autocorrect to "off" without any luck. I'm not sure what the difference is or if they even truly come into play.
How can I get the field to not auto-fill inside of Mobile Controls?
Any advice would be appreciated. I should note that this is privately going to be used on iPads. So it's the Mobile Safari browser.
Thanks!
Here is the basic code for this:
<xp:inputText id="inputJobCode" value="#{viewScope.selectedJob}"
styleClass="target span9">
<xp:this.attrs>
<xp:attr name="placeholder" value="Job Code" />
<xp:attr name="autocorrect" value="off" />
<xp:attr name="autocomplete" value="off" />
</xp:this.attrs>
<xp:this.dojoAttributes>
<xp:dojoAttribute name="autocorrect" value="off" />
<xp:dojoAttribute name="autocomplete" value="off" />
</xp:this.dojoAttributes>
<xp:typeAhead mode="partial" minChars="1" valueMarkup="true"
var="searchValue" valueList="#{javascript:return com.companyname.datahub.TypeAhead.jobTypeAhead(searchValue);}">
</xp:typeAhead>
<xp:eventHandler event="onchange" submit="true"
refreshMode="complete">
<xp:this.action><![CDATA[#{javascript:var key:String = viewScope.get("selectedJob");
getComponent("inputJobCode").setValue("");
//JobData.load(key);
}]]></xp:this.action>
</xp:eventHandler>
</xp:inputText>
Here is what the output HTML is from the mobile control page:
<input type="text" id="view:_id1:checkOutFacilityID_content:_id4:inputText5"
name="view:_id1:checkOutFacilityID_content:_id4:inputText5" autocomplete="off"
class="mblTextBox target" placeholder="Job Code" autocorrect="off"
dojotype="extlib.dijit.mobile.TypeAheadCombo"
store="view__id1_checkOutFacilityID_content__id4__id9" data-dojo-
props="list:'view__id1_checkOutFacilityID_content__id4__id9', searchAttr:'value',
labelAttr:'label', labelType:'html'" spellcheck="false" tabindex="0" lang="en"
widgetid="view:_id1:checkOutFacilityID_content:_id4:inputText5" value="">
I got an answer for this from the Maire at IBM.
There was a change made in a recent Ext. Library update regarding Type Ahead. The solution for now is to use dojo to add a setting. Here's the email that IBM sent me.
Hi David,
The mobile typeAhead behavior changed in the release 901v00_04.20140226-1506
For details of the changes, see the section "Improvements to XPages TypeAhead control support" in the readme.pdf for that release.
I'm reproducing the behavior you're talking about, and I've logged an SPR:
SPR#MKEE9L7E9BLink XPages, Mobile TypeAhead, first item in the dropdown is being inserted into the edit box (should not be)
To workaround the issue:
The workaround is to write a script changing the edit box behavior,
so insert this control into your XPage, and change the name inputText1 to match your edit box's name:
<xp:panel id="panel1">
<xp:eventHandler event="onClientLoad" submit="false">
<xp:this.script><![CDATA[dijit.byId('#{id:inputText1}').autoComplete=false;/*Note autoComplete=false is different to autocomplete=off*/ ]]></xp:this.script>
</xp:eventHandler>
</xp:panel>
Regards,
Maire
I note the dojoType added to mobile - dojotype="extlib.dijit.mobile.TypeAheadCombo". It sounds like that makes it a mixture of a combo box and typeahead, which explains the functionality you're seeing.
Does it work if you add that Dojo Attribute to the non-mobile one?
I am trying to dynamically create a form with AngularJS.
See the code on plunker: http://embed.plnkr.co/lgSlbQlRcY26HhPzbj63/preview.
The problem is in adding a void option inside a select: I would like to use it as a label for the field.
So I created the void option in order to bind to element label:
<option value="">{{element.label}}</option>
Everything works fine in Chrome and Firefox, but in IE (ideally from IE8) rendering is not working and option displays "{{element.label}}" (at least until I click the select).
Does someone know why or how to fix it?
Thanx
I am on a mac, with no IE. I even tried to use www.browserstack.com.
The jsFiddle I was using wouldn't even load the home page for jsFiddle in IE 8.
In www.browserstack.com I used IE 9 and it did work in the jsFiddle.
Here is the jsFiddle if you want to mess with it.
jsFiddle Link
Since I can't test in IE 8 on jsFiddle, or Plunker as they both don't load in IE 8 on www.browserstack.com, try this out and see if you can trick it to work by using another approach.
<!-- <option value="">{{element.label}}</option> gray this out -->
<option value="">Age Range</option> // just for your initial cell value
<option value="element.label"></option> // The items
When rendering a select dropdown as below, the iPhone renders it blank. How can I fix this?
<select size="3">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="opel">Opel</option>
<option value="audi">Audi</option>
</select>
The above example from http://www.w3schools.com/tags/att_select_size.asp. Their sample is http://www.w3schools.com/tags/tryit.asp?filename=tryhtml_select_size
In Firefox (and all other browsers), it renders as:
However, on an iPhone, it's rendered blank. This is very bad for usability as the visitor doesn't know what's in the box (in our application, it's for selecting their address from several possibilities).
I've created a JSFiddle: http://jsfiddle.net/bqMEv/3/ The iPhone rendering is as follows; note that there's nothing shown when both:
size is greater than 1
and height is specified in CSS
and no option is selected
Removing the CSS height shows that the iPhone ignores the size attribute.
Looks like there is no standard way to do it, based on content of other topics on stack overflow:
Safari Mobile Multi-Line <Select> aka GWT Multi-Line ListBox
jquery plugin to convert a <select size="10"> to a usable list on Safari mobile (iOS)
But author of the second topic wrote a plugin that emulates that behavior: https://github.com/redhotsly/safarimobile-multiline-select
My simple fix for this, using Jquery:
$(document).ready(function(){
if(navigator.userAgent.match(/(iPhone|iPod|iPad)/i)) {
$('#my_select_box').prepend('<option value="" selected="selected" disabled="disabled">..Please select something</option>');
}
});
Works like this:
Wait for document to load
If user visits the site using an iPhone, iPod or iPad execute script
Add a selected and disabled option at the top of your select list, with the text
"..Please select something".
Does nothing in all other browsers, works great :D
If you need to display one of the options, use the following: HTML selected Attribute
Your webpage at firefox:
It appears that people here might not be fully understanding the issue. The problem is that the iOS browser will not render the label for the unselectable first field, which would typically be a "Please select ..." type indicator. If it is not selected, iOS renders it as blank. This is not desirable, because there are choices for the user to make, but the field appears as blank.
You cannot also set it programatically selected to get the "Please select" to display, because if the field is required, the form validation no longer works, as the browser considers the first field as selected, even though it is flagged as unselectable.
The "Bug" is that iOS browser will not display the label for the first field, when it is set as unselectable.
I have a dynamic form that is to be displayed using an iPad.
This form has a couple of radio buttons and some text fields and one submit button.
In an iPad the virtual keyboard GO button is supposed to act ad the enter key, causing the first submit button in the form to be clicked and the form to be posted.
To avoid excessive involuntary postings before the form is complete we added an extra submit button higher up in the form, absolutely positioned outside of the visible area with onclick="return false;".
This hijacks the enter keystroke preventing accidental posting in every browser except Safari Mobile.
On an iPad we even tested Opera mobile and it works as expected.
But Safari Mobile apparently ignores the return false since event clicking the button causes a post that no other browser does, not even safari on PC.
My questions are
1: Why is safari mobile ignoring "return false" on submit, is there an other mechanism at play here?
2: How can I stop Safari mobile from posting the form when clicking GO?
I have made numerous searches on Google and Stackoverflow and found many examples but all requires a lot of javascript and event binding and the dynamic nature of the form along with user generated content makes this error prone and pretty complex since almost all required binding events to every textbox and textarea.
Any solution that works is good but the simpler the better, especially if it does not require to much customization of the form or events that might conflict with autocomplete or validation events.
Example testpage: http://lab.dnet.nu/ipad.php
I found a solution to my problem.
The base to the problem is that Safari mobile ignores onsubmit="return false" on buttons, it only works on forms.
Setting onsubmit="return false;" on the form, making a normal button (not submit) and setting onclick="form.submit()".
Ex.
<form method="post" onsubmit="return false;">
... //Other fields here
<input type="button" value="Send" onclick="form.submit();" />
</form>
The Go button does not trigger a normal button, only submit buttons.
Since the form has onsubmit="return false;" it will not post.
The button on the other hand, when clicked triggers the onclick="form.submit();" which overrides the onsubmit on the form.
This solution seems to work in any browser reliably.
Better answer is this. The other does not allow you to use a regular submit button. This attacks just the go button.
$("body").keydown(function(){
if(event.keyCode == 13) {
document.activeElement.blur();
return false;
}
});
Seems very unconventional, as this basically breaks general UX and expected device behaviour.
However, I think it also important to mention that this solution relies on the actual <form> DOM element. Meaning the onclick handler on the button should not use a jQuery object to submit but the DOM element.
jQuery object. Does not work:
<input type="button" value="Send" onclick="$("#myform").submit();" />
DOM element. Works:
<input type="button" value="Send" onclick="$("#myform").get(0).submit();" />
Without jQuery. Works:
<input type="button" value="Send" onclick="document.getElementById('myform').submit();" />
Also, here is a similar approach, using jQuery to intercept keyboard submits and only allowing clicks on a button. Credit goes to #levi: http://jsfiddle.net/RsKc7/
Here's an additional answer, in case anyone winds up chasing this issue like I did.
Provided you're using jQuery, the following snippet should prevent the "Go" button from triggering a form submission (at least it does on Nexus 7's Chrome on Android 4.2.2; YMMMV). Also, note that if you want to allow the "Enter" key to work on any of the input types below, this will prevent that from happening.
$(document.body).on('keydown', 'input:text, input[type=password], input[type=email]',
function (e) {
// Android maps the "Go" button to the Enter key => key code 13
if (e.keyCode == 13) {
return false;
}
});
Edit: It seems this bug breaks keyup/keydown in Chrome in Android > 4.3, in which case this fix will no longer work in some circumstances.
Cannot comment so i have to put a new message.
#David solution works fine if we are using an "input type button"; instead, if we are using a button tag doesn't seems to be solved by David fix.
(env: cordova, ipad mini 2)
Thanks David!
Go buttons and return buttons on mobile touch screen keyboards trigger the onclick event of your first submit button. To determine if its the user or script clicking the button, you can use the following:
$('#mybuttonId').onclick(e) {
if (e.screenX && e.screenX != 0 && e.screenY && e.screenY != 0) {
//This is the user clicking on the button.
} else {
//This is not the user, but a script , do nothing.
return false;
}
}