Solved

Javascript array loop function not working

Posted on 2009-07-16
10
368 Views
Last Modified: 2013-11-19
I have some areas on my page with tinyMCE editors. I need to loop through the areas and return some values in an array.

I have to perform a few function inside of the loop as well such as removing unneeded content and replacing some invalid characters.

Here is what I have. It is currently not working.

Thank you for your help!
function removeElement(parentElm, childDiv){

	if (document.getElementById(childDiv)) {     

		var child = document.getElementById(childDiv);

		var parent = document.getElementById(parentElm);

		parent.removeChild(child);

	}

}
 

function getElementsByClass(node,searchClass,tag) {

var classElements = new Array();

var els = node.getElementsByTagName(tag); // use "*" for all elements

var elsLen = els.length;

var pattern = new RegExp("\\b"+searchClass+"\\b");

for (i = 0, j = 0; i < elsLen; i++) {

 if ( pattern.test(els[i].className) ) {

 classElements[j] = els[i];

 j++;

 }

}

return classElements;

}

//this script gets the contents of the edit areas

function areaGetContents(){

	var i;

	var contentAreas = getElementsByClass(document,'contentArea','*');

	var fullContent = new Array();

	for (i=1; i<=contentAreas.length; i++) {

		 document.getElementById('editorArea_'+i).innerHTML = tinyMCE.get('editorArea_'+i).getContent();

		 removeElement('contentArea_'+i,'editorArea_'+i+'_parent');

		 fullContent[i] = contentAreas[i].innerHTML;

		 var divModStart = fullContent[i].replace(/<textarea style="display: none;"/g, '<div');

	 	 var divModEnd = divModStart.replace(/textarea>/g, 'div>');

 		 var ltMod = divModEnd.replace(/\&lt;/g, '<');

		 var gtMod = ltMod.replace(/\&gt;/g, '>');

		 fullContent[i] = gtMod;

	     alert(fullContent[i]);

	}

}

Open in new window

0
Comment
Question by:the_hero
  • 5
  • 3
  • 2
10 Comments
 
LVL 82

Accepted Solution

by:
hielo earned 400 total points
Comment Utility
>>for (i=1; i<=contentAreas.length; i++)
You probably meant:

"less than" NOT "less than or equal to". Also, arrays are 0-indexed:
for (i=0; i<contentAreas.length; i++)
0
 
LVL 1

Author Comment

by:the_hero
Comment Utility
K, I made changes to do that, but it still doesn't work.

I am getting the following error on line 5 that has

parent.removeChild(child);


error from firebug:

Error: uncaught exception: [Exception... "Node was not found"  code: "8" nsresult: "0x80530008 (NS_ERROR_DOM_NOT_FOUND_ERR)"  location: "http://fabuso/js/sitecreator_edit_page_scripts.js Line: 82"]
0
 
LVL 82

Assisted Solution

by:hielo
hielo earned 400 total points
Comment Utility
>>"Node was not found"
There's the reason. Within your loop you are doing:
removeElement('contentArea_'+i,'editorArea_'+i+'_parent');
 

So, when i=0, you are actually calling:

removeElement('contentArea_0','editorArea_0_parent');
 

So, do you have some element with id="contentArea_0" and also WITHIN that element you need some other element with id="editorArea_0_parent".
 

The same rationale applies when i=1, etc. I can't tell you more since you didn't post much. If you have a link to your page, please post it.

Open in new window

0
 
LVL 1

Author Comment

by:the_hero
Comment Utility
Yeah, I have those elements with those IDs. Tomorrow I'll get in a make a test page, its on my local system.
0
 
LVL 12

Assisted Solution

by:Barry Jones
Barry Jones earned 100 total points
Comment Utility
Are you sure that the child is a child of the parent that you are passing in?

Why not let the removeElement() function determine the parent?
removeElement = function(ele){

	var ele_ret = ele;

	if (ele && (ele.parentNode)){ele.parentNode.removeChild(ele);}

	return ele_ret;

}

Open in new window

0
IT, Stop Being Called Into Every Meeting

Highfive is so simple that setting up every meeting room takes just minutes and every employee will be able to start or join a call from any room with ease. Never be called into a meeting just to get it started again. This is how video conferencing should work!

 
LVL 12

Expert Comment

by:Barry Jones
Comment Utility
Also, your removeElement() function expects the parent passed in first, and in your code it appears that you have reversed the order of the parameters:
removeElement('contentArea_'+i,'editorArea_'+i+'_parent');

Open in new window

0
 
LVL 1

Author Comment

by:the_hero
Comment Utility
Yeah, the naming convention would make it seem like so. tinyMCE produces a lot of markup when they convert your textareas into editors. Since I have multiple areas on one page it produces the topmost element for the new tinyMCE markup as editorArea_0_parent, editorArea_1_parent, editorArea_2_parent, etc. My elms that contain the tinyMCE editors all have a class of 'contentArea' and an id that is contentArea_0, contentArea_1, contentArea_2 respectively.
0
 
LVL 12

Expert Comment

by:Barry Jones
Comment Utility
Ah ok...
0
 
LVL 1

Author Comment

by:the_hero
Comment Utility
I resorted to using jQuery and that made everything simple and fixed whatever was going wrong. Thanks for you help!
0
 
LVL 1

Author Closing Comment

by:the_hero
Comment Utility
Thank you!
0

Featured Post

How your wiki can always stay up-to-date

Quip doubles as a “living” wiki and a project management tool that evolves with your organization. As you finish projects in Quip, the work remains, easily accessible to all team members, new and old.
- Increase transparency
- Onboard new hires faster
- Access from mobile/offline

Join & Write a Comment

Shoutout to Emily Plummer (http://www.experts-exchange.com/members/eplummer26.html) for giving me this article! She did most of it, I just finished it up and posted it for her :)    Introduction In a previous article (http://www.experts-exchang…
JavaScript has plenty of pieces of code people often just copy/paste from somewhere but never quite fully understand. Self-Executing functions are just one good example that I'll try to demystify here.
The viewer will learn how to create and use a small PHP class to apply a watermark to an image. This video shows the viewer the setup for the PHP watermark as well as important coding language. Continue to Part 2 to learn the core code used in creat…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)

728 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

10 Experts available now in Live!

Get 1:1 Help Now