All geek questions in one place

JQuery not defined (in the symfony template environment)

I am trying to display a page using jQuery. AJAX functionality implemented on the page does not work.

I use FF for debugging. When I look at the console panel, I see the following error: "jQuery not defined". Ah, this is easy, I think - maybe the jQuery file was not included correctly or could not be found, etc. So I look at the HTML and click on node - lo and lo, the jQuery script has been CORRECTLY included in the page.

Although none of the other js libraries on pages referenced by jQuery uses '$' (for example, a prototype), I called the noConflict () method in jQuery logic, just in case I use a conflicting library later in the stage.

[change]

I think the problem is with the file I'm using jQuery in the template environment (more precisely, Symfony 1.4). For those who are not familiar with the Symfony template system, in essence, the presentation model consists of a “layout” file (template), which is then drawn up (decorator pattern), with other bits of information (it can be called “page content”,).

The last page looks 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 a template (i.e. "layout" in Symfony terminology).

The reason for this is that the JQ library is cached on the client side and available for pages requiring it. Dynamic pages (the contents of which are included in the content section of the layout page) will have their own jQuery logic. This (using the idea of ​​a “wrapper function” presented in Marc Schultea's answer) below:

<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] ** ​​ . , jQuery .: (

+3
7

script/DOM. jQuery.noconflict(); jquery

jQuery(function()
{
  jQuery.noConflict(); 
});

, :

  (function($)
    {
      $.noConflict(); 
    })(jQuery);

EDIT:

+8

JQuery, 99% .

  • "net" Firebug, , JQuery.

  • , , JQuery , , JQuery.

, <script> , .

+4

, , , , -.

+2

jQuery, , . , API Ajax Google, , , jQuery, , 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>

, jQuery script:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
+1

jQuery.noConflict() jQuery:

<script src="jquery.js" type="text/javascript"></script>

<script type="text/javascript">
/*<![CDATA[*/
jQuery.noConflict();
/*]]>*/
</script>

<!-- more javascript includes -->
+1

Maybe the link to external jQuery is incorrect? It seems that the code should work. Try to get rid of CDATA blocks - most likely, you do not need it.

0
source

Wrap your jQuery code (and if you really need it, a call jQuery.noConflict()) around the next function

$(function() { jQuery.noConflict(); ... });

And be sure to add it to the section <head>on the page.

0
source

Source: https://habr.com/ru/post/1729068/

More articles:


All Articles