0

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

Brian Mains
  • 50,520
  • 35
  • 148
  • 257
chadn
  • 117
  • 2
  • 10
  • Why are you're including multiple versions of jquery? This could be breaking things. – Martijn B Oct 17 '11 at 18:44
  • I am fairly new to jquery and trying to utilize multiple plugins to achieve what I am looking for. And I have found that when I don't use all the js files that come with the plugins the plugins do not work. I tried using the microsoft ajax cdn but when I do facebox does not work. – chadn Oct 17 '11 at 19:09

2 Answers2

1

Try wrapping it in document.ready as in:

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

The reason it's failing is because it's running before the facebox plugin is ready most likely.

Brian Mains
  • 50,520
  • 35
  • 148
  • 257
  • I think your hunch is likely correct but how would "$(document).ready(function()..." then work? (btw that's a very long hand version of $(function()...) – Rune FS Oct 17 '11 at 18:58
  • It's the plugin is not ready based on your error, so you need to delay until JQuery is completely ready, for the ready event... I was wrong to state $ was not initialized because it's defined at the time the script is defined, but it may not be fully implemented as JS scripts begin to process/execute. – Brian Mains Oct 17 '11 at 19:04
  • I just tried this and it still gives me a jQuery.facebox is not a function. – chadn Oct 17 '11 at 19:10
  • That can happen for several reasons; there can be some piece of code wiping out the plugin (or it wasn't registered in the first place), or it can be that the script is not loaded yet. In my experience is that it's one of those.... To verify it's not the latter, change the script to: $(document).ready(function() { window.setTimeout(function() { jQuery.facebox({ div: '#error' }); }, 15000); }); Essentially, I added a timeout to wait 15 seconds for the page to process the markup and see if there is a timing issue here.... that would at least tell you if that's the problem... – Brian Mains Oct 18 '11 at 01:15
  • Alternatively, are you sure it's jQuery.facebox, and not something like: $("#MyEl").facebox();? I've never used it, so I'm sure I'm wrong, but just in case... – Brian Mains Oct 18 '11 at 01:16
1

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' }); })
Community
  • 1
  • 1
Martijn B
  • 4,065
  • 2
  • 29
  • 41