dojo/dijit ContentPane setting content

Question

I am trying append some XML retrieved via a dojo.XHRGet to a dijit.layout.ContentPane. Everything works ok in Firefox (3.6) but in Chrome, I only get back 'undefined' in the particular ContentPane.

My code looks something like this:

var cp = dijit.byId("mapDetailsPane");
cp.destroyDescendants(); // there are some existing Widgets/content I want to clear
                         // and replace with the new content

var xhrData = {
  url : "getsomexml.php",
  handleAs: "xml",
  preventCache: true,
  failOk: true
};

var deferred = new dojo.xhrGet(xhrData);
deferred.addCallback(function(data) {
  console.log(data.firstChild); // get a DOM object in both Firebug 
                                // and Chrome Dev Tools
  cp.attr("content",data.firstChild); // get the XML appended to the doc in Firefox,
                                      // but "undefined" in Chrome
});

Because in both browsers I get back a valid Document object I know XHRGet is working fine, but there seems to be some sort of difference in how the content is being set. Is there a better way to handle the return data from the request?

There was a request to see my XML, so here is part of it...

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg xmlns:svg="http://www.w3.org/2000/svg" 
 xmlns="http://www.w3.org/2000/svg" 
 xmlns:xlink="http://www.w3.org/1999/xlink" 
 version="1.1" width="672" height="1674">
 <defs>
   <style type="text/css">
     <![CDATA[ ...bunch of CSS...
     ]]>
   </style>
   <marker refX="0" refY="0" orient="auto" id="A00End" style="overflow: visible;">
   ...bunch more defs...
 </defs>
 <g id="endpoints">
   ...bunch of SVG with a some...
   <a xlink:href="javascript:gotoLogLine(16423,55);" xlink:type="simple">...more svg...</a>
 </g>
</svg>

I have run the output XML trough the WC3 validator for XML to verify it is valid. Like I said before, works in FireFox 3.6. I tried it on Safari and I got the same "undefined" so it seems to be related to Webkit.

Answer 1

Does cp.containerNode.appendChild( data.firstChild ) work? Treating ContentPane as a generic container that can accept arbitrary XML nodes may be asking too much of it. It's primary use case is -and always has been - injecting HTML. Not saying it can't work, but its a corner case that isn't well explored in this widget.

Answer 2

I'm not sure that my recently encounter is whether same as you. I'm using external javascript file loaded in html-head section as a cheking user script. This is my code that generate error in IE, but this is not generate error in Firefox.

function loginCheck()
{
var username = dojo.byId("usernameBox").value;
var password = dojo.byId("passwordBox").value;
var loginForm = dijit.byId("loginDialog");
var mainPage = dijit.byId("entirePage");
var menuUrl = "";

if(username != 'admin' && username != 'user'){
    alert('Incorrect username');
} else {
    if(password != '1234') {
        alert('Incorrect password');
    } else {
        loginForm.hide();
        dojo.style(mainPage.domNode, {visibility:"visible"});
        dojo.doc.title = dojo.doc.title + " : Signed in as [" + username + "]";

        if(username == 'user'){
            menuUrl = "../data/userMenu.json";
        } else if(username == 'admin') {
            menuUrl = "../data/adminMenu.json";
        }

        var treeStore = new dojo.data.ItemFileReadStore({
            url : menuUrl
        });

        var treeModel = new dijit.tree.ForestStoreModel({
            store : treeStore,
            query : {
                "type" : "category"
            },
            childrenAttrs : ["children"]

        });

        var naviTree = new dijit.Tree({
            model : treeModel,
            showRoot : false,
            autoExpand : true
        }, "naviPane");

        dojo.connect(naviTree, "onClick", function(item){
                var targetPage = item.link;

                var targetPane = dijit.byId("centerPane");
                console.log(targetPage);
                **targetPane.attr('href',targetPage);**
                console.log("redirect success.");
        });
    }
}

At the ** line. IE return this error.

Webpage error details

User Agent: Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 6.1; Trident/4.0; SLCC2; .NET > CLR 2.0.50727; .NET CLR 3.5.30729; .NET CLR 3.0.30729; Media Center PC 6.0; InfoPath.2; > Tablet PC 2.0; .NET4.0C; .NET4.0E; AskTB5.6) Timestamp: Tue, 19 Oct 2010 08:24:35 UTC

Message: Object doesn't support this property or method Line: 49 Char: 21 Code: 0 URI: http://localhost:8080/TestESarabun/script/loginCheck.js

After I am tracing into dojo library and stop at file dojo/_base/xhr.js with this piece of code.

dojo._ioAddQueryToUrl = function(/*dojo.__IoCallbackArgs*/ioArgs){ //summary: Adds query params discovered by the io deferred construction to the URL. //Only use this for operations which are fundamentally GET-type operations. if(ioArgs.query.length){ ioArgs.url += (ioArgs.url.indexOf("?") == -1 ? "?" : "&") + ioArgs.query; ioArgs.query = null; }
}

My rough solution is just comment "indexOf" line out and then, my web application run without any error. Anyway, I am not sure what is this line going to do ?