Question

I’m using the Mootools History plugin to update the content of a page without requiring the page to be reloaded.

Everything works fine except for Mootools generating a 404 error (visible in the console) when an image is in the content being injected.

The content is gathered and set via a Request.HTML call as follows (simplified demo):

var request = new Request.JSON({
    onSuccess: function(responseJSON, responseText) {
        html = JSON.decode(responseJSON);
        $('zone').set('html', html['text']);
    }
});

The content is being set correctly however the .set('html', content) seems to generate a 404 error by rewriting the src attributes of images.

The urls look like this:

http://example.com/%22//files//images//ImageName.jpg/%22

Whilst the page source shows them as:

/files/images/ImageName.jpg

The 404 error refers to line 334 in the Mootools Core, though I can’t see quite where that would cause the issue.

Answer 1

The solution is to use Request.JSON rather than Request.HTML and to access the JSON object directly rather than decoding it first.

i.e.

var request = new Request.JSON({
    onSuccess: function(responseJSON, responseText) {
        $('zone').set('html', responseJSON.text);
    }
});

As suggested in part by @DimitarChristoff