how to make a custom control valid xhtml and dom spec

Question

User486402090 posted

So i have a custom control that when it is used on a page is a required control, but thats only if the user changes something on the form if the user just opened the page and then clicked close, the required control message comes up. so i added some JavaScript to test for this condition. but I'm using the following code and it throws an error

<code>
var blnGrdOpt = document.getElementById('_gradingPeriodOptions'').getAttribute("isrequired");

 </code>

 when the JavaScript runs it errors out, undefined. after doing some research on the subject I found that the DOM function getElementByID  only works for valid dom spec code.

so my question is does any one know where i can find some docs that describe how to make my control Dom compliant.

thx

 

Answer 1

User-16411453 posted
This is what I use. Works on all pages and content containers.

Dim imgWindowBar As Image
imgWindowBar = New Image
imgWindowBar.ImageUrl = cs.GetWebResourceUrl(rsType, "ice5software.BotCatcher.closeIcon_02.gif")
imgWindowBar.Attributes.Add("onclick", "botCatcherShowHideReportPanel('" & [ID] & "_panelBotCatcher','" & [ID] & "_panelBotCatcher_Report');")

tdReportWindowBar.Controls.Add(imgWindowBar)
 

'Now Build the Report Panel
panelReport = New Panel
panelReport.Attributes.Add("id", [ID] & "_panelBotCatcher_Report") 'this is what makes it Dom Compliant
panelReport.Visible = [Visible]
panelReport.Style.Add(HtmlTextWriterStyle.Width, [Width].ToString)
panelReport.Style.Add(HtmlTextWriterStyle.ZIndex, "1000")
panelReport.Style.Add(HtmlTextWriterStyle.Position, "absolute")
panelReport.Style.Add(HtmlTextWriterStyle.Visibility, "hidden")
Controls.Add(panelReport)  

 
function botCatcherShowHideReportPanel(parentId, panel) {

			var browserType;
			
			var parentDimensions;
			parentDimensions = botCatcherGetParentDimensions(parentId);
			var parentHeight = parentDimensions[0];
			var parentWidth = parentDimensions[1];
			
			var parentPosition;
			parentPostion = botCatcherFindParentPosition(parentId);	
			var childX = parentPostion[0] + parentWidth + 25;
			var childY = parentPostion[1];				
																			
			if (document.getElementById) { // DOM3 = IE5, NS6
				browserType = "DOM3-IE5-NS6-1";
				if (document.getElementById(panel).style.visibility == 'hidden' || document.getElementById(panel).style.visibility == '') {
					document.getElementById(panel).style.left = childX + "px";
					document.getElementById(panel).style.top = childY + "px";
					//document.getElementById(panel).style.height = 0;
					document.getElementById(panel).style.visibility = "visible";
					document.getElementById(panel).style.display = "block";
					
				} 
				else {
					document.getElementById(panel).style.visibility = "hidden";
					document.getElementById(panel).style.display = "none";
				}
			}
			else {
				if (document.layers) { // Netscape 4
					browserType = "DOM ProPreitray";
					document.id.display = 'block';
					document.layers[panel].left = childX + "px";
					document.layers[panel].top = childY + "px";
				}
				else { // IE 4
					browserType = "Else";
					document.all.panel.style.display = 'block';
					document.all.panel.style.left = childX + "px";
					document.all.panel.style.left = childY + "px";
				}
			}	
		//alert("x=" + childX + " y=" + childY + "BrowserType=" + browserType + "parentHeight=" + parentHeight);
				
		}
 

 

 

  

Answer 2

User486402090 posted

the control that I am using, generates a table, below is the HTML side of the control. the code behind is complex it uses multiple classes to do calculations for the students average and displays then. this control was handed to me and we don't have time to rebuild from the ground up. I need a way to make it either work with the standard MS asp.net Validation controls or make it DOM spec standard so i can get the ID and value using getElementByID.

<code>

<table class="Field" cellspacing="0" cellpadding="0">
    <tr>
        <td class="LabelCell"><sti:label id="m_lblTitle" runat="server" /></td>
    </tr>
    <tr>
        <td>
            <div id="m_DivList" class="Grid" style="BORDER-RIGHT: 1px solid; BORDER-TOP: 1px solid; OVERFLOW: auto; BORDER-LEFT: 1px solid; BORDER-BOTTOM: 1px solid" runat="server">
                <table id="m_tbList" cellspacing="0" cellpadding="0" runat="server" class="Body">
                </table>
            </div>
        </td>
    </tr>
</table>

</code> 

Answer 3

User-16411453 posted

Is that markup is generated by the control, or is that webform markup you put on the page yourself?.

Do you own the control, or is it someone elses?

The sample code is webform markup, and not pure xhtml because xhtml does not have the runat="server" attribute. The server will change the output of the tags with runat=server, and may automatically assign a asp.net ID tag, and change the ID of the control. That's why the Javascript bombs. If you look at the webpage source in your browser, you'll see that the ID's may of changed.

Answer 4

User486402090 posted

 I own the control, you are right the ID does change here is the code that gets generated

 

<code>

<table class="Field" cellspacing="0" cellpadding="0">
	<tr>
		<td class="LabelCell"><label id="_gradingPeriodOptions_m_lblTitle"><font color=blue>*</font>Minimum for Alpha Grade:</label></td>

	</tr>
	<tr>
		<td>
			<div id="_gradingPeriodOptions_m_DivList" class="Grid" style="BORDER-RIGHT:1px solid;BORDER-TOP:1px solid;OVERFLOW:auto;BORDER-LEFT:1px solid;BORDER-BOTTOM:1px solid;width:100%;height:160px;" Tabindex="5">
				<table id="_gradingPeriodOptions_m_tbList" cellspacing="0" cellpadding="0" class="Body" style="width:500px;">
				<tr>
					<th rowspan="2" style="width:150px;" align="Left">Graded Item</th>
					<th colspan="7" align="center">Minimum For Alpha Grade</th>

				</tr>
				<tr>
					<th style="width:50px;" align="Left">A</th>
					<th style="width:50px;" align="Left">B</th>
					<th style="width:50px;" align="Left">C</th>
					<th style="width:50px;" align="Left">D</th>
					<th style="width:50px;" align="Left">F</th>

					<th style="width:50px;" align="Left">I</th>
					<th style="width:50px;" align="Left">P</th>
				</tr>
				<tr>
					<td style="width:150px;"><Div><span>Term 4 Grade</span></Div></td>
					<td style="width:50px;"><input name="_gradingPeriodOptions:51_42" type="text" id="_gradingPeriodOptions_51_42" class="TextBox" Maxlength="2" TabIndex="6" /></td>
					<td style="width:50px;"><input name="_gradingPeriodOptions:51_41" type="text" id="_gradingPeriodOptions_51_41" class="TextBox" Maxlength="2" TabIndex="7" /></td>

					<td style="width:50px;"><input name="_gradingPeriodOptions:51_40" type="text" id="_gradingPeriodOptions_51_40" class="TextBox" Maxlength="2" TabIndex="8" /></td>
					<td style="width:50px;"><input name="_gradingPeriodOptions:51_39" type="text" id="_gradingPeriodOptions_51_39" class="TextBox" Maxlength="2" TabIndex="9" /></td>
					<td style="width:50px;"><input name="_gradingPeriodOptions:51_38" type="text" id="_gradingPeriodOptions_51_38" class="TextBox" Maxlength="2" TabIndex="10" /></td>
					<td style="width:50px;"><input name="_gradingPeriodOptions:51_54" type="text" id="_gradingPeriodOptions_51_54" class="TextBox" Maxlength="2" TabIndex="11" /></td>
					<td style="width:50px;"><input name="_gradingPeriodOptions:51_43" type="text" id="_gradingPeriodOptions_51_43" class="TextBox" Maxlength="2" TabIndex="12" /></td>
				</tr>
				<tr>
					<td style="width:150px;"><Div><span>Sem 2 Exam</span></Div></td>

					<td style="width:50px;"><input name="_gradingPeriodOptions:52_42" type="text" id="_gradingPeriodOptions_52_42" class="TextBox" Maxlength="2" TabIndex="13" /></td>
					<td style="width:50px;"><input name="_gradingPeriodOptions:52_41" type="text" id="_gradingPeriodOptions_52_41" class="TextBox" Maxlength="2" TabIndex="14" /></td>
					<td style="width:50px;"><input name="_gradingPeriodOptions:52_40" type="text" id="_gradingPeriodOptions_52_40" class="TextBox" Maxlength="2" TabIndex="15" /></td>
					<td style="width:50px;"><input name="_gradingPeriodOptions:52_39" type="text" id="_gradingPeriodOptions_52_39" class="TextBox" Maxlength="2" TabIndex="16" /></td>
					<td style="width:50px;"><input name="_gradingPeriodOptions:52_38" type="text" id="_gradingPeriodOptions_52_38" class="TextBox" Maxlength="2" TabIndex="17" /></td>
					<td style="width:50px;"><input name="_gradingPeriodOptions:52_54" type="text" id="_gradingPeriodOptions_52_54" class="TextBox" Maxlength="2" TabIndex="18" /></td>
					<td style="width:50px;"><input name="_gradingPeriodOptions:52_43" type="text" id="_gradingPeriodOptions_52_43" class="TextBox" Maxlength="2" TabIndex="19" /></td>
				</tr>
				<tr>

					<td style="width:150px;"><Div><span>Course Grade</span></Div></td>
					<td style="width:50px;"><input name="_gradingPeriodOptions:53_42" type="text" id="_gradingPeriodOptions_53_42" class="TextBox" Maxlength="2" TabIndex="20" /></td>
					<td style="width:50px;"><input name="_gradingPeriodOptions:53_41" type="text" id="_gradingPeriodOptions_53_41" class="TextBox" Maxlength="2" TabIndex="21" /></td>
					<td style="width:50px;"><input name="_gradingPeriodOptions:53_40" type="text" id="_gradingPeriodOptions_53_40" class="TextBox" Maxlength="2" TabIndex="22" /></td>
					<td style="width:50px;"><input name="_gradingPeriodOptions:53_39" type="text" id="_gradingPeriodOptions_53_39" class="TextBox" Maxlength="2" TabIndex="23" /></td>
					<td style="width:50px;"><input name="_gradingPeriodOptions:53_38" type="text" id="_gradingPeriodOptions_53_38" class="TextBox" Maxlength="2" TabIndex="24" /></td>
					<td style="width:50px;"><input name="_gradingPeriodOptions:53_54" type="text" id="_gradingPeriodOptions_53_54" class="TextBox" Maxlength="2" TabIndex="25" /></td>
					<td style="width:50px;"><input name="_gradingPeriodOptions:53_43" type="text" id="_gradingPeriodOptions_53_43" class="TextBox" Maxlength="2" TabIndex="26" /></td>

				</tr>
			</table>
			
			</div>
		</td>
	</tr>

</code>

</table>

 

Answer 5

User-16411453 posted

The Control author does the same thing that I do.  I append the Controls ID Name to the id of the element.  Change the ID of the control in designer, and duble check the web output again to see if the id changes again.  Then finish your project.

<label id="_gradingPeriodOptions_m_lblTitle">

Answer 6

User486402090 posted

dude, you rock

I wasn't sure the using the label ID was going to get the value I needed for the control, but sure enough it did. so heres a big thank you

problem solved

 

Answer 7

User-16411453 posted

Thanks, I'll take that as a compliment Dude.  The label ID was just an example.  Whatever object you need to call and work with, needs a ID attribute for getElementByID to work, and you need to feed that elements ID attribute value into the Javascript.

Don't forget to mark as anwser for others to follow.