troubleshooting Question

jquery daterange picker not showing up correctly in Spry TabbedPanels

Avatar of spectrumcare
spectrumcare asked on
Adobe DreamweaverColdFusion LanguagejQuery
8 Comments1 Solution573 ViewsLast Modified:
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
<!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.
Join the Community
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.

-Mike Kapnisakis, Warner Bros