Login/Register
jQuery SVG-object tag load event
Asked Answered
jqueryonload-eventobject-tag
H

1

9

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')
        })
    })
);
Hansom answered 26/8, 2012 at 19:24 Comment(0)
V
-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.

  1. jQuery SVG plugin http://keith-wood.name/svg.html

  2. a jQuery ajax() call detailed here including information about interacting with the svg canvas after load.

Vicereine answered 26/8, 2012 at 19:33 Comment(8)
As it seems to me he is trying to use load not as an ajax function but simply as a DOMload event handler. There is a pretty much questions on SO related to DOM load and object element – Koine
Hm, i want to the load-event but the ajax call api.jquery.com/load-event – Hansom
The question stackoverflow.com/questions/5926424 is about the same problem but does not provide a solution. – Hansom
No, when using embed the load event does not fire, too. – Hansom
@Hansom see update 2 above - basically the embed tag doesn't support the javascript onload event so there is nothing for jQuery to hook into. – Vicereine
@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 – Koine
Yeah, reading through the comments section on the load event handler it seems to be rife with problems and cross browser incompatibilities. – Vicereine
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... – Hansom

© 2022 - 2024 — McMap. All rights reserved.