0

I have a form, portions of which are required to be dynamically cloned via javascript to allow users to enter additional details. Everything works fine, except if one of the textboxes being cloned has a CalendarExtender attached for date picking. The textbox is cloned, but the calendar extender is not, as it obviously does not exist as an element in the DOM and the events are not directly attached to the textbox being cloned.

So, what I am looking for is a way to determine, preferably by inspecting some attribute of the textbox itself, if there is a calendar extender attached. Or if there is some way to check the collection of extenders for the textbox id etc. Then I could add a new behavior to the cloned textbox.

Any advice for where to find this data would be appreciated. Thanks.


Update, examples

This is the asp.net ajax calendarExtender I am using, the page has live examples of it in use. (I believe you can also download the toolkit from the site.)

http://www.asp.net/AjaxLibrary/AjaxControlToolkitSampleSite/Calendar/Calendar.aspx

I will provide here a simplified version of the code I am using (cut out everything on the page except the controls in question.)


On the ASP.Net page I have a table containing a textbox with the calendar extender attached. As you can see here it is the property of the calendar extender that refers to the textbox, so the textbox has no special properties server side.

<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" Runat="Server">
  <table>
    <tr>
      <td>
        <asp:TextBox ID="txtDateFrom" runat="server" />
        <ajx:CalendarExtender ID="calFrom" runat="server" TargetControlID="txtDateFrom" Format="dd/MM/yyyy" />
      </td>
    </tr>
  </table>
</asp:Content>

The rendered client side HTML is as follows. As you can see there is nothing in the table to indicate the presence of the calendar extender, it only exists as a script generated as the very last thing in the page.

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
  <head>...</head>
  <body>
    <form method="post" action="Default.aspx" id="ctl101">
      <table>
        <tr>
          <td>
            <input name="ctl00$MainContent$txtDateFrom" type="text" id="txtDateFrom">
          </td>
        </tr>
      </table>
      ...
      <script type="text/javascript">
        //<![CDATA[
        Sys.Application.add_init(function() {
          $create(Sys.Extended.UI.CalendarBehavior, {"format":"dd/MM/yyyy","id":"calFrom"}, null, null, $get("txtDateFrom"));
        });
        //]]>
      </script>
    </form>
  </body>
</html>

The javascript used to clone the table row is as follows:

function addRow(tr) {
  var cl = tr.cloneNode(true);
  cl.style.display = "table-row";
  for (var i = 0; i < cl.cells.length; i++)
    if (cl.cells[i].firstChild) {
      cl.cells[i].firstChild.value = ""; // reset inputs
      if (cl.cells[i].firstChild.id.match(/date/i)) // check & add calendar extender
        $create(Sys.Extended.UI.CalendarBehavior, { "format": "dd/MM/yyyy", "id": "cal"+tr.rowIndex }, null, null, cl.cells[i].firstChild);
    }
  tr.parentNode.insertBefore(cl, tr.nextSibling);
}

1
  • I have a workaround at the moment, which involves manually setting a specific flag that the textbox is used for dates. I can then check this flag and add a new calendar behaviour to the cloned textbox. I feel like this is a less-than-elegant solution though so will leave the question open in the hopes that someone comes up with a cleaner way to do it.
    – Hearth
    Commented Feb 19, 2014 at 4:15

1 Answer 1

0

Perhaps you can attack the problem differently, let me explain.

$$ Panel 1 $$
First Name = Tom
Last Name = Miller
Menu Item = Pizza
Drink = Yes

$$ Panel 2 $$ (if Menu Item == Pizza Panel.Display = True)
Topping = Onion

$$ Panel 3 $$ (if Drink == Yes Panel.Display = True)
Drink = Soda

So essentially everything is already built and exposed in separate panels but you can flip the display of the sections of questions on and off depending on conditions.

Does that help?

8
  • Sorry, I don't think you read the question properly. I am cloning sections of the page, not just show/hiding existing elements. The cloning process itself is working fine, with the exception of the AjaxControlToolkit.CalendarExtender, which is not an actual element in the form but is represented by a behaviour attached to a specific textbox. I'm looking for a way to detect the existance of that behaviour by inspecting the textbox.
    – Hearth
    Commented Feb 19, 2014 at 4:12
  • So in summary you want to be able to know if a certain textbox is being used in extension of the calendar extender? What if you had a specific naming convention being used for the textbox ID? I keep re-reading your question and I want to say that I get what your asking but then I think there is more to it. Can you submit sample code, pictures something to give us a better idea to help you.
    – Jon H
    Commented Feb 19, 2014 at 20:46
  • You are right, I should have posted code samples from the outset - I was working from an assumption that people would be familiar with how the extender control works. As you should now be able to see, the workaround I have is as you just suggested, checking for "date" in the textbox name. Hopefully the situation is clearer now anyway.
    – Hearth
    Commented Feb 19, 2014 at 23:29
  • Yeah I can see what is going on. What about using the name attribute, I know you can use this directly from Javascript. w3schools.com/Tags/att_input_name.asp
    – Jon H
    Commented Feb 20, 2014 at 2:12
  • Name and Id are both set but the .net compiler, I can set the ID server-side, but the name is generated based on element hierarchy.
    – Hearth
    Commented Feb 20, 2014 at 2:14

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.