0

我有一个表单,其中的一部分需要通过 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);
}

4

1 回答 1

0

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

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

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

这有帮助吗?

于 2014-02-15T04:57:45.863 回答