Solved

Dynamic Div Element Name and its usage

Posted on 2013-06-13
10
224 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
  • 4
  • 3
  • 2
10 Comments
 
LVL 54

Expert Comment

by:Julian Hansen
ID: 39244200
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 16

Author Comment

by:Gurpreet Singh Randhawa
ID: 39244232
i get it but i am using IE 7 and probably i cannot use data-id
0
 
LVL 22

Expert Comment

by:Kim Walker
ID: 39244508
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
Best Practices: Disaster Recovery Testing

Besides backup, any IT division should have a disaster recovery plan. You will find a few tips below relating to the development of such a plan and to what issues one should pay special attention in the course of backup planning.

 
LVL 54

Expert Comment

by:Julian Hansen
ID: 39244942
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
 
LVL 22

Assisted Solution

by:Kim Walker
Kim Walker earned 150 total points
ID: 39245002
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 16

Accepted Solution

by:
Gurpreet Singh Randhawa earned 0 total points
ID: 39246800
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 16

Author Comment

by:Gurpreet Singh Randhawa
ID: 39247403
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 22

Expert Comment

by:Kim Walker
ID: 39247404
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 22

Expert Comment

by:Kim Walker
ID: 39247415
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

ScreenConnect 6.0 Free Trial

Want empowering updates? You're in the right place! Discover new features in ScreenConnect 6.0, based on partner feedback, to keep you business operating smoothly and optimally (the way it should be). Explore all of the extras and enhancements for yourself!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

In my daily work (mainly using ASP.net), I need to write a lot of JavaScript code. One of the most repetitive tasks I do are the jQuery Ajax calls. You know: (CODE) I don't know if for you it's the same, but for me is soooo tedious to write the …
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-…
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…

810 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