Greasemonkey to save specific data on the web page, to a database, has access errors?

Question

I'm trying to extend the usability of a photo-gallery site using Greasemonkey.
The site has a thumbnail for each photo gallery and when you click those thumbnails, they open their own gallery pages.

The problem is that the website updates its galleries very often and I forget the last gallery which I've viewed (new galleries moves the old ones to the next pages). I want the web site to remember the galleries which I've visited and show them in different border color.

It's very easy to change their styles on a click event, using jQuery, but want to save the visited gallery IDs to my local database, in order to read them and change their styles when I loaded the page next time.

Here is my post code:

$(".user_gallery").each(function () {
    $(this).click(function () {
        $("p", this).attr("style", "background-color:yellow"); 

        $.ajax({
            type: "POST",
            dataType: "json",
            contentType: "application/json",
            url: "http://localhost:58364/SaveData.aspx/SaveUserGallery",
            data: "{'galleryID': '" + $("p", this).text() + "'}",
            success: function (data) {
                alert("true!");
            },
            error: function () {
                alert("Error calling the web service.");
            }
        });
    });
});

But of course this gives me cross domain errors:

XMLHttpRequest cannot load .... Origin ... is not allowed by Access-Control-Allow-Origin.

My server-side code is simply a .net web method which runs on my local server and saves galleryIDs to my SQL server db. I'm a member of that photo gallery site and it runs on a different domain.

I'm not an expert web or JS programmer, so I don't know how to solve this problem. How can I do this?

score 3 · Answer 1 · answered Jun 08 '13 at 20:18

There are two ways to handle this. The easiest for you, since you control your own server is to set the Cross-origin resource sharing (CORS) headers on your local server. See "I want to add CORS support to my server".

But, if you don't want to do this, or in cases where you don't control the server, Greasemonkey handles cross-domain AJAX with the GM_xmlhttpRequest() function.

Change the script like:

// ==UserScript==
// @name     _YOUR_SCRIPT_NAME
// @include  http://YOUR_SERVER.COM/YOUR_PATH/*
// @require  http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js
// @grant    GM_xmlhttpRequest
// ==/UserScript==

$(".user_gallery").each ( function () {
    $(this).click ( function () {
        $("p", this).attr ("style", "background-color:yellow");

        GM_xmlhttpRequest ( {
            method:     "POST",
            url:        "http://localhost:58364/SaveData.aspx/SaveUserGallery",
            data:       "{'galleryID': '" + $("p", this).text () + "'}",
            headers:    {"Content-Type": "application/json"},
            onload:     function (response) {
                            alert ("true!");
                        },
            onerror:    function () {
                            alert ("Error calling the web service.");
                        }
        } );
    } );
} );

Although I don't recommend creating a bazillion different anonymous functions, inside an .each(), like that. (That's a subject for a different question.)

Greasemonkey to save specific data on the web page, to a database, has access errors?

1 Answers1