ngJq is not picking the jQuery version #11647

Activity

1. cexbrayat commented on Apr 19, 2015

   

   cexbrayat

   on Apr 19, 2015

   MemberAuthor

   More actions

   @mboudreau maybe you'll have an idea ?
2. mboudreau commented on Apr 19, 2015

   

   mboudreau

   on Apr 19, 2015

   Contributor

   More actions

   @cexbrayat Yes, I do.

   Essentially, it comes down to event flow based on the initialization. In this case, Angular is being loaded and initialized in the head. ng-jq gets called as soon as angular initializes since Angular needs angular.element to be available from the get-go.

   When debugging the code, when it hits the jq() function within Angular, I printed out the 'document' that's current returned and I got this:

   <html>
   <head>
       <script data-require="jquery@2.1.3" data-semver="2.1.3" src="http://code.jquery.com/jquery-2.1.3.js"></script>
       <script>
         var jQuery_2_1_3 = $.noConflict(true);
       </script>
       <script data-require="angular.js@1.4.0-rc.0" data-semver="1.4.0-rc.0" src="https://code.angularjs.org/1.4.0-rc.0/angular.js"></script><style type="text/css"></style>
   </head>
   </html>
   

   As you'll notice, there's no body in there. I'm not sure why this is happening since I would imagine that the body would be present in the html itself. It seems like javascript doesn't have access to it just yet...

   Either way, if you want to fix this issue, you can either remove the angular.js library from within the head and place it within the body underneath your bit of templating code, or you can simply move the ng-app, ng-jq and ng-controller attributes to be part of the html tag instead of the body. This way, when angular searches for the ng-jq tag, it will be present no matter what.

   Cheers.
3. gkalpak commented on Apr 20, 2015

   

   gkalpak

   on Apr 20, 2015

   Member

   More actions

   Since the DOM is being built while parsing the HTML from top to bottom,it is epected that while executing a script in the head, the body element has not been created yet (since the corresponding HTML part has not been parsed yet).

   In addition to @mboudreau's suggestion (and taking into account that ng-jq is (unfortunately) "global" (i.e. shared among all Angular apps on the page)), you only need to move the ng-jq attribute on an element that has already been created when the Angular script is executed. You don't have to also move ng-app if you can't/don't want to.

   _{That said, it is always a good idea to put scripts at the end of body, to avoid showing an empty page while the scripts are loading.}
4. cexbrayat commented on Apr 20, 2015

   

   cexbrayat

   on Apr 20, 2015

   MemberAuthor

   More actions

   Thank you both for your answers. I was not really worried about my own case (that was just a simple plunkr for an upcoming blog post on the 1.4 release), as I was that there might be a real problem. Your explanations make perfect sense, but it's slightly surprising, I think other people are gonna be bite by this...

   I'll close the issue, but maybe this kind of thing should be documented, or even better, ngJq should not depend of its position to behave properly ?
5. mboudreau commented on Apr 20, 2015

   

   mboudreau

   on Apr 20, 2015

   Contributor

   More actions

   Well, to be fair, this is not the position of ngJq that matters, but if
   JavaScript can parse the dom at the time that includes it.

   On Mon, Apr 20, 2015, 6:03 PM Cédric Exbrayat notifications@github.com
   wrote:

   Thank you both for your answers. I was not really worried about my own
   case (that was just a simple plunkr for an upcoming blog post on the 1.4
   release), as I was that there might be a real problem. Your explanations
   make perfect sense, but it's slightly surprising, I think other people are
   gonna be bite by this...

   I'll close the issue, but maybe this kind of thing should be documented,
   or even better, ngJq should not depend of its position to behave properly
   ?

   —
   Reply to this email directly or view it on GitHub
   #11647 (comment)
   .
6. cexbrayat

   closed this as completedon Apr 20, 2015
7. gkalpak commented on Apr 20, 2015

   

   gkalpak

   on Apr 20, 2015

   Member

   More actions

   @mboudreau, not really. JavaScript can parse the DOM, but only the part of the DOM that has already been created by the time it is executed. The DOM is constructed incrementally as the HTML is being parsed by the browser, so it is indeed a matter of position.

   Ideally, ngJq should be associated with an Angular app (so that different apps on a page can reference different versions of jQuery), but I am not sure this possible without a big refactoring of the inner workings of Angular (and it's dependence on jqLite/jQuery).
   So, I don't think it is something worth doing.

   Maybe a short mention in the docs would be in place.