Add JavaScript onClick to dynamically generated asp button

Question

Background My page creates a list of objects based on rows of an SQL Database. For each object, a DIV is dynamically generated that contains a few items including a LinkButton and a further child DIV that is initially hidden. I want the link button to toggle the child DIV's hidden property. The JavaScript is not dynamically generated and is included in the ASPX page.

Problem I don't know how to make this generated LinkButton fire JavaScript that is included in the ASPX page and pass in the correct DIV's ID.

I'm guessing I need to add an attribute to the button like so:

    myButton.Attributes.Add(reference to JS function + parameter of DIV's ID)

Maybe like:

    myButton.Attributes.Add("onclick", "Show_Hide_Display('"<%="' +idString+ '".ClientID%>"')");

Where the button is given an attribute of a JS onClick handler pointing to the function "Show_Hide_Display" and a parameter of a DIV's ID that is calculated as the rendered ID. This syntax is incorrect though.

How do I write this so it calls 'Show_Hide_Display' and passes the ID of the current child DIV? All of the DIVs have the same ID apart from a number that references their row number, for example '"myDiv_" + counter.ToString'

The JavaScript I am trying to add a call to on the button:

   function Show_Hide_Display(divID) {

        var div = document.getElementById(divID);
        var style = document.defaultView.getComputedStyle(div);
        var display = style.getPropertyValue('display');

        if (display == '' || display == 'block') {
            div.style.display = 'none';
        } else {
            div.style.display = 'block';
        }

    }

Mohan Chandra Polaki · Accepted Answer · 2016-03-31 12:33:38Z

2

Use the following syntax ...

myButton.Attributes.Add("onclick", "Show_Hide_Display(this.id);");

the above syntax allows to call the function with id as its parameter.

suggestion: Try to write a common function which does not depend on generated ids of controls.

If this is not useful for your requirement, please post your code which might gives me a better idea.

answered Mar 31, 2016 at 12:33

Mohan Chandra Polaki

961 silver badge1 bronze badge

Sign up to request clarification or add additional context in comments.

1 Comment

Agamemnon Over a year ago

This is actually the route I took in the end. But will mark your answer as the correct one for people having similar issues in the future. Thanks.

Ricky Jiao · Accepted Answer · 2016-03-30 09:17:24Z

1

If you are using jQuery, you could you jQuery delegate method.

$(document).on("click", "div.parent", function(){
   var subDivId = getSubDivByParent(this);
   Show_Hide_Display(subDivId);
};

You need to implement getSubDivByParent according your DOM structure.

If you are not using jQuery, you need to attach event yourself. For each dynamically generated element. You need to manually add following script in your server code to register event.

... your html code ...
<script>
var elem = document.getElementById('new-created-element');

elem.addEventListener("click", function(){
   var subDivId = getSubDivByParent(this);
   Show_Hide_Display(subDivId);
};)
</script>

answered Mar 30, 2016 at 9:17

Ricky Jiao

5294 silver badges10 bronze badges

5 Comments

Agamemnon Over a year ago

I'm not using JQuery, I have a JavaScript function that recieves a DIV's ID and then shows/hides it via CSS. This function is used elsewhere and works fine. I need to be able to call it on a dynamically generated button but do not know the syntax.

Ricky Jiao Over a year ago

So you need to append script tag in your server. The script is used to register your new created element. Such as '<div>html code</div><script>register event</script>'

Agamemnon Over a year ago

No, the script is already on the page and works fine. I need my new button to call the function.

Ricky Jiao Over a year ago

Yes. So what you need to do: just attach DOM event. So what you need a script snippet to register DOM click event. Such as '<div>html code</div><script>register event</script>'

Agamemnon Over a year ago

I think what I actually need is something like this: myButton.Attributes.Add("onclick", "Show_Hide_Display('"<%="' +idString+ '".ClientID%>"')");

Mohan Chandra Polaki · Accepted Answer · 2016-03-30 09:28:44Z

0

My suggestion is use jquery to achieve the functionality.

My solution works if you want to toggle the immediate div for the link.just call  onclientclick method to toggle the div.

in linkbutton onclientclick="Show_Hide_Display(this)"

function Show_Hide_Display(id) {
    $(id).next('div').toggle();
 }

I hope this helps you .. Thanks

answered Mar 30, 2016 at 9:28

Mohan Chandra Polaki

961 silver badge1 bronze badge

1 Comment

Agamemnon Over a year ago

I can aready make the DIVs hidden/visible. I need my newly created button to call the JavaScript function that does this.

Collectives™ on Stack Overflow

Add JavaScript onClick to dynamically generated asp button

3 Answers 3

1 Comment

5 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

5 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related