在javascript中檢測Ajax CalendarExtender的存在

我有一個表單，其中的一部分需要通過JavaScript動態克隆以允許用戶輸入其他詳細信息。一切工作正常，除非克隆的文本框中有一個附加日期選擇的CalendarExtender。該文本框被克隆，但日曆擴展程序不是，因爲它顯然不作爲DOM中的元素存在，並且事件不直接附加到正在克隆的文本框。在javascript中檢測Ajax CalendarExtender的存在

所以，我在找的是一種方法來確定，最好通過檢查文本框本身的一些屬性，如果有附加日曆擴展。或者，如果有一些方法來檢查文本框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); 
}

來源

2014-01-24 Hearth

我現在有一個解決方法，它涉及到手動設置文本框用於日期的特定標誌。然後，我可以檢查該標誌並將新的日曆行爲添加到克隆的文本框中。我覺得這是一個不太優雅的解決方案，所以這個問題會讓人有希望得到一個更清晰的方法來實現它。 – Hearth

或許你可以攻擊不同的問題，讓我解釋一下。

$$ 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-15 04:57:45

對不起，我認爲你沒有正確地閱讀這個問題。我克隆頁面的各個部分，而不僅僅是顯示/隱藏現有元素。克隆過程本身工作正常，AjaxControlToolkit.CalendarExtender除外，它不是表單中的實際元素，而是由附加到特定文本框的行爲表示。我正在尋找一種通過檢查文本框來檢測該行爲的存在的方法。 – Hearth

因此，總而言之，您希望能夠知道某個文本框是否用於擴展日曆擴展程序？如果您對文本框ID使用了特定的命名約定會怎麼樣？我不斷重新閱讀你的問題，我想說我得到你的問題，但我認爲它有更多的問題。你能否提交樣本代碼，照片給我們一個更好的想法來幫助你。 –

你說得對，我應該從一開始就發佈代碼示例 - 我的工作原理是人們會熟悉擴展器控件的工作原理。正如您現在應該能夠看到的那樣，我的解決方法就像您剛剛建議的那樣，在文本框名稱中檢查「日期」。無論如何，希望現在情況更清楚。 – Hearth

在javascript中檢測Ajax CalendarExtender的存在

回答

相關問題