Using bundles jQuery in templates

Post by **yellowled** » Wed Sep 07, 2011 12:38 am

As of v1.6 (I think), s9y bundles jQuery (Yay!) in the <head> (Hmpf. Okay.) like this:

<script type="text/javascript" src="/serendipity/templates/jquery.js"></script> 
<script type="text/javascript"> 
jQuery.noConflict();
</script>

Great. Now, how am I supposed to add jQuery code to that? Is there some kind of … erm … how do you coder guys call those thingies again … hook I can use to insert (template-specific) jQuery code? I would prefer to write my own script.js file and reference it here, but how do I ensure it gets included after the jQuery library? (Yes, I could add it before the closing <body> tag, I was just wondering if there's some smarter way to do it.)

YL

Post by **garvinhicking** » Wed Sep 07, 2011 9:06 pm

Hi!

You can add jquery code simply anyplace in your template you like. Just use "jQuery(...)" instead of "$(...)".

So you could for example add this at the bottom of the page:

Code: Select all

<script>
jQuery(document).ready(function() {
 jQuery('body').html('Here we go.');
});
</script>

And if you want to outsource your file, simply add a .js reference to your script like you do for custom CSS etc. The browser will properly enqueue all external requests, just make sure your own .js reference comes after the eventdata placeholder for the <head>.

Regards,
Garvin

Post by **yellowled** » Wed Sep 07, 2011 10:39 pm

garvinhicking wrote:You can add jquery code simply anyplace in your template you like. Just use "jQuery(...)" instead of "$(...)".

Erm. We wanted to drop using inline CSS and JS, remember?

garvinhicking wrote:just make sure your own .js reference comes after the eventdata placeholder for the <head>.

Ah, that's the one thing I was missing. Thanks.

YL

Timbalu · Post by **Timbalu** » Thu Sep 08, 2011 10:00 am

In my template I followed the boilerplate design to include all js stuff including jquery, except modernizr, in the very end just before closing body. I didn't recognize something did not work by now... What is the difference?
Is there a Serendipity need to put in the head? And how does Serendipity know/decide to use its own jquery?

Post by **yellowled** » Thu Sep 08, 2011 1:30 pm

Timbalu wrote:In my template I followed the boilerplate design to include all js stuff including jquery, except modernizr, in the very end just before closing body. I didn't recognize something did not work by now... What is the difference?

The jQuery bundled with s9y starting with v1.6 is included in the head – if I remember correctly to avoid compatibility issues with plugins using jQuery now which rely on it to be included in the head.

Timbalu wrote:And how does Serendipity know/decide to use its own jquery?

http://board.s9y.org/viewtopic.php?p=10424885

YL

Timbalu · Post by **Timbalu** » Thu Sep 08, 2011 2:03 pm

But there must be some other automatic too....
My head section does not have an automatically included serendipity jquery and I wasn't aware of $serendipity['capabilities']['jquery'] = false; until now.
Do you remember which plugins need it in the head? And why should they?

Post by **yellowled** » Thu Sep 08, 2011 3:13 pm

Timbalu wrote:My head section does not have an automatically included serendipity jquery and I wasn't aware of $serendipity['capabilities']['jquery'] = false; until now.

Mh, I think it also auto-detects a manually included jQuery in the body, but I'm not sure about that. Test it or wait for Garvin to comment on this.

Timbalu wrote:Do you remember which plugins need it in the head? And why should they?

I'm guessing some of onlis jQuery-enabled ones, livecomments etc. Some plugins seem to include style elements within the page (which I consider bad practice). So if the bundled jQuery was included before </body>, the plugin's script could be executed before jQuery was referenced.

YL

Timbalu · Post by **Timbalu** » Thu Sep 08, 2011 4:49 pm

yellowled wrote:Mh, I think it also auto-detects a manually included jQuery in the body, but I'm not sure about that.

Yes, is does by grabbing serendipity_getTemplateFile('jquery.js').
It'll better be a jquery.min.js, I think, as being included in every case.
So there is no need to further include it in the template... or do jquery versions break BC in their history?

Post by **yellowled** » Thu Sep 08, 2011 6:38 pm

Timbalu wrote:It'll better be a jquery.min.js, I think, as being included in every case.

It is. It also is the latest jQuery version. Trust me, I know the person responsible for keeping it up to date in svn.

Timbalu wrote:So there is no need to further include it in the template... or do jquery versions break BC in their history?

No idea what you mean by BC, but jQuery is usually pretty backwards compatible. It might, however, of course always happen that scripts break following major jQuery updates. I'm afraid predicting that is beyond my current jQuery knowledge, but I'll make sure to read the jQuery ChangeLogs and keep you guys up to date.

YL

Using bundles jQuery in templates

Using bundles jQuery in templates

Re: Using bundles jQuery in templates

Re: Using bundles jQuery in templates

Re: Using bundles jQuery in templates

Re: Using bundles jQuery in templates

Re: Using bundles jQuery in templates

Re: Using bundles jQuery in templates

Re: Using bundles jQuery in templates

Re: Using bundles jQuery in templates