asked on

ASP.NET: Problem with multiple user controls on same page

Hi,
I built a user control to validate and compare two values and I use it on my page. When I only have one instance of the user control, the control works fine. But When I put many of them on the same page, if I type a value in the first instance, it is reflected invisibly on the last one. This make that I can't make do my comparison(done with Javascript) any more. Does some one know why?

<%@ Control Language="C#" AutoEventWireup="true" CodeFile="TextBoxcompareDate.ascx.cs" Inherits="TextBoxcompareDate" %>
<%@ Register TagPrefix="Date" Namespace="userControls" Assembly="TextBoxDate" %>
 
<head >
    <title>Untitled Page</title>
    <script language="javascript" type="text/javascript">
 
function validateDates(source, arguements)
{
    var thevalue = arguements.Value;
    
    arguements.IsValid=false;    
    
    if(!validateDate(thevalue))
    {
        alert(source.errormessage);
        return;
    }
    arguements.IsValid=true;  
            
}
function compareStartEnd()
{ 
var stringFromDate = document.getElementById('<%=txtStart.ClientID%>').value;
var stringToDate = document.getElementById('<%=txtEnd.ClientID%>').value;
 
var FromDate = Date.parse(stringFromDate);
                var ToDate = Date.parse(stringToDate);
                if (FromDate > ToDate)
                    alert('The end date must be greather than the start date');
}
 
    </script>
</head>
<table width="100%">
    <tr>
        <td align="right" width="75%">
            <asp:Label ID="lblCaption" runat="server" Text="Title: " Font-Names="Verdana" Font-Size="10px" ForeColor="#000000"></asp:Label>
        </td>
        <td align="left" width="10%">
            <asp:TextBox 
                ID="txtStart" 
                runat="server" 
                MaxLength="10" 
                Width="80px"             
                style="padding: 2px;border:solid 1px #92C86A;background-color: #ffffff;font-family:Verdana;font-size: 11px;color:#000000;"
                onfocus="this.select();"></asp:TextBox>
         </td>
         <td align="center" width="5%">
            <span style="font-family:Verdana;font-size: 10px;font-weight:bold;color:#000000;">-</span>	        
         </td>
         <td align="left" width="10%">
            <asp:TextBox 
                ID="txtEnd" 
                runat="server" 
                MaxLength="10" 
                Width="80px" 
                style="padding: 2px;border:solid 1px #92C86A;background-color: #ffffff;font-family:Verdana;font-size: 11px;color:#000000;" 
                onfocus="this.select();" 
                onchange="compareStartEnd();" ></asp:TextBox>
        </td>            
    </tr>            
</table>
<asp:CustomValidator 
    ID="cuvStart" 
    runat="server" 
    ControlToValidate="txtStart" 
    ClientValidationFunction="validateDates" 
    ErrorMessage="Incorrect starting date." 
    SetFocusOnError="true"
    Display="None">&nbsp</asp:CustomValidator>
<asp:CustomValidator 
    ID="cuvEnd" 
    runat="server" 
    ControlToValidate="txtEnd" 
    ClientValidationFunction="validateDates" 
    ErrorMessage="Incorrect ending date" 
    SetFocusOnError="true"
    Display="None">&nbsp</asp:CustomValidator>

Open in new window

crazyman

This is beacuse your functions are not unique.
you can name your function like

function validateDates_<%=this.ClientID%>(source, arguements)

then hook up your validators in OnLoad like

cuvEnd.ClientValidationFunction = string.format("validateDates_{0}",this.ClientID);

ASKER CERTIFIED SOLUTION

the_crazed

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

karakav

ASKER

Thanks a lot. Do you mind telling me how I can set back to focus to the control upon the error message?

the_crazed

yep, you've got a pointer to the original control there in "el" so you just add this at the end:

el.focus();

Open in new window