PDA

View Full Version : Having a Javascript conflict of some sort on a website...not working properly (help)

BlackReef
07-17-2010, 03:33 AM
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:


http://gem-tech.com.mytempweb.com/store/pc/onepagecheckout.asp (http://gem-tech.com.mytempweb.com/store/pc/onepagecheckout.asp)

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):

<head>
<script src="Scripts/AC_RunActiveContent.js" type="text/javascript"></script>
</head>

<body><script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>

<script type="text/javascript" src="jquery.hoverIntent.minified.js"></script>
<script type="text/javascript">
$(document).ready(function() {


function megaHoverOver(){
$(this).find(".sub").stop().fadeTo('fast', 1).show();

//Calculate width of all ul's
(function($) {
jQuery.fn.calcSubWidth = function() {
rowWidth = 0;
//Calculate row
$(this).find("ul").each(function() {
rowWidth += $(this).width();
});
};
})(jQuery);

if ( $(this).find(".row").length > 0 ) { //If row exists...
var biggestRow = 0;
//Calculate each row
$(this).find(".row").each(function() {
$(this).calcSubWidth();
//Find biggest row
if(rowWidth > biggestRow) {
biggestRow = rowWidth;
}
});
//Set width
$(this).find(".sub").css({'width' :biggestRow});
$(this).find(".row:last").css({'margin':'0'});

} else { //If row does not exist...

$(this).calcSubWidth();
//Set Width
$(this).find(".sub").css({'width' : rowWidth});

}
}

function megaHoverOut(){
$(this).find(".sub").stop().fadeTo('fast', 0, function() {
$(this).hide();
});
}


var config = {
sensitivity: 2, // number = sensitivity threshold (must be 1 or higher)
interval: 100, // number = milliseconds for onMouseOver polling interval
over: megaHoverOver, // function = onMouseOver callback (REQUIRED)
timeout: 500, // number = milliseconds delay before onMouseOut
out: megaHoverOut // function = onMouseOut callback (REQUIRED)
};

$("ul#topnav li .sub").css({'opacity':'0'});
$("ul#topnav li").hoverIntent(config);



});



</script>
</body>

And there are two things of script on the onepagecheckout.asp page as well. Here they are:

<script type="text/javascript">
$(document).ready(function() { $('#chkPayment').click(); });
</script>

<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
BlackReef
07-18-2010, 12:32 AM
Can anyone see where the problem is?
gusblake
07-18-2010, 01:03 AM
Have you checked the error console?
BlackReef
07-20-2010, 02:51 AM
Have you checked the error console?

I just checked it today. Here is a screenshot of what it came up with (2 errors)

http://www.blackreefdesigns.com/misc/error.jpg


Error: uncaught exception: [Exception... "'[JavaScript Error: "b.value is null" {file: "chrome://google-toolbar-lib/content/toolbar.js" line: 2513}]' when calling method: [nsIFactory::createInstance]" nsresult: "0x80570021 (NS_ERROR_XPC_JAVASCRIPT_ERROR_WITH_DETAILS)" location: "JS frame :: chrome://google-toolbar/content/gtb.js :: anonymous :: line 81" data: yes]

Error: $("ul#topnav li").hoverIntent is not a function
Source File: http://gem-tech.com.mytempweb.com/store/pc/onepagecheckout.asp?email=&password=&LoginSubmit.x=15&LoginSubmit.y=15
Line: 205

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
Spudhead
07-20-2010, 12:20 PM
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.
wildreason
07-20-2010, 03:03 PM
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.
BlackReef
07-21-2010, 01:04 AM
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:

http://gem-tech.com.mytempweb.com/store/pc/jquery.hoverIntent.minified.js

So is it safe to assume this is not the problem at this point?

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?
low tech
07-21-2010, 01:54 AM
Hi

Just a thought here,

have you looked at jquery noconflict?

http://api.jquery.com/jQuery.noConflict/

LT
BlackReef
07-21-2010, 10:44 PM
Hi

Just a thought here,

have you looked at jquery noconflict?

http://api.jquery.com/jQuery.noConflict/

LT

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:

<script>
jQuery.noConflict();
// Use jQuery via jQuery(...)
jQuery(document).ready(function(){
jQuery("div").hide();
});
// Use Prototype with $(...), etc.
$('someid').hide();
</script>

I found this code at this site: http://docs.jquery.com/Using_jQuery_with_Other_Libraries (http://docs.jquery.com/Using_jQuery_with_Other_Libraries)
low tech
07-22-2010, 12:03 AM
Hi

May I suggest that you try the 'javascript frameworks' part of this forum. They deal with the the jquery framework etc.

I think you will have a much better chance of solving your problem there.

LT
In order to not double post, You may need to ask a moderator to move this thread.