adding some jquery script to Magento page

Question

this has been driving me insane. I can't figure out how to append some jquery script to the head section of a particular page in Magento 1.4.2. I've added the latest jquery library to all pages by editing page.xml, and i've added the no conflict thing.

I know i need to add some code to the custom layout update area for the page in question. However nothing works, i've tried many pieces of code and none appear in the head of the page when i later check the source code.

I posted the same question on official mangeto forum but eight days later and no replies. That forum is horrible for getting advice most questions are unanswered :(. Any idea how i could add to the head via custom layout update this for example?

$(document).ready(function(){
    $("a").click(function(event){
        alert("Thanks for visiting!");
    });
});

I've tried enclosing that in script tags, in reference = head tag. Nothing works. Pulling my hair out and i've googled every word phrase i can think of but no examples of how to add scrip to a page's head in Magento. Please help.

Answer 1

expanding on Alan's excellent summary. If you just want to add the file to one specific page you can use the following snippet in the Layout Update XML field:

<reference name="head">
    <action method="addJs"><script>path/to/my/file.js</script></action>
</reference>

and place the file into http://example.com/js/path/to/my/file.js

or if you want it residing in your skin folder use

<reference name="head">
    <action method="addItem"><type>skin_js</type><name>js/file.js</name><params/></action>
</reference>

with the expected location http://example.com/skin/frontend/base/default/js/file.js change base and default according to the package and theme you are using

You can also use the above snippet in any other layout/?.xml file just place it within the layout handle you want to address. For example to place it in all cms pages in cms.xml you'll find

<cms_page>
 ....
</cms_page>

and change it to

<cms_page>
    ...
    <reference name="head">
        <action method="addJs"><script>path/to/my/file.js</script></action>
    </reference>
</cms_page>

and another easy one for adding a snippet of javascript to all pages go to System > Configuration > Design > Footer > Miscellaneous HTML

Further reading:

Using local.xml for theme customisations

Demystifying Magento’s Layout XML

Answer 2

If you've added the jQuery library and turned on noConflict mode, then you should try accessing the jQuery object using the jQuery variable as opposed to the $ variable. Try it like this and see if it works:

jQuery(document).ready(function(){
    jQuery("a").click(function(event){
        alert("Thanks for visiting!");
    });
});

If that doesn't work, you should double check your html output to see if the jQuery library is being included before you script is running. This is crucial as JavaScript processes sequentially on a page from top to bottom.