Question

I have created one user control to pick date from calendar. I used jquery plugin to create it. My problem is when i put user control on aspx page its not working properly. I mean to say if i put two times than only one control working second one gives me an error.. so what will be issue??

Code which i have written to register jquery from code behind file

 string jquery = string.Empty;
    jquery = "window.addEvent('domready', function () { new CalendarEightysix('exampleIII', { 'excludedWeekdays': [0, 6], 'toggler': 'imgClick', 'offsetY': -4 });});   ";


    Page.ClientScript.RegisterStartupScript(typeof(Page), "a key", "<script type=\"text/javascript\">" + jquery + "</script>");

User Control Code.

<script src="JS/mootools-1.2.4-core.js" type="text/javascript"></script>
<script src="JS/mootools-1.2.4.4-more.js" type="text/javascript"></script>
<script src="JS/calendar.js" type="text/javascript"></script>
<link href="CSS/calendar.css" rel="stylesheet" type="text/css" />

<table cellpadding="0">
  <tr>
    <th>
      <asp:Label ID="lblHeading" runat="server" Text="Date"></asp:Label>
    </th>
    <td>
      <input id="exampleIII" name="dateIII" readonly="readonly" type="text" maxlength="10"
        style="padding-right: 15px;" />
      <img src="Images/calendar.gif" alt="" id="imgClick" />
    </td>
  </tr>
</table>

Any idea about this than please help me.
Thanks in advance.

Answer 1

Your issue is for sure because your did not have place dynamic control id in your control, or dynamic javascript initialize. With out change the ID on the more than one usercontrol loading then you have conflict when you try to use javascript.

To make dynamic IDs you can use the ClientID attribute of the same control.

On code, the points that you need to make dynamic change are, first of all the input that you select to be simple html control, add at the end of your ID the Current UserControl ID as:

<input id="exampleIII<%=ClientID%>" name="dateIII<%=ClientID%>" readonly="readonly"

and on

<img src="Images/calendar.gif" alt="" id="imgClick<%=ClientID%>" />

Then you change your javascript as:

 string jquery = string.Empty;
    jquery = "window.addEvent('domready', function () { new CalendarEightysix('exampleIII"+ ClientID + "', { 'excludedWeekdays': [0, 6], 'toggler': 'imgClick"+ ClientID + "', 'offsetY': -4 });});   ";

    Page.ClientScript.RegisterStartupScript(typeof(Page), "akey"+ClientID, "<script type=\"text/javascript\">" + jquery + "</script>");

and load your common javascript library only ones, maybe on master page, or use the Page.ClientScript.RegisterStartupScript

ps: use the id="exampleIII<%=ClientID%>" to render your controls because the ClientID by him self alone is all ready used. So you get a name a final name with both ClientID and exampleIII.

An alternative is to make the buttons asp.net controls because using the <%= %> you have issues with UpdatePanels. If you make them asp.net controls then you get the ControlName.CliendID to use on the javascript init