"parentObj is not defined" error when removing created elements

[newholborn]

Hi everyone. I have some questions, which should be rather easy to reply, but as I am working on PHP, JavaScript, XML, CSS, Photoshop and other stuff at the same time, my head, which is about to explode, would be grateful for any answers :).

1) I have created a simple navigation system which loads local html documents on a main big DIV element in my page. Although greek language (iso-8859-7) is working outside that DIV, inside it i see question marks. My HTML files only contain <div>..More elements..</div>. I have tried calling complete HTML documents (with html, head, body etc elements) but no luck. Is that approach wrong? Any ideas why this happens?

2) I use JavaScript to dynamically generate gadgets on the sidebar of my page with the document.createElement() and SomeElement.appendChild() methods. Whatever element wasn't originally on the page though (the divs I create), gives a "parentObj is not defined" error when i remove it, but the result is ok. It seems like the document element content needs to be copied to the browser memory and be refreshed...

function addSidebarElement() {
  var ni = document.getElementById('gadgets');
  var numi = document.getElementById('theValue');
  var num = (document.getElementById('theValue').value -1)+ 2;
  numi.value = num;
  var newdiv = document.createElement('div');
  var divIdName = 'newgadget'+num;
  newdiv.setAttribute('id',divIdName);
  newdiv.setAttribute('style','display: none;');
  newdiv.innerHTML="<h2 onclick=\"Effect.toggle('"+divIdName+"Content','blind')\">"+divIdName+"</h2><ul id=\""+divIdName+"Content\"><li><a href=\"#\">Fusce dui neque fringilla</a></li></ul><span onclick=\"removeElement(this);\">Remove Gadget</span>";
  ni.appendChild(newdiv);
 
  Effect.SlideDown(divIdName);
}
 
function removeElement(divObj) {
var parentObj = document.getElementById('gadgets');
var childObj=divObj.parentNode;
var divId=childObj.getAttribute('id');
Effect.SlideUp(divId);
 
setTimeout("parentObj.removeChild(childObj)",2000);
}

Any explanations? I am worried that this problem is gonna make it worse after I add more stuff dynamically...

[acoder]

Changed the thread title to something more meaningful.

Does this error occur on the setTimeout?

[newholborn]

Probably not because it was the same before I added that line. I think it's line 17. It seems that the second function can't call any element by it's id. :/

And I can't change the topic title. (???)

[dmjpro]

Look at your modified Code.
I did it.

var parentObj = null; //Defined here.
function addSidebarElement() {
  var ni = document.getElementById('gadgets');
  var numi = document.getElementById('theValue');
  var num = (document.getElementById('theValue').value -1)+ 2;
  numi.value = num;
  var newdiv = document.createElement('div');
  var divIdName = 'newgadget'+num;
  newdiv.setAttribute('id',divIdName);
  newdiv.setAttribute('style','display: none;');
  newdiv.innerHTML="<h2 onclick=\"Effect.toggle('"+divIdName+"Content','blind')\">"+divIdName+"</h2><ul id=\""+divIdName+"Content\"><li><a href=\"#\">Fusce dui neque fringilla</a></li></ul><span onclick=\"removeElement(this);\">Remove Gadget</span>";
  ni.appendChild(newdiv);
 
  Effect.SlideDown(divIdName);
}
 
function removeElement(divObj) {
parentObj = document.getElementById('gadgets'); //Redefined here.
var childObj=divObj.parentNode;
var divId=childObj.getAttribute('id');
Effect.SlideUp(divId);
 
setTimeout("parentObj.removeChild(childObj)",2000);
}

Now test this, I think it will work.
Good Luck.


Kind regards,
Dmjpro.

[newholborn]

Thanks Dmjpro. Unfortunately, with this modification, the error remains, while the added element is not removed. :(

[newholborn]

Found it. I removed the scriptaculous effect and now no error, but unfortunately no effect.

The new code:

function removeElement(divObj) {
var parentObj = document.getElementById('gadgets');
var childObj=divObj.parentNode;
var divId=childObj.getAttribute('id');
//Effect.SlideUp(divId);
parentObj.removeChild(childObj);
//setTimeout("parentObj.removeChild(childObj)",2000);
}

I'll keep you posted on the progress...

By the way, whats the difference of creating a scriptaculous effect with

new Effect.EffectName('divid');

and

Effect.EffectName('divid');

???

[dmjpro]

You can do one more thing with my Code.
As parentObj defined outside you can define childObj as well.

var parentObj = null; //Defined here.
var childObj = null; //Defined here.
function addSidebarElement() {
  var ni = document.getElementById('gadgets');
  var numi = document.getElementById('theValue');
  var num = (document.getElementById('theValue').value -1)+ 2;
  numi.value = num;
  var newdiv = document.createElement('div');
  var divIdName = 'newgadget'+num;
  newdiv.setAttribute('id',divIdName);
  newdiv.setAttribute('style','display: none;');
  newdiv.innerHTML="<h2 onclick=\"Effect.toggle('"+divIdName+"Content','blind')\">"+divIdName+"</h2><ul id=\""+divIdName+"Content\"><li><a href=\"#\">Fusce dui neque fringilla</a></li></ul><span onclick=\"removeElement(this);\">Remove Gadget</span>";
  ni.appendChild(newdiv);
 
  Effect.SlideDown(divIdName);
}
 
function removeElement(divObj) {
parentObj = document.getElementById('gadgets'); //Redefined here.
childObj=divObj.parentNode;
var divId=childObj.getAttribute('id');
Effect.SlideUp(divId);
 
setTimeout("parentObj.removeChild(childObj)",2000);
}

Good Luck.

Kind regards,
Dmjpro.