jQuery - Colorbox issues

I have a page where I include a header page via jsp include. The problem I am having is that both pages (the header.jsp and the main page) jquery.colorbox.js. As is stands right now, I have it on the main page and not on the header.jsp. When I have it on both pages it messes up the color box that pops up on the main page. When its on just one or the other pages both color开发者_如何转开发 boxes work until I open the one on the main page. Once I open the main page color box, the dialog popup for the header.jsp no longer will appear.

here is the code for header.jsp:

$('#logout_dialog').dialog({
                autoOpen: false,
                width: 600,
                buttons: {
                    "Yes": function() { 
                        $(this).dialog("close", logoutCheck()); 
                    }, 
                    "No": function() { 
                        $(this).dialog("close"); 
                    } 
                }
            });
            // Dialog Link
            $('#logout').click(function(){
                $('#logout_dialog').dialog('open');
                return false;
            });

here is the code for the main page:

$("a[rel='import']").colorbox({opacity:.35});

<a rel="import" href="importBasicSearch.html" >Import File</a>

Any idea why this is happening?

**EDIT*****

I noticed when I click import first i see this error in the console:

$.colorbox is not a function [Break On This Error] $.colorbox({href:"skuDetails.html...:true, width:"75%", height:"75%"});

But as long as I dont click import all of the other ones work fine.

*EDIT***

actually i just noticed that whenever i click import and close the color box it will no longer let me execute some other jquery functions from the main page. It seems like its still looking on the importBasicSearch.html page for functions.

Any ideas?

I couldn't completely follow your situation, but it sounds like you are throwing JS errors, which would prevent other JS from executing. My guess is that the link you are opening with colorbox should be sandboxed with an iframe. I assume you are loading a complete HTML document with colorbox, and scripts in that document are conflicting your already running scripts. Try using an iframe:

$("a[rel='import']").colorbox({opacity:.35, iframe:true, width:500, height:500});