CODEWITHSUNDEEP
javascriptasp.netvb.net
Agamemnon
Agamemnon

Reputation: 607

Add JavaScript onClick to dynamically generated asp button

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';
        }

    }

Upvotes: 1

Views: 3699

Answers (3)

Mohan Chandra Polaki
Mohan Chandra Polaki

Reputation: 96

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.

Upvotes: 2

Mohan Chandra Polaki
Mohan Chandra Polaki

Reputation: 96

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

Upvotes: 0

Ricky Jiao
Ricky Jiao

Reputation: 529

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>

Upvotes: 1

Related Questions