spectrumcare
asked on
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.
ASKER
here is the link to the page http://www.winotify.com/ry
For the jquery I was testing out the different versions and forgot to take the others out when I posted the code.
The errors that was showing up were to do with coldfusion. The <cfset and what not.
The reason I am having this issue is because the jquery is being rendered before the Spry is. So when I click on a tab that is not default and click on the calendar it is showing the calendar in the incorrect location because of rendering. I need to figure out if there is a way to change the jquery calendar to render on the page after the spry is rendered. At this time I am unable to change the tabs from Spry to Jquery because out website has Spry tabs through out the program and I don't have the time to change all of them around to jquery tab. I was hoping that there was a way to tell the Spry to load the Jquery after the tabs are loaded by adding an event or something to them. I played around with the all day and was not able to find a solution and was hoping someone else knew. Like I said I can't change them to Jquery because I need to change them thought out our program. I am on a time crunch. This was a request by the user and I am fortunate enough that if this can't be done in a timely fashion I can tell them that this will be done at another time.
For the jquery I was testing out the different versions and forgot to take the others out when I posted the code.
The errors that was showing up were to do with coldfusion. The <cfset and what not.
The reason I am having this issue is because the jquery is being rendered before the Spry is. So when I click on a tab that is not default and click on the calendar it is showing the calendar in the incorrect location because of rendering. I need to figure out if there is a way to change the jquery calendar to render on the page after the spry is rendered. At this time I am unable to change the tabs from Spry to Jquery because out website has Spry tabs through out the program and I don't have the time to change all of them around to jquery tab. I was hoping that there was a way to tell the Spry to load the Jquery after the tabs are loaded by adding an event or something to them. I played around with the all day and was not able to find a solution and was hoping someone else knew. Like I said I can't change them to Jquery because I need to change them thought out our program. I am on a time crunch. This was a request by the user and I am fortunate enough that if this can't be done in a timely fashion I can tell them that this will be done at another time.
Try changing the order of your scripts.
1) Load your css
2) Load spry
3) Load jquery
Instead of
use
1) Load your css
2) Load spry
3) Load jquery
Instead of
<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"> use
<!-- css before js -->
<link rel="stylesheet" href="css/redmond/jquery-ui-1.7.1.custom.css" type="text/css" title="ui-theme" />
<link rel="stylesheet" href="css/ui.daterangepicker.css" type="text/css" />
<!-- spry before jquery -->
<link href="SpryAssets/SpryTabbedPanels.css" rel="stylesheet" type="text/css" />
<script src="SpryAssets/SpryTabbedPanels.js" type="text/javascript"></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>
ASKER CERTIFIED SOLUTION
membership
Create a free account to see this answer
Signing up is free and takes 30 seconds. No credit card required.
Please render your page to html. (run the page and view source). Then save that as a working static html page and post it to your server and share the link here.
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 don't get this problem. I am using chrome/mac.
Let's work with only what you need. Is there a reason to have both jquery and spry tabs on the page? If not, let's get rid of the jquery tabs.
On your spry tabs, you should have separate content for each tab.
Please go through your errors http://validator.w3.org/check?uri=http%3A%2F%2Fwinotify.com%2FryanTest.htm&charset=%28detect+automatically%29&doctype=Inline&group=0
Some are important others not so much. Make sure all tags are closed. You have your head section empty when it should contain all the meta tags and scripts. It should close above where you body tag starts.
I don't get this problem. I am using chrome/mac.
Let's work with only what you need. Is there a reason to have both jquery and spry tabs on the page? If not, let's get rid of the jquery tabs.
On your spry tabs, you should have separate content for each tab.
Please go through your errors http://validator.w3.org/check?uri=http%3A%2F%2Fwinotify.com%2FryanTest.htm&charset=%28detect+automatically%29&doctype=Inline&group=0
Some are important others not so much. Make sure all tags are closed. You have your head section empty when it should contain all the meta tags and scripts. It should close above where you body tag starts.
ASKER
There was no solution for this question and decided to close it
Where to start?
1) Only load jquery once. You have
Open in new window
2) Load all of your css BEFORE your javascript files
3) Validate your code http://validator.w3.org/#validate_by_input You can either paste it or click the tab to post your url. There are 48 errors in your code. I did not look at them but some will not make much difference and others will. Errors in your code will affect how your javascripts work or not.
4) As long as you are using jquery, forget spry. It has not been updated in over a year and is being dropped by adobe. Jquery has tabs and is being constantly updated. http://jqueryui.com/tabs/ I understand that you probably used it because it was built into dreamweaver, spry will just cause issues there will be no cure for. Your web browsers are upgrading on a pretty quick schedule and using something like spry that has not been used in a year is very far behind and a year from now will only be worse.
5) Jquery is on version 1.10 or version 2. The difference is version 2 does not support the older internet explorer browsers.
6) It is possible there is a conflict between jquery and spry but because of the other errors, you will want to take care of those first.