Change Dojo contentpane attribute using JavaScript

Question

I have a Dojo (1.8) contentpane:

<div data-dojo-type="dijit/layout/ContentPane" data-dojo-props="splitter:false, region:'leading', href:'page2.php?name=variableName'" style="width: 100%; height: 100%;" id="embeddedPg"> <!-- Embedded content shown here --> </div>

I am trying to change the value of the href attribute of the data-dojo-props. I wrote a JavaScript function as follows:

function loadInfo(tableName){           
        var dojowidget = document.getElementById("embeddedPg");
        dojowidget.setAttribute("data-dojo-props","href:page2.php?name="+tableName);
    }

This function is called when the user clicks on a particular link on the page, and is getting called appropriately.
It does not give me any JavaScript error, but it does not work either. What would be the correct way to do this? I am using Dojo 1.8.

Answer 1

document.getElementById doesn't return dojo widget. It just returns DOM object.

To access dojo widget, you should use dijit/registry.byId. You can change href attribute via ContentPane's attr(name,value) and you should call refresh() to display it.

require(["dijit/layout/ContentPane", "dijit/registry",  "dojo/domReady!"]
  ,function(ContentPane, registry) {

    var refreshPage = function(tableName) {
        var cPane = registry.byId("embeddedPg");
        cPane.attr("href", "page2.php?name="+tableName);
        cPane.refresh();
    }
});