如何在 Java Script 中从 InsertItemTemplate 中找到控件

Question

I am new to Java Script. I have a aspx ListView with InsertItemTemplate and some buttons in it.Now i need to access the buttons from insertitemtemplate in JavaScript to disable it. This is not working?

document.getElementById('<%= Button1.ClientID %>').disable = true;

Please help me.

Answer 1

Solution 1

You can set the Javascript code in code-behind, where you have access to the ClientID property of the controls for each item of the ListView. For example, if you have two buttons in the item template and you want to disable btn2 when clicking on btn1 , you can set the client code in the ItemDataBound event:

void lstView_ItemDataBound(object sender, ListViewItemEventArgs e)
{
    if (e.Item.ItemType == ListViewItemType.InsertItem)
    {
        Button btn1 = e.Item.FindControl("btn1") as Button;
        Button btn2 = e.Item.FindControl("btn2") as Button;
        btn1.OnClientClick = string.Format("var btn2 = document.getElementById('{0}'); btn2.disabled = true; return false;", btn2.ClientID);
    }
}

Solution 2

If you cannot use the first method, but can modify the markup, then you can give the button a name that is unique in your page and set the ClientIDMode of the button to Static :

<asp:Button ID="btnUniqueName1" runat="server" ClientIDMode="Static" ... />

Since there is at most one insert item in the ListView, that ID should be unique in the form. You can retrieve the button like this:

document.getElementById('btnUniqueName1');

Solution 3

If you must find the button without modifying the server code, you can retrieve all the buttons in the form and look for some attribute that is found only in the button you are looking for:

var buttons = document.getElementsByTagName('button');
for (var i = 0; i < buttons.length; i++) {
    var button = buttons[i];
    // Check if that button is the one you want
    // Look for some unique attribute, class name, etc.
    if (button.className == 'btnUniqueClassName') {
        // The button was found
        button.disabled = true;
    }
}