CODEWITHSUNDEEP
magentophp
Pankaj Upadhyay
Pankaj Upadhyay

Reputation: 13574

Adding external javascript files to magento header

I am trying to add some external javascript files to the magento cms but somehow they don't seem to work, though they display alright in the head section.

I am adding following lines of code to the head.phtml

<!--pankaj js edition-->

<script src="<?php echo $this->getJsUrl(); ?>jQuery_1205141001.js" type="text/javascript"></script>
<script src="<?php echo $this->getJsUrl(); ?>Common_1205141001.js" type="text/javascript"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js" type="text/javascript"></script>

They are showing in the head section when the page is rendered, but doesn't seem to do the work they are supposed to be the doing.

Am, I doing something wrong. Because the files work well in simple html page. Do i need to add the files somewhere else. Sorry to bother but i am a newbie for magento.

Upvotes: 0

Views: 12197

Answers (3)

Naresh Tank
Naresh Tank

Reputation: 1568

<reference name="head">
      <action method="addJs"><script>[MODULE]/your.js</script></action>

    </reference>

create folder with same as your module name in js folder of magento root and copy your js file in this folder.

Upvotes: 0

sulman
sulman

Reputation: 2461

Rather than editing the head.phtml file directly to add your JS referecnces you should really place it in to your themes local.xml like so:

<reference name="head">
    <block type="core/text" name="google.cdn.jquery" after="-">
        <action method="setText">
            <text><![CDATA[<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
            <script type="text/javascript">jQuery.noConflict();</script>]]>
            </text>
        </action>
    </block>
    <action method="addItem"><type>skin_js</type><script>js/jQuery_1205141001.js</script></action>
</reference>

Also check for Javascript errors with Firebug. If there are javascript errors that are causing some js functionality to fail firebug will tell you this.

Upvotes: 1

sulabh
sulabh

Reputation: 1117

There might be 2 issues with this

1) You are attempting to execute jquery in jQuery_1205141001.js which is included in the first line, where as you are including the jquery library later
2) Your jquery is conflicting with prototype. For this you need to add this in the phtml before you execute any jquery code and after including jquery library

<script type="text/javascript">
var $j = jQuery.noConflict();
</script>

and then use $j.function instead of $.function for jquery e.g.

$j(document.documentElement).keyup(function (event) {

  if (event.keyCode == 37) {

    $j('#prev1').click();
  } else if (event.keyCode == 39) {
    $j('#next1').click();
  }
});

instead of

$(document.documentElement).keyup(function (event) {

  if (event.keyCode == 37) {

    $('#prev1').click();
  } else if (event.keyCode == 39) {
    $('#next1').click();
  }
});

Upvotes: 2

Related Questions