Update SVG file using Ajax, by retrieving some information from a Java Servlet.

Question

I have written a Java Servlet that retrieves a SVG image. The content type for this servlet is CONTENT_TYPE = "image/svg+xml";

This certain servlet is being integrated in a bigger (ADF11g) application as an inlineframe. The code should look familiar, if you are accustomed with JSP:

    <af:inlineFrame source="servlet?Filename=TestSVG1&amp;width=1024&amp;height=1024"                            
                    inlineStyle="width
                    :#{session.graphSVGWidth}px; height:#{session.graphSVGHeight}px; border: none">
    </af:inlineFrame>

This SVG contains a dyanmic popup that allows the user to interact "with the picture", by sending information to the server via Ajax calls.

For example this a part of JavaScript that is being used by the SVG:

function loadXMLDocPOST(params) {
    var xmlhttp = getXmlHttp();
    xmlhttp.open("POST", 'servlet', true);

    xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
    xmlhttp.setRequestHeader("Content-length", params.length);
    xmlhttp.setRequestHeader("Connection", "close");
    xmlhttp.onreadystatechange = function () {
        if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
            /* Do something here */   
        }
        else {
            //alert('xmlhttp.status_r2=' + xmlhttp.status);
        }
    }
    xmlhttp.send(params);
}

function editAction(Filename, Name){
    loadXMLDocPOST(...)
}

The Ajax call is successful, but the problem is that after I trigger some actions from the SVG, I want to update the picture contained in the inline frame (the /* Do something here */)

So, how do I rerender the SVG, from inside the SVG :) ? The problem is that innerHTML is not working in SVG. document.write() is not working either. So do you have any suggestions ?

Answer 1

you can use parent.XXX to access the global variables and functions of the HTML document which includes that svg.

in this way, svg can interact with its contained html document.

for example:

parent.document.write() 

works in svg!