3

I started studying UserJS in Opera. To test, I tried to connect the jQuery library and the jQuery UI, but it did not work. Here's the code:

(function( ) {
    var headID = document.getElementsByTagName("head")[0];         
    var newScript = document.createElement('script');
    newScript.type = 'text/javascript';
    newScript.id = 'myjQuery';
    newScript.src = 'http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js';
    headID.appendChild(newScript);

    newScript = document.createElement('script');
    newScript.type = 'text/javascript';
    newScript.id = 'myjQuery2';
    newScript.src = 'http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js';
    headID.appendChild(newScript);

    alert('first alert');
    window.addEventListener('load', function (e)  {
        $('body').html('test page');
    }, false);
})( );

First alert work. Two libraries is connected to page, but jQuery code not working. What is wrong?

PS. I get an error: ReferenceError: Undefined variable: $

Anton
  • 921
  • 3
  • 12
  • 26

1 Answers1

2

Your scripts are loaded asynchronously and are probably not ready yet when the page has loaded, thus $/jQuery don't yet exist in window scope.

Since you're using jQuery you can easily use it's $(document).ready() or just $(), as it also works when called AFTER the page has loaded.

Here's a fiddle with a simple script.onload handler that fires jQuery's ready() once both scripts are available: http://jsfiddle.net/qaYJF/

Flo
  • 1,965
  • 11
  • 18
  • I tried this, but it did not work. Are you sure that this option works? – Anton Jan 14 '12 at 12:56
  • I writing an Opera extension. This is extension with you method and it did not work: http://dl.dropbox.com/u/30086473/HabraCorrector.oex – Anton Jan 14 '12 at 12:58
  • Please Take a look and tell me what's the problem – Anton Jan 14 '12 at 12:58
  • I checked. This code, for some reason, works in UserJs, but not with extensions Opera. In what may be the problem? I'm quite confused. – Anton Jan 14 '12 at 13:07
  • I'm not really familiar with their extension API or possible restrictions. Are your @include rules correct? What happens on pages that match them - are jQ/jQ UI actually loaded? Does it throw errors? – Flo Jan 14 '12 at 13:14
  • Yes, all include is correct. I tested it on different pages, even those where there is jQuery - is everywhere the same error. – Anton Jan 14 '12 at 13:58
  • If it's still about $ not being defined, and explicitly saying "window.$('body')..." instead of just "$('body')..." doesn't work either, you may want to rename and retag the question and undo accepting the answer so somebody who knows more about Opera extensions can find and answer it. Also, if it's for an extension and not just a personal userScript, please think of jQuery version/plugin conflicts and remember to use noConflict(true) for the jQuery version loaded by your extension. – Flo Jan 14 '12 at 15:29
  • You need to be more explicit when you are writing within the extension environment, which means that you have to write `window.$` instead of `$`. – XP1 May 25 '12 at 17:52