Home/ Questions/Q 554747
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-13T11:44:34+00:00

I am trying to display a page that uses jQuery. The AJAX functionality implemented

  • 0

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. 🙁

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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

    • 0