Search code examples
c#asp.neterror-handlingfaceboxmaster-pages

facebox is not a function in asp.net masterpage

I'm trying to integrate my error handling with facebox to show my errors in a cleaner way. The problem that is occurring is that when I try to call jQuery.facebox, it is telling me that it is not a function. But I am able to use facebox's rel on links throughout my application.

Head:

<script language="javascript" src="http://code.jquery.com/jquery-latest.js" type="text/javascript" />
<script language="javascript" src="/Resources/js/jquery.min.js" type="text/javascript"></script>    
<script language="javascript" src="/Resources/js/jquery-1.2.2.pack.js" type="text/javascript"></script>        
<link href="/Resources/css/facebox.css" media="screen" rel="stylesheet" type="text/css"/>        
<script src="/Resources/js/facebox.js" type="text/javascript" />

Then from my codebehind on the masterpage Im calling facebox like this:

ScriptManager.RegisterStartupScript(Page, typeof(string), "ErrorMessage", "jQuery.facebox({ div: '#error' });", true);

And the error div is down towards the end of the masterpage:

<div id="error" style="display:none;">
    <table width="100%" cellpadding="0" cellspacing="0">
        <tr>
            <td colspan="2" style="background-color:#5F92CB; color:#fff; padding:6px; font-weight:bold;" align="left">Error Occurred while processing request</td>
        </tr>
        <tr>
            <td style="padding:4px;" class="boldText"><asp:Label ID="lblErrorMessage" runat="server" /></td>
        </tr>            
    </table>
</div>

Any help would be greatly appreciated. thanks

Solution

  • If you really need to use multiple versions of jquery on the same page, which is doable but not always preferable (may give headaches), you will have to use jQuery's noconflict mode. Check for more info and implementation details the following urls: link 1, link 2

    It's important to know which plugins use which version of jQuery. This is because you will have to load them in the right order. You will need to load the older version plugins before the new jQuery version.

    That said it's beter to run scripts when the DOM is loaded, just like Brian said, use the following snippet to accomplish that:

     $(document).ready(function() { jQuery.facebox({ div: '#error' }); })