Question

我有一个表单，其中一部分需要通过javascript动态克隆，以允许用户输入其他详细信息。一切正常，除非克隆的其中一个文本框附加了日期选择的CalendarExtender。文本框是克隆的，但日历扩展程序不是，因为它显然不是作为DOM中的元素存在，并且事件不直接附加到正在克隆的文本框。

所以，我正在寻找的是一种方法来确定，如果附加了日历扩展器，最好通过检查文本框本身的某些属性来确定。或者，如果有某种方法可以检查文本框ID等扩展程序的集合。那么我可以在克隆的文本框中添加新行为。

任何有关在哪里找到这些数据的建议都将受到赞赏。感谢。

更新，示例

这是我正在使用的asp.net ajax calendarExtender，该页面有正在使用的实例。（我相信你也可以从网站上下载工具包。）

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

我将在这里提供我正在使用的代码的简化版本（删除页面上除了有问题的控件之外的所有内容。）

在ASP.Net页面上，我有一个表格，其中包含附有日历扩展程序的文本框。正如您在此处所看到的，日历扩展程序的属性引用了文本框，因此文本框没有特殊的属性服务器端。

<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>

呈现的客户端HTML如下所示。正如您所看到的，表中没有任何内容表明日历扩展器的存在，它只是作为页面中最后一个生成的脚本存在。

<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>

用于克隆表行的javascript如下：

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);
}

Answer 1

也许你可以用不同的方式解决问题，让我解释一下。

$$ 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

因此，基本上所有内容都已在单独的面板中构建和显示，但您可以根据条件打开和关闭问题部分的显示。

这有帮助吗？

在javascript中检测Ajax CalendarExtender的存在

1 个答案: