Solved

Dynamic Div Element Name and its usage

Posted on 2013-06-13
10
219 Views
Last Modified: 2013-06-14
I have the following code: the generated html below:

<tr>
  	<td><input type="checkbox" name="getFile" id="getFile" value="1" /></td>
    <td><div id="projectsList1" style="width:500px;height:60px;overflow-y:scroll;border:1px solid gray;"></div><input type="hidden" name="projectIDS1" id="projectIDS1" value="" /><input type="hidden" name="countProj1" id="countProj1" value="" /></td>
    <td><a href="javascript:void(0);" onclick="openWindow(1);">Files</a></td>
  </tr>
  
  <tr>
  	<td><input type="checkbox" name="getFile" id="getFile" value="2" /></td>
    <td><div id="projectsList2" style="width:500px;height:60px;overflow-y:scroll;border:1px solid gray;"></div><input type="hidden" name="projectIDS2" id="projectIDS2" value="" /><input type="hidden" name="countProj2" id="countProj2" value="" /></td>
    <td><a href="javascript:void(0);" onclick="openWindow(2);">Files</a></td>
  </tr>
  
  <tr>
  	<td><input type="checkbox" name="getFile" id="getFile" value="3" /></td>
    <td><div id="projectsList3" style="width:500px;height:60px;overflow-y:scroll;border:1px solid gray;"></div><input type="hidden" name="projectIDS3" id="projectIDS3" value="" /><input type="hidden" name="countProj3" id="countProj3" value="" /></td>
    <td><a href="javascript:void(0);" onclick="openWindow(3);">Files</a></td>
  </tr>
  
  <tr>
  	<td><input type="checkbox" name="getFile" id="getFile" value="4" /></td>
    <td><div id="projectsList4" style="width:500px;height:60px;overflow-y:scroll;border:1px solid gray;"></div><input type="hidden" name="projectIDS4" id="projectIDS4" value="" /><input type="hidden" name="countProj4" id="countProj4" value="" /></td>
    <td><a href="javascript:void(0);" onclick="openWindow(4);">Files</a></td>
  </tr>
  
  <tr>
  	<td><input type="checkbox" name="getFile" id="getFile" value="5" /></td>
    <td><div id="projectsList5" style="width:500px;height:60px;overflow-y:scroll;border:1px solid gray;"></div><input type="hidden" name="projectIDS5" id="projectIDS5" value="" /><input type="hidden" name="countProj5" id="countProj5" value="" /></td>
    <td><a href="javascript:void(0);" onclick="openWindow(5);">Files</a></td>
  </tr>

Open in new window


now as you see the name of the input and div id are from 1 to 5 and they can extend more:

I am using the following function to trying to get the dynamic ID of the div or input fields

function GetElementsStartingWith(tagName, subString) {
    var elements = document.getElementsByTagName(tagName);
    var result = [];
    for (var i = 0; i < elements.length; i++) {
        var element = elements[i];
        if (element.id && element.id.substr(0, subString.length) == subString) {
            result.push(element);
        }
    }
    return result;
}

Open in new window


and then doing this

Test = function(str,divID) 
{
	var arrID = new Array();
	arrID = str.split(',');                  
	arrID = eliminateDuplicates(arrID);                 
	var theDiv = GetElementsStartingWith("div", "projectsList");
//document.getElementById('projectsList'); 
	var cmp=GetElementsStartingWith("input", "projectIDS");
	var cmp = cmp.value;
//document.getElementById("projectIDS").value;			
	var cntPrj = GetElementsStartingWith("input", "countProj");
	alert(cntPrj.value);
}

Open in new window


but i am getting an error

TypeError: cntPrj.value is undefined
[Break On This Error]       

if(cntPrj.value.length == 0)
0
Comment
Question by:myselfrandhawa
  • 4
  • 3
  • 2
10 Comments
 
LVL 51

Expert Comment

by:Julian Hansen
Comment Utility
Why not use a custom user data attribute

<div id="projectsList5" data-id="5">

You can then access the id directly.

The data- for custom fields was introduced as part of HTML5 - makes it a lot easier to store date like id's you want to relate to your elements.
0
 
LVL 15

Author Comment

by:myselfrandhawa
Comment Utility
i get it but i am using IE 7 and probably i cannot use data-id
0
 
LVL 21

Expert Comment

by:Kim Walker
Comment Utility
It's because cntPrj is an array of input elements. The GetElementsStartingWith function returns an array of elements whose ids start with a particular string.

By the way, you have several checkbox elements with the same id. Although they need the same name to form a checkbox group, they must have independent id values. Perhaps you can append a sequence number to the ids but leave the names without.
0
 
LVL 51

Expert Comment

by:Julian Hansen
Comment Utility
i get it but i am using IE 7

I have to ask - why?????
I would have to ask why for IE8 as well - in fact why IE at all.

Anyway - you can retrieve custom attributes in IE7 - it is from a Validation perspective that HTML5 allows this and attempts to standardise it.

Use getAttribute

http://stackoverflow.com/questions/2412947/do-html5-custom-data-attributes-work-in-ie-6
0
Maximize Your Threat Intelligence Reporting

Reporting is one of the most important and least talked about aspects of a world-class threat intelligence program. Here’s how to do it right.

 
LVL 21

Assisted Solution

by:Kim Walker
Kim Walker earned 150 total points
Comment Utility
The array that is returned by the GetElementsStartingWith function does not have a "value" property. It does contain several input elements each of which does have a value property. You would need to loop through the elements in that array and alert the value property of each element, not the value property of the array. Try:
Test = function(str,divID) 
{
	var arrID = new Array();
	arrID = str.split(',');                  
	arrID = eliminateDuplicates(arrID);                 
	var theDiv = GetElementsStartingWith("div", "projectsList");
//document.getElementById('projectsList'); 
	var cmp=GetElementsStartingWith("input", "projectIDS");
	var cmp = cmp.value;
//document.getElementById("projectIDS").value;			
	var cntPrj = GetElementsStartingWith("input", "countProj");
	for (var i = 0; i < cntPrj.length; i++) {
		alert(cntPrj[i].value);
	}
}

Open in new window

0
 
LVL 15

Accepted Solution

by:
myselfrandhawa earned 0 total points
Comment Utility
see this: my Complete Function, how i can try fixing that here, i am lost here

Test= function(str) 
{
	var arrID = new Array();
	arrID = str.split(',');                  
	arrID = eliminateDuplicates(arrID);                 
	//var theDiv = document.getElementById('projectsList'); 
	//var cmp=document.getElementById("projectIDS").value;	
	var cntPrj = GetElementsStartingWith("input", "countProj");
	for (var i = 0; i < cntPrj.length; i++) {
		alert(cntPrj[i].value);
	}	
	return;	
	var cproj;
		if(document.getElementById("countProj").value.length == 0)
			cproj=0;
		else
		 cproj=parseInt(document.getElementById('countProj').value);
	 
	for (var j=0; j<arrID.length; j++)
	{  
		if (parseInt(cproj) + 1 > 50)
		{ 
			alert("You cannot add more than 50 Project id's ");
			return;
		}
		if( cmp!="" && cmp.indexOf(arrID[j])!=-1)
		continue;
        var newNode = document.createElement('div');  
        newNode.style.cssText = "background:#CCCCCC;border:1px solid #666666;width:100px;word-wrap:break-word;margin:3px;float:left;color:black;text-decoration:none!important;height:auto;vertical-align:middle;padding-top:2px;";    
        newNode.title = arrID[j]+" ";
        newNode.innerHTML = '<input type=hidden name=Proj_' + j + ' ' + 'value=' + arrID[j] + '>' + arrID[j] + ' <a href="#" title="Remove Project" onclick="removetext($(this).parent());"><b>X</b></a>';   
        theDiv.appendChild(newNode);
		if(document.getElementById("projectIDS").value.length == 0) 
			{
				document.getElementById("projectIDS").value=arrID[j]
			}
		else
			{
				document.getElementById("projectIDS").value = document.getElementById("projectIDS").value+","+arrID[j];
			}
			cproj = parseInt(cproj)+1;	
		document.getElementById("countProj").value =cproj; 
	}  
}

Open in new window

0
 
LVL 15

Author Comment

by:myselfrandhawa
Comment Utility
I've requested that this question be closed as follows:

Accepted answer: 0 points for myselfrandhawa's comment #a39246800
Assisted answer: 150 points for xmediaman's comment #a39245002

for the following reason:

Thanks for the guidance but i have solved it the other way

Cheers
0
 
LVL 21

Expert Comment

by:Kim Walker
Comment Utility
The original question
but i am getting an error

TypeError: cntPrj.value is undefined
was answered in that the variable cntPrg held an array which didn't have a value property. The author changed the question completely after the original question was answered.
0
 
LVL 21

Expert Comment

by:Kim Walker
Comment Utility
Now I'm confused. After I objected, a new comment appeared that said I was to have been given credit for an assist. I didn't see this before. I would like to withdraw my objection.
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

Article by: DanRollins
This article describes a JavaScript program that creates a maze made of hexagonal cells.  In Part 2 (http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/A_7850-Hex-Maze-Part-2.html), we'll extend the program by adding a depth-…
JavaScript can be used in a browser to change parts of a webpage dynamically. It begins with the following pattern: If condition W is true, do thing X to target Y after event Z. Below are some tips and tricks to help you get started with JavaScript …
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)
The viewer will learn the basics of jQuery including how to code hide show and toggles. 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…

763 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

12 Experts available now in Live!

Get 1:1 Help Now