JQuery UI datepicker not working when bound to a class - javascript

I've got this code:
<html>
<head>
<link type="text/css" href="css/blitzer/jquery-ui-1.7.2.custom.css" rel="stylesheet" />
<script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.7.2.custom.min.js"></script>
<script type="text/javascript">
$(function() {
$('.hasDatepicker').datepicker();
});
</script>
</head>
<body>
<p>date: <input type="text" name="data" class="hasDatepicker" /></p>
<input type="submit" value="send" />
</div>
</body>
</html>
When I click the input field, nothing happens. The datepicker is initialized though, when I inspect the DOM in Firebug, I get the id="dp1260260566059" added to my <input> element.
After changing the html and js to use id attribute instead of class, so having this in my code:
$(function() {
$('#hasDatepicker').datepicker();
});
and
<p>date: <input type="text" name="data" id="hasDatepicker" /></p>
Everything works OK.
Can't datepicker from JQuery UI work for all elements of some class?

Please check if the datepicker works if you change the class name of the input fields from 'hasDatePicker' to something else. The reason is, when add the datepicker to the input field using the below code:
$(function() {
$('#date').datepicker();
});
it adds the class name "hasDatePicker" to the input field. (which is the one u r using)

Don't use hasDatepicker as your date picker's class name. Use a different name, like date_picker.
JQuery adds the class hasDatepicker to the element that datepicker() is called on. If the element already has the class hasDatepicker, then the datepicker() function does nothing. So, just use a different class name.

Related

how to access input tag in form with jquery?(include hidden type)

I looking for how to access input tag in form via jquery.
I made something like below :
HTML
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>test </title>
<script src="/resources/gtl_portal/js/jquery/jquery-2.1.1.min.js"></script>
<script src="/resources/gtl_portal/js/comon.js"></script>
</head>
<body>
<form id="a" action="#">
<input type="text" name="name" value=""><br/>
<input type="text" name="phone" value="numbervalidation"><br/>
<input type="hidden" name="hiddenParam" value="hidden parameters"><br/>
press<br/>
</form>
<script>
function chk(){
checkValidation('a');
}
</script>
</body>
</html>
and in common.js
function checkValidation(formName){
var form = $('#' + formName);
form.children('input').each(function(k){
var obj = $(this);
console.log(obj.val());
}
};
I can get value from input tags without hidden type. How can I get hidden type also at once. I found follow article. But if I use this, it looks have to iterate form twice which I do not want to.
Link : jQuery access input hidden value
Is there any way to access hidden and not hidden at once?
Thanks :D
P.S/ I also curious about access multiple selector. I have tried
form.children('input, textarea, select').each(function(i){//do something});
but does not work. Would you find anything wrong from here?
You can use the :input selector. It selects all <input> elements including hidden inputs
$(":input");
Simply selecting the elements by tag name like $("input"); works as well.
Getting hidden input just works, see following code below:
console.log($('input'))
function show(){
$('input').attr('type','text')
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="hidden">
<button onclick="show()" >show hidden fields</button>

Setting value of h:inputtext field using jquery script

I'm designing a page that is supposed to allow users to submit possible computing science projects and at one stage the user will have to enter a duration that the project will run over. To make things easier on the user the I'm trying to fill out the from: to: fields using jQuery's datepicker method however I cannot get the script to run when the user selects the appropriate field.
So far I've got the following script:
<h:outputScript library="jquery" name="jquery-1.9.1.js"/>
<h:outputScript library="jquery" name="jquery-ui-1.10.3.custom.js"/>
<h:outputScript library="jquery" name="jquery-ui-1.10.3.custom.min.js"/>
<h:head>
<title>Add project</title>
<script type="text/javascript" id="setDate">
$(function() {
$(" #datepicker ").datepicker();
});
</script>
<!-- rest omitted for readability -->
and my h:inputText looks like this:
<h:inputText id="setDate" value="" onclick="$('#datepicker').datepicker();"/>
<p>Date: <input type="text" id="datepicker" /></p>
I did try to make it work without using any jsf tags and managed to get it up and running but I just can seem to make it work with jsf tags.
The problem is that when in a browser the jQuery datepicker widget does not display upon clicking on the field. Clicking on the field defined using the standard <input> tag works correctly.
Any help is greatly appreciated, thanks.
<script type="text/javascript">
$( document ).ready(function() {
function openDatePicker(){
$("#datepicker").datepicker();
}
});
</script>
<h:inputText id="setDate" value="" onclick="openDatePicker();"/>
<p>Date: <input type="text" id="datepicker" /></p>
Hope this will work for you (havent tried it out).
I managed to solve my problem in the following way:
Changed my script to:
<script type="text/javascript">
$(document).ready(function() {
$(".datepicker").datepicker({
});
});
</script>
and my jsf tag to:
<h:inputText styleClass="datepicker"/>
Now the datepicker widget will display when I select the field. Thanks to DannyThunder for putting me on the right track.
This was the answer for me:
<script>
jQuery(document).ready(function($) {
$('#signup-form\\:email').checkEmailFormat();
});
</script>
And for Primefaces:
<script>
jQuery(document).ready(function($) {
$(PrimeFaces.escapeClientId('signup-form:emil')).checkEmailFormat();
});
</script>
I got the information from mkyong.com
Best regards

jQuery dynamic added class gets not applied

I've got a quite strange behaviour. I append a class at runtime but the class doesn't get applied (although it is there as I can see by debugging via firebug). Here is a fully (un-)functional example:
<html>
<head>
<link rel='stylesheet' href='./jQuery/css/superfish/superfish.css' type='text/css' />
<link rel='Stylesheet' href='./jQuery/css/smoothness/jquery-ui-1.8.16.custom.css' type='text/css' />
<script type='text/javascript' src='./jQuery/js/jquery-1.6.2.min.js'></script>
<script type='text/javascript' src='./jQuery/js/jquery-ui-1.8.16.custom.min.js'></script>
<script type='text/javascript' src='./jQuery/js/jquery.ui.datepicker-de.js'></script>
<script type='text/javascript' src='./jQuery/js/jquery-ui-timepicker.js'></script>
<script type='text/javascript' src='./jQuery/js/jquery-ui-timepicker-de.js'></script>
<script type='text/javascript'>
$(function () {
$('.DateTimePicker').datetimepicker({
stepMinute: 15
});
});
</script>
</head>
<body>
<script type='text/javascript'>
function testMe() {
$("[id$=Working]").addClass('DateTimePicker');
}
</script>
<input id="notWorking" type="text">
<input id="clickToTest" type="button" onclick="testMe()">
<input id="static" type="text" class="DateTimePicker">
</body>
</html>
I think the issue you're having is that the datetimepicker() is initialised to all elements with a class .dateTimePicker, but when you are dynamically adding a class to other elements the datetimepicker does not get initialised again for these elements. Here is a piece of code that i've seen used before to get around this problem.
$(document).ready(function(){
$('.DateTimePicker').on('click', function(){
$(this).datetimepicker({
stepMinute : 15
}).datetimepicker('show');
});
});
This means the datetimepicker is invoked straight after it is attached using .on(). more info here. This way the datetimepicker will be initialised on all elements which have the class .DateTimePicker even if they are added dynamically. Hope this helps.
UPDATE:
There's a few other ways i've seen this done if you do not like this method. One neat way of doing it is here.
Another way is to remove the class the datetimepicker adds to the element (so it knows which elements have datetimepickers initialised on them) and then rebinding the datetimepicker to your class again.
function testMe() {
$("[id$=Working]").addClass('DateTimePicker');
$('.DateTimePicker').removeClass('hasDatepicker').datetimepicker({ stepMinute: 15 });
}
When you click your <input type="submit" /> the class is being added and then a POST is being performed which reloads the page and the class should not be there on the fresh load.
Try changing it to <input type="button" /> and it should probably work.

onchange javascript to dynamically change links

I want to edit links when the user changes the value of a <input type="text">, but I can't get it to work. My HTML:
<head>
<link rel="stylesheet" href="styles.css" />
<script type="text/javascript">
function updateGiveLink() {
document.getElementById("givelink").innerHTML = "http://kroltan.eliti.com.br/diamonds/?give="+document.getElementsById("givetext").value;
document.getElementById("givelink").href = "http://kroltan.eliti.com.br/diamonds/?give="+document.getElementsById("givetext").value;
}
</script>
</head>
<input type="text" placeholder="Minecraft username" name="give" id="givetext" onchange="updateGiveLink()" />
<a id="givelink" href="http://kroltan.eliti.com.br/diamonds/?give=Player">http://kroltan.eliti.com.br/diamonds/?give=Player</a>
This is supposed to change the URL and display text of givelink so the ?give= part of the url has the value of the text field givetext. But it is not working as expected. Instead, it does nothing. I also tried using onkeyup and oninput (saw these in another related question), with no success.
It should be document.getElementById("givetext").value you had getElementsBy with an s
Working code using onkeyup demo
May be there is some syntax error as you have used document.getElementsById but it should be document.getElementById

Apply jQuery datepicker to multiple instances

I've got a jQuery date picker control that works fine for once instance, but I'm not sure how to get it to work for multiple instances.
<script type="text/javascript">
$(function() {
$('#my_date').datepicker();
});
</script>
<% Using Html.BeginForm()%>
<% For Each item In Model.MyRecords%>
<%=Html.TextBox("my_date")%> <br/>
<% Next%>
<% End Using%>
Without the For Each loop, it works fine, but if there's more than one item in the "MyRecords" collection, then only the first text box gets a date picker (which makes sense since it's tied to the ID). I tried assigning a class to the text box and specifying:
$('.my_class').datepicker();
but while that shows a date picker everywhere, they all update the first text box.
What is the right way to make this work?
html:
<input type="text" class="datepick" id="date_1" />
<input type="text" class="datepick" id="date_2" />
<input type="text" class="datepick" id="date_3" />
script:
$('.datepick').each(function(){
$(this).datepicker();
});
(pseudo coded up a bit to keep it simpler)
I just had the same problem.
The correct way to use date pick is $('.my_class').datepicker(); but you need to make sure you don't assign the same ID to multiple datepickers.
The obvious answer would be to generate different ids, a separate id for each text box, something like
[int i=0]
<% Using Html.BeginForm()%>
<% For Each item In Model.MyRecords%>
[i++]
<%=Html.TextBox("my_date[i]")%> <br/>
<% Next%>
<% End Using%>
I don't know ASP.net so I just added some general C-like syntax code within square brackets. Translating it to actual ASP.net code shouldn't be a problem.
Then, you have to find a way to generate as many
$('#my_date[i]').datepicker();
as items in your Model.MyRecords. Again, within square brackets is your counter, so your jQuery function would be something like:
<script type="text/javascript">
$(function() {
$('#my_date1').datepicker();
$('#my_date2').datepicker();
$('#my_date3').datepicker();
...
});
</script>
<html>
<head>
<!-- jQuery JS Includes -->
<script type="text/javascript" src="jquery/jquery-1.3.2.js"></script>
<script type="text/javascript" src="jquery/ui/ui.core.js"></script>
<script type="text/javascript" src="jquery/ui/ui.datepicker.js"></script>
<!-- jQuery CSS Includes -->
<link type="text/css" href="jquery/themes/base/ui.core.css" rel="stylesheet" />
<link type="text/css" href="jquery/themes/base/ui.datepicker.css" rel="stylesheet" />
<link type="text/css" href="jquery/themes/base/ui.theme.css" rel="stylesheet" />
<!-- Setup Datepicker -->
<script type="text/javascript"><!--
$(function() {
$('input').filter('.datepicker').datepicker({
changeMonth: true,
changeYear: true,
showOn: 'button',
buttonImage: 'jquery/images/calendar.gif',
buttonImageOnly: true
});
});
--></script>
</head>
<body>
<!-- Each input field needs a unique id, but all need to be datepicker -->
<p>Date 1: <input id="one" class="datepicker" type="text" readonly="true"></p>
<p>Date 2: <input id="two" class="datepicker" type="text" readonly="true"></p>
<p>Date 3: <input id="three" class="datepicker" type="text" readonly="true"></p>
</body>
</html>
There is a simple solution.
<html>
<head>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"> </script>
<script type="text/javascript" src="../js/jquery.min.js"></script>
<script type="text/javascript" src="../js/flexcroll.js"></script>
<script type="text/javascript" src="../js/jquery-ui-1.8.18.custom.min.js"></script>
<script type="text/javascript" src="../js/JScript.js"></script>
<title>calendar</title>
<script type="text/javascript">
$(function(){$('.dateTxt').datepicker(); });
</script>
</head>
<body>
<p>Date 1: <input id="one" class="dateTxt" type="text" ></p>
<p>Date 2: <input id="two" class="dateTxt" type="text" ></p>
<p>Date 3: <input id="three" class="dateTxt" type="text" ></p>
</body>
</html>
When adding datepicker at runtime generated input textboxes you have to check if it already contains datepicker then first remove class hasDatepicker then apply datePicker to it.
function convertTxtToDate() {
$('.dateTxt').each(function () {
if ($(this).hasClass('hasDatepicker')) {
$(this).removeClass('hasDatepicker');
}
$(this).datepicker();
});
}
A little note to the SeanJA answer.
Interestingly, if you use KnockoutJS and jQuery together
the following inputs with different IDs, but with the same data-bind observable:
<data-bind="value: first_dt" id="date_1" class="datepick" />
<data-bind="value: first_dt" id="date_2" class="datepick" />
will bind one (the same) datepicker to both of the inputs (even though they have different ids or names).
Use separate observables in your ViewModel to bind a separate datepicker to each input:
<data-bind="value: first_dt" id="date_1" class="datepick" />
<data-bind="value: second_dt" id="date_2" class="datepick" />
Initialization:
$('.datepick').each(function(){
$(this).datepicker();
});
The solution here is to have different IDs as many of you have stated. The problem still lies deeper in datepicker. Please correct me, but doesn't the datepicker have one wrapper ID - "ui-datepicker-div." This is seen on http://jqueryui.com/demos/datepicker/#option-showOptions in the theming.
Is there an option that can change this ID to be a class? I don't want to have to fork this script just for this one obvious fix!!
To change use of class instead of ID
<script type="text/javascript">
$(function() {
$('.my_date1').datepicker();
$('.my_date2').datepicker();
$('.my_date3').datepicker();
...
});
</script>
I had the same problem, but finally discovered that it was an issue with the way I was invoking the script from an ASP web user control. I was using ClientScript.RegisterStartupScript(), but forgot to give the script a unique key (the second argument). With both scripts being assigned the same key, only the first box was actually being converted into a datepicker. So I decided to append the textbox's ID to the key to make it unique:
Page.ClientScript.RegisterStartupScript(this.GetType(), "DPSetup" + DPTextbox.ClientID, dpScript);
I had a similar problem with dynamically adding datepicker classes. The solution I found was to comment out line 46 of datepicker.js
// this.element.on('click', $.proxy(this.show, this));
In my case, I had not given my <input> elements any ID, and was using a class to apply the datepicker as in SeanJA's answer, but the datepicker was only being applied to the first one. I discovered that JQuery was automatically adding an ID and it was the same one in all of the elements, which explained why only the first was getting datepickered.

Categories

Resources