How to get jQuery ajax calls to work from greasemonkey page events

Question

I have a GM script which inserts a link on to the page, and then adds an event listener for when its clicked.

This then runs a function which contains among other things some jQuery.get calls. These calls however do not seem to fire unless I use the unsafeWindow version of jQuery.

function runMyFunc() {
    console.log('myFunc is called');

    $.get('index.php',function () {
        console.log('jQuery.get worked');
    });
}

$("#someHook").before('<a id="myLink">Link</a>');

$('#myLink').click(runMyFunc);

The above will output 'myFunc is called' to console, but will not do anything with the .get

I'm using FF17 and GM1.5, jQUery from http://code.jquery.com/jquery.js

Is there a nicer way of getting this to work than using unsafeWindow? I had this working before GM 1.0 and have a lot of $.get which I would need to change in my scripts, not all of which are run from the same scenario

Answer 1

Your code works fine for me. Why/How do you think $.get is not working?

Remember that you will never see the 'jQuery.get worked' message if there is a server error (404 etc.) with index.php. Did you check the Firebug Net panel, or Wireshark, etc. to see if the AJAX call was made?

Anyway, you can see that code working, plus some error handling if you install this Greasemonkey script:

// ==UserScript==
// @name     _delme9h762
// @include  http://YOUR_SERVER.COM/YOUR_PATH/*
// @include  http://fiddle.jshell.net/ZqhRH/*
// @require  http://code.jquery.com/jquery.js
// @grant    GM_addStyle
// ==/UserScript==
/*- The @grant directive is needed to work around a design change
    introduced in GM 1.0.   It restores the sandbox.
*/

function runMyFunc() {
    console.log('myFunc is called');

    $.get('index.php', function () {
        console.log ('jQuery.get worked');
    } )
    .error ( function (respObj) {
        console.log ("Error! ", respObj.status, respObj.statusText);
    } )
    .complete ( function (respObj) {
        console.log ("AJAX Complete. Status: ", respObj.status);
    } )
    ;
}

$("#someHook").before('<a id="myLink">Link</a>');

$('#myLink').click(runMyFunc);

And then visit fiddle.jshell.net/ZqhRH/1/show/.

Note, the console will show:

myFunc is called
Error! 404 NOT FOUND
AJAX Complete. Status: 404

On the jsFiddle site, because index.php does not exist there, but $.get() is otherwise working perfectly.