troubleshooting Question
jquery daterange picker not showing up correctly in Spry TabbedPanels
I have a jquery daterange picker that is inside of a Spry TabbedPannel. When I change tabs and click on the textbox to show the date range menu it shows up at the bottom of the screen
I read online saying this is being caused because the date range picker is being rendered on the page before the Spry Tabbed Pannels. I tried their suggestions and nothing seemed to work.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="https://www.w3.org/1999/xhtml">
<head>
<META http-equiv=Content-Type content="text/html; charset=windows-1252">
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="-1">
<cfheader name='expires' value='#Now()#'>
<cfheader name='pragma' value='no-cache'>
<cfheader name='cache-control' value='no-cache,no-store, must-revalidate'>
<cfset tab =0>
<script type="text/javascript" src="js/jquery-1.3.1.min.js"></script>
<script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="js/jquery-1.4.4.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.7.1.custom.min.js"></script>
<script type="text/javascript" src="js/daterangepicker.jQuery.js"></script>
<link rel="stylesheet" href="css/ui.daterangepicker.css" type="text/css" />
<link rel="stylesheet" href="css/redmond/jquery-ui-1.7.1.custom.css" type="text/css" title="ui-theme" />
<title>Message Inbox</title>
<script src="SpryAssets/SpryTabbedPanels.js" type="text/javascript"></script>
<link href="SpryAssets/SpryTabbedPanels.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
$(function(){ $('#date').daterangepicker({
onClose: function(){update();}
});
<cfif isDefined("FORM.date")>$('#date').val('<cfoutput>#FORM.date#</cfoutput>');</cfif>
});
$(function(){ $('#date2').daterangepicker({
onClose: function(){update2();}
});
<cfif isDefined("FORM.date2")>$('#date2').val('<cfoutput>#FORM.date2#</cfoutput>');</cfif>
});
function update()
{
}
function update2()
{
}
</script>
</head>
<body >
<table width="800" border="0" cellspacing="0" cellpadding="8" align="center">
<tr>
<td width="800" valign="top" align="right">
<div id="TabbedPanels1" class="TabbedPanels">
<ul class="TabbedPanelsTabGroup">
<li class="TabbedPanelsTab" tabindex="0">Unread</li>
<li class="TabbedPanelsTab" tabindex="1" >Read</li>
<li class="TabbedPanelsTab" tabindex="2">Sent</li>
</ul>
<div class="TabbedPanelsContentGroup">
<div class="TabbedPanelsContent"><!--- Unread--->
<div id="Unread">
<input type="text" value="" id="date2" name="date2" <cfif isDefined("FORM.date2")>value="LLASLLA"</cfif>/>
</div>
</div>
<div class="TabbedPanelsContent"><!--- Read --->
<table width="100%">
<tr>
<td align="center">
<input type="text" value="" id="date" name="date" <cfif isDefined("FORM.date")>value="LLASLLA"</cfif>/>
</td>
</tr>
<tr>
<td>
<div id="Read">
Some stuff goes here
</div>
</td>
</tr>
</table>
</div>
<div class="TabbedPanelsContent"><!---Sent--->
<div id="fsshome">
Other Stuff here
<input type="text" value="" id="date2" name="date2" <cfif isDefined("FORM.date2")>value="LLASLLA"</cfif>/>
</div>
</div>
</div>
</div>
</td>
</tr>
</table>
<script type="text/javascript">
<!--
var TabbedPanels1 = new Spry.Widget.TabbedPanels("TabbedPanels1", { defaultTab: <cfoutput>#tab#</cfoutput> });
//-->
</script>
</body>
</html>
I read online saying this is being caused because the date range picker is being rendered on the page before the Spry Tabbed Pannels. I tried their suggestions and nothing seemed to work.
Join the community to see this answer!
Join our exclusive community to see this answer & millions of others.
Unlock 1 Answer and 8 Comments.
Learn from the best
Network and collaborate with thousands of CTOs, CISOs, and IT Pros rooting for you and your success.
Andrew Hancock - VMware vExpert
See if this solution works for you by signing up for a 7 day free trial.
Unlock 1 Answer and 8 Comments.
Try for 7 days”The time we save is the biggest benefit of E-E to our team. What could take multiple guys 2 hours or more each to find is accessed in around 15 minutes on Experts Exchange.