Question

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.

Answer 1

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();
  }
});