CODEWITHSUNDEEP
javascriptasp.netwebusercontrol
Chris
Chris

Reputation: 3129

Converting aspx page to WebUserControl

I am running into an issue when converting an ASPX page to a controller (ASCX). My JavaScript isn't finding a textbox in a hidden div and its not firing an onclick event either. However it works perfectly fine in the ASPX page.

My JavaScript is..

function FireEditClickButton() {
        document.getElementById("btnFireEdit").click();
    }

Its supposed to fire this button that is in a hidden div along with the next piece)

<asp:Button ID="btnFireEdit" runat="server" OnClick="btnFireEdit_Click" />

Then with this JavaScript

function GetSelection() {
        var c = document.getElementById("tbRA");
        c.innerText = checkListBox.GetSelectedValues();
        UpdateText();
    }

gets called everytime the checklistbox has values.

Both errors are saying that they are null but they are right here in a hidden div

<div style="visibility: hidden">
        <asp:TextBox ID="tbRA" runat="server"></asp:TextBox>
        <asp:Button ID="btnFireEdit" runat="server" OnClick="btnFireEdit_Click" />
    </div>

So why would this be happening since it works completely fine in the ASPX page? would it have to do with the WebUserControl not using a form tag?

Thanks

Upvotes: 3

Views: 45

Answers (2)

mason
mason

Reputation: 32718

When using nested controls (or pages nested in a master page), by default the ID on the client side will be different than on the server. ASP.NET does this by default to help ensure that all ID's on the client are unique. However, you can prevent this using one of two ways.

The first option is to change the ClientIDMode to static. You can do this at the control, page, web.config, or machine.config levels. The web.config technique is shown below. The ID on the client will then match the ID on the server.

<configuration>
    <system.web>
        <pages clientIDMode="static" />
    </system.Web>
</configuration>

The second option is to use inline C# code to embed the ID into your JavaScript, but this only works if the JavaScript is embedded on an ASP.NET page or control and not in a separate script file. The C# expression will be evaluated and therefore the ID on the client will be embedded into the JavaScript.

document.getElementById('<%= btnFireEdit.ClientId %>');

There is a third option, and that is to figure out what the ID will be on the client and then manually put that in the JavaScript, like this:

document.getElementById("myctrlname_btnFireEdit").click();

However, that is a bad idea. If you ever rename either myctrlname or btnFireEdit then your client side code will fail at runtime. And it's always better to fail at compile time than runtime.

Upvotes: 1

freefaller
freefaller

Reputation: 19963

Your javascript cannot find the button because in the rendered HTML it no longer has id="btnFireEdit" but instead an id based on the name of the usercontrol (e.g. id="myctrlname_btnFireEdit").

You have two choices... either update the javascript to include the name of the usercontrol...

document.getElementById("myctrlname_btnFireEdit").click();
document.getElementById("<%=btnFireEdit.ClientID%>").click();

(Note, the 2nd of these two lines will only work if the javascript is part of the usercontrol itself. It will not work if the javascript is in an external .js file or the parent page)

Or use the ClientIDMode attribute of the <asp:Button> and set the value to Static. This will make the rendered HTML use id="btnFireEdit"...

<asp:Button ID="btnFireEdit" runat="server" OnClick="btnFireEdit_Click"
  ClientIDMode="Static" />

Upvotes: 1

Related Questions