Uncaught TypeError: Object#<Object> has no method 'dispatchEvent'

Question

I'm trying to combine Drupal with Picasa web integrator.

I have these 3 lines in the section of my page.tpl.php:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="/fotos/js/jquery.slimbox2/jquery.slimbox2.js" language="JavaScript"></script>
<script type="text/javascript" src="/fotos/js/jquery.pwi.js" language="JavaScript"></script>

I also added this script to my head section, to test an album (the username and albumname are not important, I tested it offline with my username and album and that worked fine):

<script type="text/javascript">

$(document).ready(function() {

    $("#container").pwi({
        username: 'My',
        maxresults: 5,
        mode: 'album',
        album: 'MyAlbum'
    });

});
</script>

Google Chrome gives me this error when I try it on my Drupal-page:

prototype.js:5733Uncaught TypeError: Object#<Object> has no method 'dispatchEvent'

Answer 1

Drupal also comes with jQuery, and you cannot simply just add the later version in <script> tags. You can try using Drupal's jquery update to get a more recent version, or try noConflict (I suspect you will need it anyhow if you want to use Prototype).

Answer 2

It looks like you are also loading prototype.js on the page (used by lightbox.js, perhaps?, and that perhaps the $ used by both jQuery and Prototype are conflicting. If you really need to use both Prototype and jQuery, look into using jQuery's noConflict mode: http://api.jquery.com/jQuery.noConflict/.