Skip to first unread message
SK
Feb 11, 2013, 11:37:23 AM2/11/13
to heo-i...@googlegroups.com
Has anyone tried using the datepicker functionality in jquery-ui 1.10.0? When I select a date from the popup calendar, scroll the iform down a few lines and then put the cursor back into the date field to pick another date the popup appears just below the original location of the date field instead of under the new location. This does not occur when I change the iform to use an older version of jquery-ui. The following jquery files are included in the html--
iformgen/scripts/jquery/jquery-ui/css/smoothness/jquery-ui-1.10.0.custom.min.css" rel="stylesheet" type="text/css">
iformgen/scripts/jquery/jquery-1.9.1.min.js" type="text/javascript"></script>
iformgen/scripts/jquery/jquery-ui/js/jquery-ui-1.10.0.custom.min.js" type="text/javascript"></script>
iformgen/scripts/jquery/jquery-1.9.1.min.js" type="text/javascript"></script>
iformgen/scripts/jquery/jquery-ui/js/jquery-ui-1.10.0.custom.min.js" type="text/javascript"></script>
I have attached a sample of what appears on the screen.
Scott Morris
Feb 11, 2013, 11:47:41 AM2/11/13
to heo-i...@googlegroups.com
My first guess is that it's probably a "Quirks Mode" side-effect (it doesn't play well with positioning on a scrolled page). Try the code that Jason Murray mentioned in https://groups.google.com/forum/?fromgroups=#!topic/heo-iforms/K-3zVuSixEw
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
According to http://blogs.msdn.com/b/ie/archive/2008/06/10/introducing-ie-emulateie7.aspx - you'll want to put it directly after your <head> tag.
Jason Murray
Feb 11, 2013, 12:18:05 PM2/11/13
to heo-i...@googlegroups.com
I had to modify the existing datepicker because I was getting similar complaints. The main complaint was that if you opened the datepicker and it appeared too low on screen (and you had to scroll down to view it), it would disappear. But only if you used your scroll wheel, or something like that. It was DEFINITELY due to quirks mode.
Here's the code I use instead. Sorry it's not "nicely packaged" as a jquery plugin. I haven't gotten around to it yet. Just change the selector from ".datePicker" to whatever class you're using for your date pickers. I'm also using an open button called "button-calendar.gif" that gets written next to the text box. You'll have to point it to your own button.
If this code doesn't work for you, let me know and I'll make it a bit more portable. Call it from your document.ready function.
function initializeDatePicker()
{
// - show/hide without disrupting the page flow.
$(".datePicker").each(function ()
{
var dpInitClass = "datePickerInitialized";
var hasDatePicker = $(this).hasClass(dpInitClass);
if (hasDatePicker)
return false;
// tighten up the width while we're here to make room for the "close" button:
$(this).css("width", "100");
$(this).css("padding-right", "50");
// the id of the input with the class datePicker, and its jquery selector:
var thisId = this.id;
var altFieldId = "#" + thisId;
// only write the html once:
if ($("#datePickerFor_" + thisId).length == 0)
{
// insert a div for the datepicker so that it shows up inline, and insert a close button.
// both are set display:none until click fires on the input text box.
$(this).after("<div class='datePickerFor' target='" + thisId + "' id='datePickerFor_" + thisId + "' style='display:none; position:absolute'></div>");
$(this).after("<input type=\"button\" onclick=\"$('#datePickerFor_" + thisId + "').hide();$('#datePickerCloseFor_" + thisId + "').hide();$('#datePickerOpenFor_" + thisId + "').show();\" id=\"datePickerCloseFor_" + thisId + "\" style=\"display:none;\" value=\"Close\">");
// insert an image button that opens the datepicker onclick:
$(this).after("<img id=\"datePickerOpenFor_" + thisId + "\" src=\"button-calendar.gif\" style=\"cursor:pointer\" />");
}
// show the inline datepicker and the close button and hide the calendar button image onclick:
$(this).click(function ()
{
// set the div to a datepicker with an onselect event that closes both the div and the close button.
// the value of the input text box is set by specifying the "altField" property.
// the date should be set to whatever is in the text box, or the current date if no value.
$("#datePickerFor_" + thisId).datepicker({
showButtonPanel: false,
numberOfMonths: 1,
minDate: new Date,
defaultDate: $(altFieldId).val(),
onSelect: function (dateText, instr)
{
$(this).hide();
var targetId = $(this).attr("target");
$(altFieldId).val(dateText);
$("#datePickerCloseFor_" + targetId).hide();
$("#datePickerOpenFor_" + targetId).show();
}
});
var pos = $(this).position();
var posTop = pos.top + $(this).height() + 10;
var posLeft = pos.left;
$("#datePickerFor_" + thisId).css("top", posTop);
$("#datePickerFor_" + thisId).css("left", posLeft);
$("#datePickerOpenFor_" + thisId).hide();
$("#datePickerFor_" + thisId).show();
$("#datePickerCloseFor_" + thisId).show();
});
// so that we know this datepicker is initialized. code at top only runs if datepicker isn't yet initialized.
$(this).addClass(dpInitClass);
// call text input's onclick when the calendar button is clicked:
$("#datePickerOpenFor_" + thisId).click(function ()
{
$("#" + thisId).trigger("click");
});
// default today's date:
var todaysDate = new Date();
$(this).val(todaysDate.getMonth() + 1 + "/" + todaysDate.getDate() + "/" + todaysDate.getFullYear());
});
}
________________________________
--
You received this message because you are subscribed to the Google Groups "HEO iForms" group.
To unsubscribe from this group and stop receiving emails from it, send an email to heo-iforms+...@googlegroups.com.
To post to this group, send email to heo-i...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msg/heo-iforms/-/Y9OZ3GdoAV4J.
For more options, visit https://groups.google.com/groups/opt_out.
Here's the code I use instead. Sorry it's not "nicely packaged" as a jquery plugin. I haven't gotten around to it yet. Just change the selector from ".datePicker" to whatever class you're using for your date pickers. I'm also using an open button called "button-calendar.gif" that gets written next to the text box. You'll have to point it to your own button.
If this code doesn't work for you, let me know and I'll make it a bit more portable. Call it from your document.ready function.
function initializeDatePicker()
{
// - show/hide without disrupting the page flow.
$(".datePicker").each(function ()
{
var dpInitClass = "datePickerInitialized";
var hasDatePicker = $(this).hasClass(dpInitClass);
if (hasDatePicker)
return false;
// tighten up the width while we're here to make room for the "close" button:
$(this).css("width", "100");
$(this).css("padding-right", "50");
// the id of the input with the class datePicker, and its jquery selector:
var thisId = this.id;
var altFieldId = "#" + thisId;
// only write the html once:
if ($("#datePickerFor_" + thisId).length == 0)
{
// insert a div for the datepicker so that it shows up inline, and insert a close button.
// both are set display:none until click fires on the input text box.
$(this).after("<div class='datePickerFor' target='" + thisId + "' id='datePickerFor_" + thisId + "' style='display:none; position:absolute'></div>");
$(this).after("<input type=\"button\" onclick=\"$('#datePickerFor_" + thisId + "').hide();$('#datePickerCloseFor_" + thisId + "').hide();$('#datePickerOpenFor_" + thisId + "').show();\" id=\"datePickerCloseFor_" + thisId + "\" style=\"display:none;\" value=\"Close\">");
// insert an image button that opens the datepicker onclick:
$(this).after("<img id=\"datePickerOpenFor_" + thisId + "\" src=\"button-calendar.gif\" style=\"cursor:pointer\" />");
}
// show the inline datepicker and the close button and hide the calendar button image onclick:
$(this).click(function ()
{
// set the div to a datepicker with an onselect event that closes both the div and the close button.
// the value of the input text box is set by specifying the "altField" property.
// the date should be set to whatever is in the text box, or the current date if no value.
$("#datePickerFor_" + thisId).datepicker({
showButtonPanel: false,
numberOfMonths: 1,
minDate: new Date,
defaultDate: $(altFieldId).val(),
onSelect: function (dateText, instr)
{
$(this).hide();
var targetId = $(this).attr("target");
$(altFieldId).val(dateText);
$("#datePickerCloseFor_" + targetId).hide();
$("#datePickerOpenFor_" + targetId).show();
}
});
var pos = $(this).position();
var posTop = pos.top + $(this).height() + 10;
var posLeft = pos.left;
$("#datePickerFor_" + thisId).css("top", posTop);
$("#datePickerFor_" + thisId).css("left", posLeft);
$("#datePickerOpenFor_" + thisId).hide();
$("#datePickerFor_" + thisId).show();
$("#datePickerCloseFor_" + thisId).show();
});
// so that we know this datepicker is initialized. code at top only runs if datepicker isn't yet initialized.
$(this).addClass(dpInitClass);
// call text input's onclick when the calendar button is clicked:
$("#datePickerOpenFor_" + thisId).click(function ()
{
$("#" + thisId).trigger("click");
});
// default today's date:
var todaysDate = new Date();
$(this).val(todaysDate.getMonth() + 1 + "/" + todaysDate.getDate() + "/" + todaysDate.getFullYear());
});
}
________________________________
You received this message because you are subscribed to the Google Groups "HEO iForms" group.
To unsubscribe from this group and stop receiving emails from it, send an email to heo-iforms+...@googlegroups.com.
To post to this group, send email to heo-i...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msg/heo-iforms/-/Y9OZ3GdoAV4J.
For more options, visit https://groups.google.com/groups/opt_out.
SK
Feb 20, 2013, 10:43:41 AM2/20/13
to heo-i...@googlegroups.com
I am new to using jQuery and cannot get your datepicker script working. I removed the doctype and added the meta tag for emulating IE7. I changed the calendar image to src=\"BASE_URLdbmi/iformgen/scripts/jquery/images/calendar.gif\" and included your script in the document.ready function. The image does not appear and the script does not execute even when I add the showOn: 'both', parameter to force execution without using the image. Do you have any recommendations on what I can try next to resolve the issue? Thanks.
Russ Garlow
Feb 20, 2013, 10:46:28 AM2/20/13
to heo-i...@googlegroups.com
Hey Sue, are you initializing the date picker on load? Can you post us some code?
Scott Morris
Feb 20, 2013, 10:54:34 AM2/20/13
to heo-i...@googlegroups.com
If you changed the image src to include the BASE_URL in an external file (JS or CSS), I believe that the HEO parser does NOT search and replace in these files so you'll need to put the full URL there. That's only half of the problem and I agree that we'd need more information to figure that out.
Jason Murray
Feb 20, 2013, 12:29:50 PM2/20/13
to heo-i...@googlegroups.com
If you just paste your html file here one of us can surely help you. I would also look for script errors. If you're using IE make sure they're turned on.
Chrome is much more useful for js debugging. Open your htm in Chrome and hit ctrl+shift+j, which brings up the script debugger. If you have any js errors it will let you know and tell you where the error is happening.
Jason Murray
________________________________
From: heo-i...@googlegroups.com on behalf of SK
Sent: Wed 2/20/2013 10:43 AM
To: heo-i...@googlegroups.com
Subject: Re: using jQuery-ui 1.10.0
Chrome is much more useful for js debugging. Open your htm in Chrome and hit ctrl+shift+j, which brings up the script debugger. If you have any js errors it will let you know and tell you where the error is happening.
Jason Murray
________________________________
From: heo-i...@googlegroups.com on behalf of SK
Sent: Wed 2/20/2013 10:43 AM
To: heo-i...@googlegroups.com
Subject: Re: using jQuery-ui 1.10.0
I am new to using jQuery and cannot get your datepicker script working. I removed the doctype and added the meta tag for emulating IE7. I changed the calendar image to src=\"BASE_URLdbmi/iformgen/scripts/jquery/images/calendar.gif\" and included your script in the document.ready function. The image does not appear and the script does not execute even when I add the showOn: 'both', parameter to force execution without using the image. Do you have any recommendations on what I can try next to resolve the issue? Thanks.
--
You received this message because you are subscribed to the Google Groups "HEO iForms" group.
To unsubscribe from this group and stop receiving emails from it, send an email to heo-iforms+...@googlegroups.com.
To post to this group, send email to heo-i...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msg/heo-iforms/-/brJI8WgAFy0J.
You received this message because you are subscribed to the Google Groups "HEO iForms" group.
To unsubscribe from this group and stop receiving emails from it, send an email to heo-iforms+...@googlegroups.com.
To post to this group, send email to heo-i...@googlegroups.com.
Scott Morris
Feb 21, 2013, 11:08:23 AM2/21/13
to heo-i...@googlegroups.com
I see that you've included the reference to the external jquery-1.9.1.min.js file, but in order to use "jQuery-ui" functionality, you'll also need to include references to the jQuery-ui js and css files. You can find them at www.jqueryui.com
Reply all
Reply to author
Forward
0 new messages