jQuery is not defined (in [Symfony] templating environment)
I am trying to display a page that uses jQuery. The AJAX functionality implemented in the page does not work.
I am using FF for debugging. When I look in the console panel, I see the following error: 'jQuery is not defined'. Ah, that's an easy one I think - maybe the jQuery file has not been included correctly, or not found etc. So I take a look at the HTML and click on the node - lo and behold, the jQuery script has been CORRECTLY included in the page.
Although none of the other js libraries in the pages where jQuery is referenced uses '$' (like prototype), I have invoked the noConflict() method in the jQuery logic, just in case I use a conflicting library at a later stage.
[Edit]
I think the problem is related to the file that I am using jQuery in a templating environment (Symfony 1.4 to be precise). For those not familiar with the Symfony templating system, essentially, the view model is comprised of a 'layout' file (the template), which then gets decorated (decorator pattern), with other bits of information (lets call this 'page content'开发者_如何转开发).
The final page looks roughly something like this:
<html>
<head>
<script type="text/javascript" src= "http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" ></script>
</head>
<body>
<!-- page contents go here -->
</body>
</html>
I am loading jQuery into the template (i.e. the 'layout' in Symfony terminology).
The reasoning for this being that the JQ library is cached client side, and is available for the pages that require it. The dynnamic pages (whose content go into the 'page content' section of the layout), will then have their own jQuery logic. This (using the "wrapper function" idea provided in the answer by Mark Schultheiss below), looks like this:
<script type="text/javascript">
/*<![CDATA[*/
jQuery(function()
{
jQuery.noConflict();
jQuery(document).ready(function(){
jQuery("div.tpaccordion div.accItem").hide();
jQuery("#latestVideosHolder").show();
jQuery("div.tpaccordion h3").click(function(){
jQuery(this).next().slideToggle("slow")
.siblings("div.accItem:visible").slideUp("slow");
jQuery(this).toggleClass("active");
jQuery(this).siblings("h3").removeClass("active");
});
});
});
/*]]>*/
</script>
**[Edit2]**Corrected the syntax error. Now I'm back to getting the jQuery is not defined error. :(
It is running before the script/DOM is loaded. Put the jQuery.noconflict(); in a jquery wrapper
jQuery(function()
{
jQuery.noConflict();
});
If you DO think you might need to protect yourself:
(function($)
{
$.noConflict();
})(jQuery);
also works
EDIT: Fixed some syntax errors
This is down to JQuery not being loaded in 99% of all cases.
Use Firebug's "net" tab to check out whether your JQuery file is actually being loaded.
Also, it could be that you're referencing JQuery twice, I think that could cause
JQueryto vanish as well.
if that doesn't help, I suggest you dump the <script> includes into your question, the way the turn up in your browser.
What worked for me was to use absolute references versus relative to the scripts although this is a security nightmare for anyone not doing only internal web projects.
jQuery is probably being loaded asynchronously. For example, if you are using the Google Ajax APIs like the following, then you must wrap any code that depends on jQuery in a callback passed to google.setOnLoadCallback():
<script src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
// Load jQuery (asynchronously)
google.load("jquery", "1", { uncompressed: true });
// Won't work -- jQuery is not necessarily loaded yet
jQuery(function ($) {
// Document-ready operations
});
// Must use the setOnLoadCallback
google.setOnLoadCallback(function () {
// jQuery is now loaded
jQuery(function ($) {
// Document-ready operations
});
});
</script>
Alternatively, you could avoid the asynchronous loading by directly referencing jQuery in a script tag:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
You should call jQuery.noConflict() immediately after including jQuery:
<script src="jquery.js" type="text/javascript"></script>
<script type="text/javascript">
/*<![CDATA[*/
jQuery.noConflict();
/*]]>*/
</script>
<!-- more javascript includes -->
Maybe link to external jQuery is wrong? It seems that code should work. Try to get rid of CDATA blocks - chances are you don't need that.
Wrap your jQuery code (and if you really need it, the call to jQuery.noConflict()) around the following function
$(function() { jQuery.noConflict(); ... });
And be sure to add it to the <head> section of your page.
加载中,请稍侯......
精彩评论