Why the change function is not called in jquery mobile? - javascript

Hi I have the code to called the function on change the value of input field.where i just implement the jquery mobile datepicker but internally its change to
<input type="text" data-role="date" style="width:100%" class="to hasDatepicker" id="To" name="To">
(means adding hasdatepicker to that input field)So that It is not working .But when i change to click function it is working fine what might be the problem can any body tell and how to achieve that?
$('input.to').on('change',function() {

"To" is the id not a class, selector should be:
$('#To').on('change',function() {

You are accessing element by class name but To is not a class.
$('input[id=To]').on('change',function() {

As the above said, "To" is an id name, If you are insisting on using the (Element.Attribute) style I'd recommend to use $('input#To').on('clicked',function()).
You could also use $('input#To').clicked(function()) or just $("#To") which is preferred, since Id is an element Unique. You usually is the (Element.Attribute) style when you have a couple of elements, say <input></input> and you want to select a particular input by it's class, and not all the <input></input> elements.

You have to see how you are including the jQuery import. If you are including correctly, maybe have somewhere a function that killing your change. Verify whether have another call to this same event or a call to $('input.to').off('click') somewhere. But you can also call this method using $('#To').

Related

Change Class Name of a div in Jquery after find()

I have a brief quesiton about the nautre of jquery.
I tried to change the class name of an element using Jquery by using the argument below.
var classman=$('body').find('div')[2].className('anything')
body has several different divs and I picked the third one by
using .find('div')[2].
When I logged it, .find() argument spits out the whole html line
and I checked the type of it and console says it's "object"
So I was expecting I could access tot he element by typing like
classman.class
but neither the first approach nor the second approach didn't worked out. What should I do to change the second element and the change the class?
Thank you in advance.
I'm not a heavy user of Jquery but Just curious about it and wanted to know how to do it as a basic knowledge.
To add a class in jquery you can do this as follows:
$('body').find('div').addClass('name')
console.log($('body').find('div').attr('class'))
<body>
<div class="test">
</div>
</body>
To get the classes of an element we use attr ('class') in jquery.
In your example you said you wanted to take the second element, to do this use the method eq, (eq. (1))
Example:
$('body').find('div').eq(1) // Get second element

Changing type of an input

I want to change the type of an input on click of a button but it doesn't work. I tried this:
$('.addPhoto').click(function(){
$(this).siblings('.auto_image').prop("type", "file");
});
It doesn't do anything at all. I searched on google and came across this:
change type of input field with jQuery
It says it is possible to do it with straight DOM, but how would I select the class of a sibling with DOM?
You can replace the element all together but I don't think you can just change the type attribute see my example.
$('.addPhoto').on("click",function(){
$(this).off("click").replaceWith("<input type='file' class='addPhoto'/>");
});
or
$('.addPhoto').one("click",function(){
$(this).replaceWith("<input type='file' class='addPhoto'/>");
});
http://jsfiddle.net/ECzP4/
here is the jQuery documentation for replaceWith() http://api.jquery.com/replaceWith/
To get the dom object just take the first item from your jQuery collection:
var domObject = $(this).siblings('.auto_image')[0]
Although it doesn't seem to be able to change from text to file - http://jsfiddle.net/7HTgA/
So what I would recommend is having two inputs, and show/hide them as required rather than trying to change the type of a single input.
Adds all its siblings with the auto_image class with the type - file.
$(this).siblings('.auto_image').attr('type','file')

How to access elements from a certain form and certain type with jquery

so I have a page with multiple forms and I would like to be able to access input elements of type="datetime" within a particular form. I know I can do $('input[type="datetime"]') but that would give me all input tags on the page. I also cannot use the "form" attribute because not all browser use it (Sigh IE). Worse scenario for me is to do something like:
$(document.forms["..."].elements).each(function() {
if (this.type="datetime") {.....}
});
but I am sure this can be done in jQuery with one selector. Can someone tell me how do this with one selector?
Add id to your form and then select DOM inside of that form as below.
$('#form input[type="datetime"]')
Without seeing some HTML this is just a shot in the dark. But if you give your forms an id you can do:
$("#yourFormId input[type='datetime']");
If you do not have ids, but you know the number, then this might do it:
$("form:eq(4) input[type='datetime']");
There are multiple ways to do it
Solution 1.
use descendant selector
ex:
$('#yourform input[type="datetime"]') //or
$('.yourform input[type="datetime"]') //or
$('form:eq(3) input[type="datetime"]')
Solution 2:
Use context based look up
Ex:
$('input[type="datetime"]', yourform)

How do i select an element with certain ID and a certain rel

I looked at selectors and has attribute seems to be the closes choice however i cant seem to make it work.
what i am trying to do i select an element with certain id that also has a certain rel value..
for example:
<input value="Needthisvalue" rel="15" value=wahtever" id="pickthisID" type="hidden">
to find out that input with that id and that rel. what I've tried so far is :
TabID contain the 15.
$('#pickthisID[rel="'+TabID+'"]').val();
Thanks in advanced.
Firstly, your id's have to be unique, otherwise your HTML is erroneous and will throw loads of JS bugs. As for you problem, simply use
$('#pickthisID[rel='+a+']').val();
jQuery is optimized so that, if you provide an ID selector (e.g. #pickthisID), it will stop looking after its found the first matching element. This is because the id attribute is supposed to be unique per page.
However, this would work:
$('[id="pickthisID"][rel="'+TabID+'"]')
As suggested by OP, there is an error in your HTML.
<input value="Needthisvalue" rel="16" id="pickthisID" type="hidden">
console.log($('input[rel=16]').val());
I think your code should work. But you've some problem with html markup.
You use value attribute twice.
<input value="Needthisvalue" rel="15" value=wahtever" id="pickthisID" type="hidden">
But value should one time:
<input value="Needthisvalue" rel="15" id="pickthisID" type="hidden">
jQuery
var TabID= 15;
alert( $('#pickthisID[rel='+ TabID +']').val() )
DEMO
Note
rel is not valid attribute for input. If possible use data-rel.

jquery .focus not working for input:first

We are having an issue where when we open a modal window we are trying to set the focus to the first input element in the modal that is not of type hidden. here is what we are trying:
$("#test-overlay input[type!=hidden]:first").focus();
However, this call works:
$("#test-overlay #loginInput").focus();
The input field has an id of loginInput.
Any thoughts?
The problem is due to the order of precedence in which jQuery interprets the selector. Try the following:
$('#test-overlay input').not('[type=hidden]').first().focus();
This has the added benefit of not using the :first and attribute not equal to selectors since they're jQuery specific and queries using these cannot take advantage of the performance boost provided by the native DOM querySelectorAll() method.

Categories

Resources