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.
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.
Our community of experts have been thoroughly vetted for their expertise and industry experience.