CODEWITHSUNDEEP
javascriptasp.netuser-controls
Ali.Rashidi
Ali.Rashidi

Reputation: 1462

How to call a java script function from user controls

This is my user control example.ascx

 <%@ Control Language="C#" AutoEventWireup="true" CodeBehind="add.ascx.cs" Inherits="WebApplication3.add" %>

<%@ Register assembly="AjaxControlToolkit" namespace="AjaxControlToolkit" tagprefix="asp" %>

<link rel="Stylesheet" href="style.css" />


<script type="text/javascript">
function toDo()
{
//Do something
};
</script>


<asp:TextBox ID="txt_name" onkeydown="toDo()" runat="server" CssClass="input_txt">   </asp:TextBox>

When i load my page and add my user control to the page, I can not call the java script function at all. The error is:

Java script function toDo is undefined. It has really exhausted me :(

UPDATE***

My usercontrols is added to page by code. Here is the server side code to add the usercontrol to the page:

 protected void lnk_new_Click(object sender, EventArgs e)
    {
        add add_view = LoadControl("add.ascx") as add;
        Panel pnl_view = (Panel)ContentPlaceHolder1.FindControl("pnl_view");
        pnl_view.Controls.Clear();
        pnl_view.Controls.Add(add_view);

    }

And this is the error I got: My screenshot of error

Upvotes: 1

Views: 4797

Answers (2)

Ali.Rashidi
Ali.Rashidi

Reputation: 1462

The issue was that my function within the user control was not present when my user control was added! I add the same java script function to the head section of my master page and it worked. I still don't know the reason of that exception though, But i got what i wanted.

<%@ Master Language="C#" AutoEventWireup="true" CodeBehind="Site.master.cs" Inherits="WebApplication3.Site" %>

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<link rel="Stylesheet" href="style.css" />

<script type="text/javascript">
  function toDo() {
      alert("HAHAH");
  };
</script>
</head>

Upvotes: 0

afzalulh
afzalulh

Reputation: 7943

I am not sure what you are doing! Here's my markup for user control which has javascript function toDo() aswell:

<%@ Control Language="C#" AutoEventWireup="true" CodeFile="add.ascx.cs" Inherits="add" %>
<%@ Register assembly="AjaxControlToolkit" namespace="AjaxControlToolkit" tagprefix="asp" %>

<link rel="Stylesheet" href="style.css" />

<script type="text/javascript">
    function toDo() {
        alert("This worked!");
    };
</script>
<asp:TextBox ID="txt_name" onkeydown="toDo()" runat="server" CssClass="input_txt">   </asp:TextBox>

and here's my implementation page:

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default2.aspx.cs" Inherits="Default2" %>

<%@ Register src="add.ascx" tagname="add" tagprefix="uc1" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>   

</head>
<body>
    <form id="form1" runat="server">
    <div>

        <uc1:add ID="WebUserControl1" runat="server" />

    </div>
    </form>
</body>
</html>

And when I press any key in the text box, I receive message from the toDo() function:

enter image description here

So, there's nothing wrong with the code you provided.

Upvotes: 1

Related Questions