CODEWITHSUNDEEP
javascriptasp.netuser-controlsascx
Martina
Martina

Reputation: 1918

more instance of ascx on same page

I have an asp.net ascx calls ProductSearch

In the ascx I have these 4 controls

<asp:TextBox runat="server" ID="txtSearchProduct" type="text" class="form-control typeahead" data-provide="typeahead" autocomplete="off">
</asp:TextBox>
<asp:TextBox runat="server" ID="txtProductNames" CssClass="hidden"> 
</asp:TextBox>
<asp:TextBox runat="server" ID="txtSearchProductID" Style="display: none;"> 
</asp:TextBox>
<asp:TextBox runat="server" ID="txtCaricati" Style="display: none;"> 
</asp:TextBox>

In this ascx I have a javascript function that fill typeahead textbox with all possible values:

function LoadProducts() {
    var data = $("#<%=txtProductNames.ClientID%>").val();

    var $input = $(".typeahead");
    var jsonObj = $.parseJSON(data);
    var sourceArr = [];
    for (var i = 0; i < jsonObj.length; i++) {
        sourceArr.push(formatRow(jsonObj[i].id, jsonObj[i].code, jsonObj[i].name));
    }

    // init Typeahead
    $input.typeahead({
        ...
    }

Now, the problem is that I have an aspx page that needs to implement the ascx twice. One in a principal div and one in a modal div (hidden by html while modal not visible).

Exploring html with F12 tool I see that I have the same function LoadProducts() two times.

In the first one the function works with its ClientId objects and the second one too.

I call The function LoadProducts() from code behind and the first one found inside the code is executed, maybe the wrong one.

I need a method to identify the javascript function depending on which instance of ascx I'm using.

Is there any way to do this? If I haven't been clear enough, ask me questions.

Upvotes: 4

Views: 207

Answers (2)

Jin Thakur
Jin Thakur

Reputation: 2773

I think you just want script once even you have hundreds of control on same page. try this. Move script to server side 

**check if (!cs.IsClientScriptBlockRegistered(csType, csName))**

I think that's what your Supervisor wants.

<%@ Page Language="C#"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<script runat="server">
  public void Page_Load(Object sender, EventArgs e)
  {
    // Define the name and type of the client script on the page.
    String csName = "ButtonClickScript";
    Type csType = this.GetType();

    // Get a ClientScriptManager reference from the Page class.
    ClientScriptManager cs = Page.ClientScript;

    // Check to see if the client script is already registered.
    if (!cs.IsClientScriptBlockRegistered(csType, csName))
    {
      StringBuilder csText = new StringBuilder();
      csText.Append("<script type=\"text/javascript\"> function DoClick() {");
      csText.Append("Form1.Message.value='Text from client script.'; }");
      csText.Append("</script>");
      cs.RegisterClientScriptBlock(csType, csName, csText.ToString());
    }
  }
</script>
<html  >
  <head>
    <title>RegisterClientScriptBlock Example</title>
  </head>
  <body>
     <form id="Form1"
         runat="server">
        <input type="text" id="Message" /> <input type="button" value="ClickMe" onclick="DoClick()" />
     </form>
  </body>
</html>

Upvotes: 0

VDWWD
VDWWD

Reputation: 35514

If you do not want a "global" LoadProducts, which would be much better, you need to make each javascript function unique. For that you can use the ID of the User Control itself.

So you could do this inside the ascx

<script>
    function LoadProducts_<%= this.ID %>() {
        alert('Products Loaded.')
    }

    LoadProducts_<%= this.ID %>();
</script>

So if you have 2 User Controls like this

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

You will have javascript functions like this

function LoadProducts_WebUserControl1() {

}

Upvotes: 3

Related Questions