Hi, I am getting the following error:
"Tried to register widget with id==db_2 but that is is already registered"
It happens when I get html from the server to replace one div on the page. I tell it to be parsed with dojo.parser.parse(fillId); but it throws that error. I've looked through the forums and found other people with the same problem: http://www.dojotoolkit.org/forum/dijit-dijit-0-9/dijit-support/already-r... and some more but none which worked for me (other's I didn't understand).
I will always get back html with id's that are already on the page, but they will replace that content. I also parse the page on load. Andy help would be super. Below is the javascript function with the problem and then the html. I'm new to dojo so am getting used to its quircks, but any help would be appreciated.
This function was written before I was using dojo so I wanted to add in the parsing. If there is a more dojo way do do the same thing let me know.
function renderReplace() {
var ready = req.readyState;
if(ready == READY_STATE_COMPLETE) {
var el = getElement(fillId);//same as document.getElementById
var tmp = document.createElement("div");
tmp.innerHTML = req.responseText;
var newNode = tmp.childNodes[0];
checkScript(tmp); //finds script tags and executes them
el.parentNode.replaceChild(newNode, el);
if(dojo)
{
dojo.parser.parse(fillId);
}
}
}
var ready = req.readyState;
if(ready == READY_STATE_COMPLETE) {
var el = getElement(fillId);//same as document.getElementById
var tmp = document.createElement("div");
tmp.innerHTML = req.responseText;
var newNode = tmp.childNodes[0];
checkScript(tmp); //finds script tags and executes them
el.parentNode.replaceChild(newNode, el);
if(dojo)
{
dojo.parser.parse(fillId);
}
}
}
Here is the page
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Your Databases:</title>
<script src='javascript/dom/dom.js' type='text/javascript'></script>
<script src='javascript/dojo/dojo/dojo.js' type='text/javascript'></script>
<script type="text/javascript">
dojo.require("dojo.parser");
dojo.require("dijit.form.Button");
dojo.require("dijit.Dialog");
dojo.require("dijit.form.TextBox");
dojo.require("dijit.form.Form");
dojo.require("dijit.Menu");
function checkPw(dialogFields) {
if (dialogFields.confirmpw != dialogFields.newpw)
alert("Confirmation password is different. Password is unchanged.");
}</script>
<script src='javascript/dom/dom.js' type='text/javascript'></script>
<script src='javascript/ajax/connect.js' type='text/javascript'></script>
<link href='style.php' rel='stylesheet' />
<link href='javascript/dojo/dojo/resources/dojo.css' rel='stylesheet' />
<link href='javascript/dojo/dijit/themes/tundra/tundra.css' rel='stylesheet' />
<script language="javascript">
function load()
{
if(dojo)
{
dojo.parser.parse(dojo.byId('page_body'));
}
}
</script>
</head>
<body id='page_body' class='tundra' onLoad='load();'>
<div id='log'>
</div>
<div class='header'><a href='?function=logout'>Logout<a/>
Database options will appear here once you have selected a database on which to work. </div>
<div id='db'><div class='title'>Databases</div> <div class='db' dojoType="dijit.form.ComboButton" onclick="document.location.href='?module=table&path=test2/'">
<span>test2</span>
<div dojoType="dijit.Menu" id="db_2" toggle="fade" style="display: none;">
<div dojoType="dijit.MenuItem"
onclick="document.location.href='?module=table&path=test2/'">View</div><div dojoType="dijit.MenuItem"
onclick="document.location.href=?function=edit&module=table&path=test2/'">Edit</div><div dojoType="dijit.MenuItem"
onclick="document.location.href=?function=delete&module=table&path=test2/'">Delete</div>
</div>
</div> <div class='db' dojoType="dijit.form.ComboButton" onclick="document.location.href='?module=table&path=Testing/'">
<span>Testing</span>
<div dojoType="dijit.Menu" id="db_8" toggle="fade" style="display: none;">
<div dojoType="dijit.MenuItem"
onclick="document.location.href='?module=table&path=Testing/'">View</div><div dojoType="dijit.MenuItem"
onclick="document.location.href=?function=edit&module=table&path=Testing/'">Edit</div><div dojoType="dijit.MenuItem"
onclick="document.location.href=?function=delete&module=table&path=Testing/'">Delete</div>
</div>
</div> <div class='db' dojoType="dijit.form.ComboButton" onclick="document.location.href='?module=table&path=bla/'">
<span>bla</span>
<div dojoType="dijit.Menu" id="db_41" toggle="fade" style="display: none;">
<div dojoType="dijit.MenuItem"
onclick="document.location.href='?module=table&path=bla/'">View</div><div dojoType="dijit.MenuItem"
onclick="document.location.href=?function=edit&module=table&path=bla/'">Edit</div><div dojoType="dijit.MenuItem"
onclick="document.location.href=?function=delete&module=table&path=bla/'">Delete</div>
</div>
</div> <div class='db' dojoType="dijit.form.ComboButton" onclick="document.location.href='?module=table&path=sad/'">
<span>sad</span>
<div dojoType="dijit.Menu" id="db_42" toggle="fade" style="display: none;">
<div dojoType="dijit.MenuItem"
onclick="document.location.href='?module=table&path=sad/'">View</div><div dojoType="dijit.MenuItem"
onclick="document.location.href=?function=edit&module=table&path=sad/'">Edit</div><div dojoType="dijit.MenuItem"
onclick="document.location.href=?function=delete&module=table&path=sad/'">Delete</div>
</div>
</div><div class='title'>Options</div> <div dojoType="dijit.form.DropDownButton">
<span>Create DB</span>
<div dojoType="dijit.TooltipDialog" id="create_db" execute="submitForm('create_db','?function=create&module=db&path=-1/','db',renderReplace);">
<div id='' class="long-field"><div class="text-title">Name</div><div class="text-field"><input id='' type="text" class="" dojoType=dijit.form.TextBox maxlength="255" name="db" value="" /></div></div><div class="padded-clear"></div><button dojoType=dijit.form.Button type='Submit'>Go</button></form>
</div>
</div> </div> <div class='body'>
<div class='nav'>
<a href='?function=list_tables&module=lists&unique=list_tables_table'>List Tables</a> <a href='?function=edit&module=form&unique=add_table&path=-1/-1'>Create Table</a> </div>
<div class='content'>
<span class='page_title'>Select a database to work on: </span>
<div id="db__2" class="row_0"><a href="?module=table&path=test2/">test2</a></div>
<div id="db__8" class="row_0"><a href="?module=table&path=Testing/">Testing</a></div>
<div id="db__41" class="row_1"><a href="?module=table&path=bla/">bla</a></div>
<div id="db__42" class="row_0"><a href="?module=table&path=sad/">sad</a></div>
</div>
</div>
</body>
<html>
<head>
<title>Your Databases:</title>
<script src='javascript/dom/dom.js' type='text/javascript'></script>
<script src='javascript/dojo/dojo/dojo.js' type='text/javascript'></script>
<script type="text/javascript">
dojo.require("dojo.parser");
dojo.require("dijit.form.Button");
dojo.require("dijit.Dialog");
dojo.require("dijit.form.TextBox");
dojo.require("dijit.form.Form");
dojo.require("dijit.Menu");
function checkPw(dialogFields) {
if (dialogFields.confirmpw != dialogFields.newpw)
alert("Confirmation password is different. Password is unchanged.");
}</script>
<script src='javascript/dom/dom.js' type='text/javascript'></script>
<script src='javascript/ajax/connect.js' type='text/javascript'></script>
<link href='style.php' rel='stylesheet' />
<link href='javascript/dojo/dojo/resources/dojo.css' rel='stylesheet' />
<link href='javascript/dojo/dijit/themes/tundra/tundra.css' rel='stylesheet' />
<script language="javascript">
function load()
{
if(dojo)
{
dojo.parser.parse(dojo.byId('page_body'));
}
}
</script>
</head>
<body id='page_body' class='tundra' onLoad='load();'>
<div id='log'>
</div>
<div class='header'><a href='?function=logout'>Logout<a/>
Database options will appear here once you have selected a database on which to work. </div>
<div id='db'><div class='title'>Databases</div> <div class='db' dojoType="dijit.form.ComboButton" onclick="document.location.href='?module=table&path=test2/'">
<span>test2</span>
<div dojoType="dijit.Menu" id="db_2" toggle="fade" style="display: none;">
<div dojoType="dijit.MenuItem"
onclick="document.location.href='?module=table&path=test2/'">View</div><div dojoType="dijit.MenuItem"
onclick="document.location.href=?function=edit&module=table&path=test2/'">Edit</div><div dojoType="dijit.MenuItem"
onclick="document.location.href=?function=delete&module=table&path=test2/'">Delete</div>
</div>
</div> <div class='db' dojoType="dijit.form.ComboButton" onclick="document.location.href='?module=table&path=Testing/'">
<span>Testing</span>
<div dojoType="dijit.Menu" id="db_8" toggle="fade" style="display: none;">
<div dojoType="dijit.MenuItem"
onclick="document.location.href='?module=table&path=Testing/'">View</div><div dojoType="dijit.MenuItem"
onclick="document.location.href=?function=edit&module=table&path=Testing/'">Edit</div><div dojoType="dijit.MenuItem"
onclick="document.location.href=?function=delete&module=table&path=Testing/'">Delete</div>
</div>
</div> <div class='db' dojoType="dijit.form.ComboButton" onclick="document.location.href='?module=table&path=bla/'">
<span>bla</span>
<div dojoType="dijit.Menu" id="db_41" toggle="fade" style="display: none;">
<div dojoType="dijit.MenuItem"
onclick="document.location.href='?module=table&path=bla/'">View</div><div dojoType="dijit.MenuItem"
onclick="document.location.href=?function=edit&module=table&path=bla/'">Edit</div><div dojoType="dijit.MenuItem"
onclick="document.location.href=?function=delete&module=table&path=bla/'">Delete</div>
</div>
</div> <div class='db' dojoType="dijit.form.ComboButton" onclick="document.location.href='?module=table&path=sad/'">
<span>sad</span>
<div dojoType="dijit.Menu" id="db_42" toggle="fade" style="display: none;">
<div dojoType="dijit.MenuItem"
onclick="document.location.href='?module=table&path=sad/'">View</div><div dojoType="dijit.MenuItem"
onclick="document.location.href=?function=edit&module=table&path=sad/'">Edit</div><div dojoType="dijit.MenuItem"
onclick="document.location.href=?function=delete&module=table&path=sad/'">Delete</div>
</div>
</div><div class='title'>Options</div> <div dojoType="dijit.form.DropDownButton">
<span>Create DB</span>
<div dojoType="dijit.TooltipDialog" id="create_db" execute="submitForm('create_db','?function=create&module=db&path=-1/','db',renderReplace);">
<div id='' class="long-field"><div class="text-title">Name</div><div class="text-field"><input id='' type="text" class="" dojoType=dijit.form.TextBox maxlength="255" name="db" value="" /></div></div><div class="padded-clear"></div><button dojoType=dijit.form.Button type='Submit'>Go</button></form>
</div>
</div> </div> <div class='body'>
<div class='nav'>
<a href='?function=list_tables&module=lists&unique=list_tables_table'>List Tables</a> <a href='?function=edit&module=form&unique=add_table&path=-1/-1'>Create Table</a> </div>
<div class='content'>
<span class='page_title'>Select a database to work on: </span>
<div id="db__2" class="row_0"><a href="?module=table&path=test2/">test2</a></div>
<div id="db__8" class="row_0"><a href="?module=table&path=Testing/">Testing</a></div>
<div id="db__41" class="row_1"><a href="?module=table&path=bla/">bla</a></div>
<div id="db__42" class="row_0"><a href="?module=table&path=sad/">sad</a></div>
</div>
</div>
</body>
please dont bump...
As for your problem.... dojox.layout.ContentPane with executeScripts=true
It will destroy all widgets and domNodes inside it before it replaces them with new content, so you wont run into widgetId collisions... your problem is your basic replace function isnt cleaning up after itself (other than the HTML) when it comes to widgets and anything other than pure html.
just call cPane.setHref('yourPage.html'); and it will update it will destroy its contents, and load the new content, and if you are always reloading the same page... cPane.refresh();
-Karl