Add a JS file to index page for custom jQuery

Question

I've written a jQuery file that creates a dialog box to let the user search for store a location near them, and I've included the HTML necessary for this function on the "header.phtml" page in app/code/design/frontend/rwd/default/template/page/html/header.phtml.

When I include the script directly on header.phtml, I have no problems with the modal.

I have placed my jquery script in the JS folder of the magento root. However, when I try to just include the JS file, it doesn't show up as an included JS file. I tried adding the reference to the file in page.xml that corresponds to header.phtml, but it still wont work.

 <label>All Pages</label>
    <block type="page/html" name="root" output="toHtml" template="page/3columns.phtml">

        <block type="page/html_head" name="head" as="head">
            <action method="addJs"><script>prototype/prototype.js</script></action>
            <action method="addJs"><script>lib/ccard.js</script></action>
            <action method="addJs"><script>prototype/validation.js</script></action>
            <action method="addJs"><script>scriptaculous/builder.js</script></action>
            <action method="addJs"><script>scriptaculous/effects.js</script></action>
            <action method="addJs"><script>scriptaculous/dragdrop.js</script></action>
            <action method="addJs"><script>scriptaculous/controls.js</script></action>
            <action method="addJs"><script>scriptaculous/slider.js</script></action>
            <action method="addJs"><script>varien/js.js</script></action>
            <action method="addJs"><script>varien/form.js</script></action>
            <action method="addJs"><script>varien/menu.js</script></action>
            <action method="addJs"><script>mage/translate.js</script></action>
            <action method="addJs"><script>mage/cookies.js</script></action>
            <action method="addJs"><script>pathtomyfile/location.js</script></action>

Is there a step that I missing to get this file to be referenced properly?

Am I placing this reference in the wrong layout file?

Answer 1

You can use this in your page.xml:

<action method="addItem"><type>skin_js</type><name>js/jQuery.min.js</name></action>

it should work, and load the js from your skin folder.

Much better idea than using xml to load jQuery is to load it in your header from a CDN go to your head.phtml and add this before <?php echo $this->getCssJsHtml() ?> :

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>!window.jQuery && document.write(unescape('%3Cscript src="<?php echo $this->getSkinUrl('js/jquery.min.js'); ?>"%3E%3C/script%3E'))</script>
<script>
    jQuery.noConflict();
</script>

I added jQuery.noConflict(); to fix the conflict with prototype. Also add jquery to your skin inside the JS folder, so if the CDN is not working the system will load it from your template