jQuery SVG-object tag load event

Question

I have a page which dynamically adds SVGs to the page via jQuery:

grid.append($('<object>')
.load(function () {
    // do stuff
    alert('loaded')
})
.attr({
    id: 'tile',
    type: 'image/svg+xml',
    width: Math.round(tile_w),
    height: Math.round(tile_h),
    data: 'map/base.svg'
})
);

I need access to the SVG document (to "push" a variable into the svg script context) but the SVG has to be loaded for that. My problem is that I dont get the load event working. No alert is displayed.

How to do?

Edit: It seems like jQuery simply prevents to bind a "load" event to a non-image-or-document element, so I just use the "official" addEventListener() function (not supported by stupid IE, but this is no problem for me):

grid.append($('<embed>')
    .attr({
        id: 'tile' + i,
        type: 'image/svg+xml',
        width: Math.round(tile_w),
        height: Math.round(tile_h),
        src: 'map/base.svg'
     })
    .css({
        position: 'absolute',
        left: Math.round(p.x),
        top: Math.round(p.y)
    }).each(function (i){
        this.addEventListener ('load', function (e) {
            alert('loaded')
        })
    })
);

score -1 · Answer 1 · edited May 23 '17 at 11:48

-1

I don't know what grid is in your example but if it is a normal dom element then the load api call should be of the format defined in the api docs. Currently it looks like you are trying to load a function call which doesn't make any sense.

.load( url [, data] [, complete(responseText, textStatus, XMLHttpRequest)] )

so

grid.append($('<object>').load('image.svg',
    function (response, status, xhr) {
        if (status == 'success') {
            // yay the load is ok
            alert('loaded');
        }
    })
);

http://api.jquery.com/load/

UPDATE: I haven't tried lodaing SVG data into the browser with HTML but the W3C docs don't mention that the <object> tag could be used for that. Their example uses <embed>

<embed src="circle1.svg" type="image/svg+xml" />

have you tried using that instead of <object>?

UPDATE 2:

I don't think the above solution will work either, since the JS onload event is supported by the following tags <body>, <frame>, <frameset>, iframe, <img>, <input type="image">, <link>, <script>, <style> - I assume this is what jQuery is hooking into, thus it'll only work for those elements. The jQuery docs say that the event handler is supported by images, scripts, frames, iframes and the window object.

So indeed if that doesn't work, then I suppose you'll just need to use the .load() method call and handle the results. Maybe you can put the svg embed tags into separate html files, or have a script that generates the html embeds.

http://www.w3schools.com/jsref/event_onload.asp

UPDATE 3:

There would appear to be at least two correct solutions to this problem.

jQuery SVG plugin http://keith-wood.name/svg.html
a jQuery ajax() call detailed here including information about interacting with the svg canvas after load.

edited May 23 '17 at 11:48

Community

1
1

answered Aug 26 '12 at 19:33

Matti Lyra

12,828
8
49
67

As it seems to me he is trying to use `load` not as an `ajax` function but simply as a DOM`load` event handler. There is a pretty much questions on SO related to DOM load and object element – d.k Aug 26 '12 at 19:42
Hm, i want to the load-event but the ajax call http://api.jquery.com/load-event/ – Euro Aug 26 '12 at 19:43
The question http://stackoverflow.com/questions/5926424 is about the same problem but does not provide a solution. – Euro Aug 26 '12 at 19:50
No, when using embed the load event does not fire, too. – Euro Aug 26 '12 at 19:56
@Euro see update 2 above - basically the embed tag doesn't support the javascript `onload` event so there is nothing for jQuery to hook into. – Matti Lyra Aug 26 '12 at 19:57
@Euro, may be it is better to do it via ajax? Load the `svg` and append it to the page? This will work without such bugs – d.k Aug 26 '12 at 19:58
Yeah, reading through the comments section on the `load` event handler it seems to be rife with problems and cross browser incompatibilities. – Matti Lyra Aug 26 '12 at 20:00
The problem with the ajax call is that it destroys the relative paths in the svg code (like for external css files). If i use addEventListener instead of jQuery the event is fired... – Euro Aug 26 '12 at 20:19

jQuery SVG-object tag load event

1 Answers1

Linked