Having a Javascript conflict of some sort on a website...not working properly (help)
Hello,
I am building a shopping cart website that is using a mega javascript dropdown menu.
Everything was working fine until you get to the checkout page on the website. The checkout page has this accordian / spry deal where customers can checkout on one page. You can view it here:
If I take the menu code out of the header.asp file, then the checkout page works just fine. But if I put the menu code back in, then the checkout page stops working.
Here is the menu code (simplified it a bit for this thread):
<script type="text/javascript">
var acc1 = new Spry.Widget.Accordion("acc1", { useFixedPanelHeights: false, enableAnimation: false });
var currentPanel = 0;
<% if session("idCustomer")>"0" then
session("OPCstep")=2
else
session("OPCstep")=0
end if %>
//* Find Current Panel
<% if len(Session("CurrentPanel"))=0 AND pcv_strPayPanel="" then %>
<% if session("idCustomer")>"0" then %>
acc1.openPanel('opcLogin');
GoToAnchor('opcLoginAnchor');
$('#LoginOptions').hide();
$('#ShippingArea').hide();
$('#BillingArea').show();
<% else %>
$('#LoginOptions').show();
$('#acc1').hide();
<% end if %>
<% else %>
<% If pcv_strPayPanel = "1" Then %>
$(document).ready(function() {
$('#LoginOptions').hide();
pcf_LoadPaymentPanel();
});
<% Else %>
acc1.openPanel('opcLogin');
$('#LoginOptions').hide();
$('#ShippingArea').hide();
$('#BillingArea').show();
<% End If %>
<% end if %>
GoToAnchor('opcLoginAnchor');
function openme(pNumber) {
acc1.openPanel(pNumber);
}
function toggle(pNumber) {
var ele = acc1.getCurrentPanel();
var panelNumber = acc1.getPanelIndex(ele);
if (panelNumber == pNumber) {
acc1.closePanel(pNumber);
} else {
acc1.openPanel(pNumber);
}
}
function togglediv(id) {
var div = document.getElementById(id);
if(div.style.display == 'block')
div.style.display = 'none';
else
div.style.display = 'block';
}
function win(fileName)
{
myFloater=window.open('','myWindow','scrollbars=yes,status=no,width=300,height=250')
myFloater.location.href=fileName;
}
</script>
Any help would be GREATLY appreciated,
Thank you
Last edited by BlackReef; 07-18-2010 at 12:35 AM..
Not quite sure what it means. I google'd it, and one of the solutions was to rearrange the order of the js calls in the header.asp, but that did not work for me
It means the function hoverIntent hasn't been defined. First thing I'd check is that the JS file jquery.hoverIntent.minified.js is actually being found.
It means the function hoverIntent hasn't been defined. First thing I'd check is that the JS file jquery.hoverIntent.minified.js is actually being found.
Ok, well just to make sure, I put the full path of the .js file in the header.asp file and uploaded it. I believe the file is being found as this is the exact path that is currently in the header.asp file:
So is it safe to assume this is not the problem at this point?
Quote:
Originally Posted by wildreason
If you are using more than one framework it is likely they have defined identically named functions that serve different purposes.
If it's an option, try to find a solution for what you are trying to do using just one framework.
Well, I will be honest - this is a bit above my head. I understand that 'framework' means different versions of JS, but thats about the extent of my knowledge.
I basically followed a Mega drop down tutorial to build the menu, and the Javascript in the onepagecheckout.asp page was already pre-coded.
Like I mentioned, everything works fine on the checkout page if I remove the Javascript for the menu in the header.asp file.
Thank you very much for your responses. Any idea on what to do next?
Thanks LT for the help. That link was working last night when I checked it, but I'm getting a 'DB error' now.
Regardless, I did a Google search on jquery noconflict, and I found some example code. I added this to before the </head> tag, but all it did was cause the site not to load...Im sure Im missing something though:
Quote:
<script>
jQuery.noConflict();
// Use jQuery via jQuery(...)
jQuery(document).ready(function(){
jQuery("div").hide();
});
// Use Prototype with $(...), etc.
$('someid').hide();
</script>