troubleshooting Question

jquery daterange picker not showing up correctly in Spry TabbedPanels

Avatar of spectrumcare
spectrumcare asked on
jQueryColdFusion LanguageAdobe Dreamweaver
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>

Open in new window


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.
ASKER CERTIFIED SOLUTION
spectrumcare

Our community of experts have been thoroughly vetted for their expertise and industry experience.

Join our community to see this answer!
Unlock 1 Answer and 8 Comments.
Start Free Trial
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