I need to set up two jQuery UI date pickers to always be displayed. I know there's an easy way to do this with DIVs, but I can't find anything on how to do it for inputs. I've tried the "show" method in the jQuery UI documentation, but that just acts as a click on the input on page load, which isn't what I'm looking for.
I just tested the code below and it always remains on the page. You will need to handle the selection/click events by passing options the datepicker in the javascript. I added the JS for when the user selects a date... that should give you enough to go off of.
HTML:
<div id="test"></div>
<input type="text" id="date_input">
Javascript:
$('#test').datepicker({
onSelect: function(date, obj){
$('#date_input').val(date); //Updates value of of your input
}
});
Related
Here is what I am trying to do.
If the user makes a selection from the suggested options then I display a div tag using jquery. I use onCompleteTopics to fire this event.
Now when the user makes any changes to the text box I want to hide the div tag again unless the user makes a selection from the suggested options.
How to fire the text changed event on jquery struts2 autocompleter.
I make a div tag visible when the user selects something from the suggestions using onCompleteTopics.
However if the user changes the text in the field I want to hide the div tag again.
But I am not able to find the right event for the same.
After trying a lot of permutation and combination I managed to figure out the solution. Its not straightforward maybe not the ideal solution but it works.
Struts Code
<sj:autocompleter
theme="simple" name="userName" id="idautocomplete"
href="%{fetchList}" onSelectTopics="complete" onSearchTopics="textchange"
loadOnTextChange="true" loadMinimumCount="3" />
Note I have used onSelectTopics and onSearchTopics but this itself do not solve the problem. I have to use some jquery along with this.
jquery
var gvar;
$.subscribe("complete", function(event, data) {
gvar = data;
setTimeout(delayfunc, 0);
});
$.subscribe("textchange", function(event, data) {
$('#idBizAccess').css("display","none");
});
function delayfunc() {
$('#idBizAccess').css("display","table-row");
}
The unusual part here is setTimeout with delay 0. I tried calling the function directly but it doesn't fetch the selected value instead it just fetches the value that is typed in the autocompleter field.
Now it works as per the requirement.
I have asked this same basic question before several times without a response, but let me try one more time, breaking it down as simple as possible.
I have a strongly-typed view with a hidden field on it.
When the view renders server-side, I am setting the value of the hidden field to a property of the model.
When the view renders client-side, I want to get the value of the hidden field (that was set during the server-side render) and display it in a java script alert box.
This should be a simple thing to do and yet I am unable to make it work. I have set a break-point in the view and I can see that the hidden field is being set to the correct value. But the javascript will not display that value.
The page/view being rendering has been gone to before. At the time I want to display this alert, I am going back to that page and now I want to see the alert.
It is as if the page is being cached, so instead of using the new value for the hidden field it is using the old value (from the first time the page was visited). If the DOM is being cached, how I can prevent that so that each time I visit the page I get the updated values of the page and not the cached ones? What am I doing wrong??
#<input type="hidden" id="hdnShowMsg" value="#Model.ShowMsg" />
<script>
alert($('#hdnShowMsg').val());
</script>
Your script may be firing before your document is fully rendered. Use the jQuery document ready function.
http://api.jquery.com/ready/
<script>
$(function() {
alert($('#hdnShowMsg').val());
});
</script>
Also note that document ready is not supported within a jQuery Mobile document and you may run into problems depending on what part of the DOM you are trying to manipulate.
Use $(document).bind("pageinit", function() {}) instead.
http://jquerymobile.com/demos/1.2.1/docs/api/events.html
Have the following markup in my html page to toggle a search bar based on if a search icon is clicked:
<a id="searchIcon" href="/"></a>
<div id="searchWrapOuter" style="display:none;">
<div id="searchWrapInner">
<div id="formContainer">
<form id="searchForm" action="#">
<div>
<input type="search" name="search-mini" id="search-mini" value="" data-mini="true" />
</div>
</form>
</div>
</div>
</div>
Width the following javascipt/jquery:
$(function() {
$(document).on("click", "#searchIcon", function () {
var searchWrapper = $("#searchWrapOuter");
$(searchWrapper).slideToggle();
return false;
});
});
This code works as expected on a page load direct off a Url. When coming into the page off a link which is Ajax loaded, loads the contents of the page into the DOM, and the DOM ready handler only executes for the first page.
I have read about using the
$(document).on('pageinit'), not $(document).ready()/$(function()
I still haven't been able to get this to work when coming in off an ajax link however. What would be the correct way to implement these events to get the code to work coming in from an Ajax link?
Thanks,
Most likely it is because you are using IDs instead of classes. jQuery Mobile doesn't work well with IDs because it caches pages into the DOM so if you open a page, close it, then go back to the page, you might have your page twice inside the DOM (one visible, one hidden/cached). So when you do $("#searchWrapOuter") you don't know which element you are actually dealing with (in your case, probably the hidden one).
The solution is to change your IDs to classes. This is not very intuitive but I found that is the best way to work with jQuery Mobile.
Also note this comment in the doc which might also be relevant to you:
The id attribute of all your elements must be not only unique on a given page, but also unique across the pages in a site. This is because jQuery Mobile's single-page navigation model allows many different "pages" to be present in the DOM at the same time. This also applies when using a multi-page template, since all "pages" on the template are loaded at once.
http://jquerymobile.com/demos/1.2.0/docs/pages/page-anatomy.html
You can manually adjust delay time to 500ms and 1s.
$(searchWrapper).delay(1000).slideToggle();
My issue is that the page id was below the pages tags. So once I moved the page div above it, the javascript was included in the ajax page load. Previous to this
I have a div ided as inPatientDecision, the contents for which are loaded dynamically through an Ajax call. The loaded content has a few HTML datepicker elements with class attribute set to datePicker. To instantiate the Jquery UI Datepicker calendar to those elements, I've set $(\'.datePicker\').datePicker(); on ajax complete. The ajax call is:
jQuery.ajax({type:'POST',
data:{'inpatientDecisionId': '6'},
url:'/myproje/um/editDecision/13',
success:function(data,textStatus){
jQuery('#inPatientDecision').html(data);},
error:function(XMLHttpRequest,textStatus,errorThrown){},
complete:function(XMLHttpRequest,textStatus){
$(\'.datePicker\').datepicker();
}});;
alt="Edit Authorization Decision" src="/everest/images/edit_icon.png">
Now when the content loads and the datepicker element is clicked, I sure can get the calendar displayed. But when I select any date, the selected date is not displayed to the input boxes.
Sure something like this has been asked here before but the solutions provided haven't been much helpful to me (possibly neither to the previous OP, an answer hasn't been accepted).
Please see my updated code below
jQuery.ajax({type:'POST',
data:{'inpatientDecisionId': '6'},
url:'/myproje/um/editDecision/13',
success:function(data,textStatus){
jQuery('#inPatientDecision').html(data);
$(\'.datePicker\').datepicker();
},
error:function(XMLHttpRequest,textStatus,errorThrown){},
});;
Basically complete and success would execute together, so i just placed datepicker after you place html in success section.
Hopefully this should work.
I'm working with a dynamic DOM here, and have called the jQuery UI datepicker to all inputs with a specific class name, in this case .date
It works great with the first, static, construct but when I clone it the event handlers don't seem to want to move over. I get the Firebug error:
inst is undefined
I tried looking into jQuery's new live() function but couldn't combine the two. Any ideas?
Ah, got it. Right after I append the HTML to the DOM I run this on all the inputs I'd like to have a datepicker pop up with. Datepicker adds a class to elements it has been attached to, so we can filter out existing inputs and only apply it to new ones.
$('.date').not('.hasDatePicker').datepicker();
I hope this helps people as I was Googling for days and didn't find anything!
You should also note that it would be faster to check for input.date in the new generated HTML by setting that as a context, rather than the whole page, as it will save time, due to this being a more efficient operation.
I had a similar Issue, I had multiple tables on a page and each had multiple datepickers, also on click of button "AddLine" it added a table row with dynamic HTML and datepicker.
I realized after a lot of search that my input date fields had no "id" defined they looked like this
<input type="text" class="datepicker" name="mDate1" value="" size=8 >
jquery was pointing all the date fields values to the very first date field defined on page, the calendar would popup on all the date fields but the value of 1st date field would change, I made a change to the html like this
<input type="text" class="datepicker" id="Date1" name="mDate1" value="" size=8 >
by adding a "id" and it started working, for the dynamic date fields I change the Id like this
var allColumns = $("#"+$tableId+" tr:last td");
$(allColumns).each(function (i,val) {
if($(val).find(":input").hasClass("datepicker")){
$(val).find(":input").attr("id",newId+$(val).find(":input").attr("id"));
}
});
You need to use the 'live' event to make it work with dynamic DOM. So, if the class for your datepicker inputs is 'date-input', following code will make it work:
$(document).ready(function() {
$('.date-input').live('click', function() {
$(this).datepicker('destroy').datepicker({showOn:'focus'}).focus();
});
});
This might be a little late, but all the suggestions above didn't work for me, I came up with an easy solution for this.
First, what is causing the problem:
JQuery assign datepicker to element id. if you are cloning element, then same id might be cloned as well. which jQuery doesn't like. You might end up with either receiving null reference error or the date being assigned to first input field regardless which input field you click on.
Solution:
1) destroy datepicker
2) assign new unique ids to all input field
3) assign datepicker for each input
Make sure your input is something like this
<input type="text" name="ndate[]" id="date1" class="n1datepicker">
Before you clone, destroy datepicker
$('.n1datepicker').datepicker('destroy');
After you clone, add these lines as well
var i = 0;
$('.n1datepicker').each(function () {
$(this).attr("id",'date' + i).datepicker();
i++;
});
and the magic happens
Use
$j(id or class).removeClass('hasDatepicker').datepicker();
It is working
Use jQuery selectors:
$(".mydatepicker:not(.hasDatepicker)").datepicker()
Multiple instances of the jquery-ui library on the page will cause this error too. Removing redundant instances work for my case
I experienced the same symptom, in this caused by having a td containing element with the same id attribute as the input,
<td id="fld_xyz"><input id="fld_xyz" class="date" /></td>
I know this isn't ideal anyway, but it's worth knowing that the datepicker component seems to be relying on the uniqueness of the id.
I had this problem. My situation ended up being I had another element with the same ID as the input with the datepicker.
Today I faced the same issue... I am using datetimepicker plugin in my application.
Also using jquery's default datepicker too. When ever I am invoking them both on document ready I am getting the error inst is undefined.
$(document).ready(function(){
$(".datepickerCustom").datetimepicker();
$(".datepicker").datepicker();
$("#MainForm").validationEngine('attach');
....
});
So I changed the code to invoke before document ready like below:
$(".datepickerCustom").datetimepicker();
$(".datepicker").datepicker();
$(document).ready(function(){
$("#MainForm").validationEngine('attach');
....
});
Now every thing is working fine. No problems.
I had a similar problem with data picker not working after a first call. I found an answer to my issue here:
http://www.stemkoski.com/problem-with-jquery-ui-datepicker-dynamic-dom/
I was cloning sections dynamically from template and inadvertently including the class that datepicker adds once its called:
hasDatepicker
I placed my first datepicker call after I clone the template and that did it. I then added a datepicker call after each instance of clone:
$(source).clone().appendTo(destination).find(".datepicker").datepicker();
After trying many of the answers here, this is what worked for me and is showing on the first click/focus
function vincularDatePickers() {
$('.mostrar_calendario').live('click', function () {
$(this).datepicker({ showButtonPanel: true, changeMonth: true, changeYear: true, showOn: 'focus' }).focus();
});
}
this needs that your input have the class 'mostrar_calendario'
live is for JQuery 1.3+ for newer versions you need to adapt this to "on"
See more about the difference here http://api.jquery.com/live/
If it still doesn't work, it is because of the cloned id. You can completely remove datepicker like this:
$(selector).removeClass('hasDatepicker').removeAttr('id').datepicker();