jQuery .select works, but Javascript .select doesnt - javascript

I am building a mobile site for a Motorola / IE 6 device.
For some reason that I can not come up with, jQuery's .select() function is working, but directly calling it in javascript is not.
<input type="text" id="lid" value="" class="as_done">
The jQuery way that works is this:
$('#lid').select();
The way that isn't working is this:
document.getElementById('lid').select();
This has me all sorts of confused. Any ideas as to why this is?
EDIT: I am not trying to do anything in jQuery. I am just trying to select the text inside the input box. I shouldn't need jQuery to do this, but the standard way is not working. http://www.w3schools.com/jsref/met_text_select.asp

Interesting change made it work for me. Perhaps this is a bug in windows mobile IE 6?
Consider the following html:
<input type="hidden" id="lid_as" name="lid" value="1">
<input type="text" id="lid" value="" class="as_done">
Calling alert("document.getElementById('lid').name"); resulted in the message lid. This makes me think that it is grabbing the first input box whose ID is actually lid_as.
When I moved the lid_as input below the lid box, the select function works properly.
So this HTML made it work:
<input type="text" id="lid" value="" class="as_done">
<input type="hidden" id="lid_as" name="lid" value="1">
Again, this question is in relation to WINDOWS MOBILE IE 6.

$() function returns a jquery object whereas document.getElementById returns a simple DOM object.

maybe it happens due to the fact you did not call .focus() in advance
document.getElementById('lid').focus();
document.getElementById('lid').select();
this is wrapped in jQuerys .select()

Related

Using polyfill for input type 'range' in IE9

I'm trying to use the HTML5 input type 'range'. This is not supported in IE8 & IE9 and is replaced by input with type 'text'. To make this field work for everybody i'm using a polyfill for the input with type 'range'.
The polyfill i'm using is: Rangeslider.js (http://andreruffert.github.io/rangeslider.js/)
The html of my inputfield looks like this:
<input type="range" id="somefield" name="somefield" required="required" min="0" max="100" step="1" class="className" value="10">
The javascript that runs the polyfill is called on input[type="range"]. Example:
$('input[type="range"]').rangeslider();
Somehow the polyfill only works correctly if you call it specifically on the input element, and not on an element with a certain class. So calling it like below will not work (it will render, but the value of the range is not stored in the input element):
$('.className').rangeslider();
However, IE replaces the input in the DOM with the following HTML:
<input name="somefield" class="className" id="somefield" required="required" type="text" min="0" max="100" step="1" value="10">
Because the input element now has a different input type, the selector $('input[type="range"]') will not work. using the class or id as selector also doesn't seem to work (in that case the polyfill doesn't update the value of the original element)
In other browsers (Firefox, Chrome) the polyfill does seem to work (when I let it override the native support).
Question:
How do I use this polyfill (with what element selector) in IE9?
I found the mistake. It is possible to use the class as selector. Here is a piece of code that calls the polyfills for multiple range input fields. This avoids using the input type as selector and seems to work in all browsers. Also this works for multiple fields on one page.
$('input.className').each(function(e) {
$(this).rangeslider();
});
I ran into the same problem.
I found it would work for me with the simpler syntax when I didn't try and select with type=range but used a class I added to the input elements, e.g.:
<input type="range" class="slider" />
and
$('input[class=slider]').rangeslider();

jQuery's val() is not working on a hidden field

I have a hidden field in my page like so:
<hidden id="tsDaySchedule01" value="7.50"></hidden>
When I try to access it with the following code, the alert returns blank:
alert($("#tsDaySchedule01").val());
Now when I use attr("value") like below, it works without issue:
alert($("#tsDaySchedule01").attr("value"));
Lastly, I would like to point out we have other non-hidden text fields within the page that work without issue using val().
I would like to have a better understanding as for what is going on here. Does anybody have an explanation?
<hidden/> isn't a valid HTML element. If you're wanting a hidden input you'd use:
<input type="hidden" />
jQuery's .val() method only works on input, select and textarea elements. To get this to work for you, change your <hidden/> element to:
<input type="hidden" id="tsDaySchedule01" value="7.50" />
.val() method only works with text-box type of element input and textarea elements.
you should use
<input type='hidden' id="tsDaySchedule01" value="7.50">
Maybe you need to use :
<input type='hidden' id="tsDaySchedule01" value="7.50">

jquery selector not working in IE6 due to uppercase id

I have a hidden input field on a page
<div id="SomeDiv">
<input type="text" name="ID" id="ID" value="Something"/>
</div>
If i use $("#SomeDiv #ID").val() in IE9 i get the value "Something" but in IE6 i'm getting undefined. If i change the id and name to lower case IE6 returns correctly. I.e.
<div id="SomeDiv">
<input type="text" name="id" id="id" value="Something"/>
</div>
Then $("#SomeDiv #id").val(). Notice I've not changed the case on the div id, only the input.
Anybody else come across this and a possible work around? Client is using IE6 so switching browser is not an option and I keep coming across this.
Update :
I've changed the id value from just "ID" to "WizardID" and it works in IE6
<div id="SomeDiv">
<input type="text" name="WizardID" id="WizardID" value="Something"/>
</div>
$("#SomeDiv #WizardID").val()
I've also come across this issue with a field called "IsValid" IE6 cannot find the field at all but if i rename it "isValid" bam its found. I suspect its a bug with jquery but doubt it will be fixed as IE6 is long past it. Thanks for the help.
You should change the html if possible:
In Internet Explorer, if you’re trying to target an element using
getElementById, for some reason that browser will search the name
attribute of certain elements on the page, in addition to the id.
Using id="id" can also trigger a bunch of other IE issues.
The best thing to do is change all id and classes to lowercase per common standards. That way you don't apply any band-aid fixes.

OnKeyboard Hide in Sencha Touch

I need to know is there any function in sencha touch to know if the keyboard hides. I want to call a function when a keyboard hides.
Any Idea...
Pls check the below link. Hope this helps....
iPad Safari - Make keyboard disappear
To prevent showing the keyboard on:
<input type="text" name="someInput" />
for when you want to do something like use a jQuery UI datepicker...
add a readonly attribute like so:
<input type="text" name="someInput" readonly="readonly" />
If you are trying to be mindful of people with JS turned off, you could always leave off the attribute and add it in your code:
$('[name=someInput]').attr('readonly','readonly');

JS/HTML onChange

with similar question. :)
<input type="text" name="npcolor" id="npcolor" size="9" maxlength="9" value="<?=$userinfo->npcolor?>" onchange="change_npcolor()" readonly />
<input type="text" ID="np_sample" size="2" value="" readonly style="background-color:<?=$userinfo->npcolor?>" />
<input type="button" onclick="pickerPopup202('npcolor','np_sample');" value="Change" />
function pickerPopup202 is changing npcolor, but when npcolor is changed it don't call change_npcolor(). When I put extra button that call change_npcolor it works. I tried also:
document.getElementById("npcolor").onchange='change_npcolor()';
without success.
P.S. JS that changes npcolor (pickerPopup202) isnt mine, and ALL code is at one line, so i cant really mod it.
When you change the value dynamically, the onchange event doen't fire. You need to call the change_npcolor() method yourself. You could also call document.getElementById("npcolor").onchange(). (This is less efficient, but more flexible when the event handler may change eventually.)
You cannot change the event listener by just adding a string with javascript code to the onchange property. You can do it like this, however:
document.getElementById("npcolor").onchange = function(){
change_npcolor();
}
document.getElementById("npcolor").onchange='change_npcolor()';
here you have change_color() as a string but this is not correct syntax.
Instead of that you can use
document.getElementById("npcolor").onchange=change_ncolor;
Because the change_ncolor works as an object.

Categories

Resources