CODEWITHSUNDEEP
javascriptphpjqueryhtmlhtml-table
user3354665
user3354665

Reputation: 71

how to add onclick events to dynamically generated buttons and show /hide the table

I have many buttons generating dynamically based on end user request

$out='<input class="show_hide" type="button" id="'.$platform_name.'" value="'.$platform_name.'"/>';

the same variable name tables also coming dynamically

$out.='<table id="'.$platform_name.'" > </table>

if suppose button 

<input class="show_hide" type="button" id="button1'" value="button1"/> 
<table id="button1" > </table>

how to get the number of button names/id, and based on button name/id finding table and show/ hide the table. Please help me. i am fresher in php

Upvotes: 2

Views: 893

Answers (5)

scott.korin
scott.korin

Reputation: 2597

As others have said, id's must be unique. Your button and table can't have the same id. But you can use the value of your button to find the associated table:

$out='<input class="show_hide" type="button" value="'.$platform_name.'"/>';

Since the buttons are dynamic, you don't know the ids of all of the buttons, but you can use the jQuery class selector to find all buttons with the show_hide class and apply a function to the click event:

$("input.show_hide").on('click', function () {
    // get the id of the table associated with the button
    var tableId = $(this).val(),

    // toggle your table between hide and shown
    $("#" + tableId).toggle();

});

If your tables can be added dynamically AFTER the page loads, you will have to use a delegate for defining the click event:

$(document).on( ".show_hide", "click", function() {
    .. same code goes here
});

Upvotes: 0

muneebShabbir
muneebShabbir

Reputation: 2538

when it comes to dynamic binding, go for delegates

$( "body" ).on( "click", ".show_hide", function() {
    $( this ).next().toggle();
});

OR you can provide selector in sibling selection

$( "body" ).on( "click", ".show_hide", function() {
    $( this ).next("#table1").toggle();
});

this code will hide/show the next sibling(in your case a table) on button click with class show_hide

Upvotes: 3

Awlad Liton
Awlad Liton

Reputation: 9351

try like this using delegate:

all button click event:

$(document).on( ".show_hide", "click", function() {
 //all button click
})

for the table use wildcart:

   $(document).on( "[id^=table]", "click", function() {
     //all table click
    })

you also use wildcart for button also like this:

 $(document).on( "[id^=button]", "click", function() {
         //all table click
        })

Upvotes: 0

Noor
Noor

Reputation: 20150

If you want to add event handler dynamically to element, ensure that you can have id for that element, you can do using plain javascript,

elemm.onclick = function() { alert('blah'); };

where elemm = document.getElementById("button1")

Upvotes: 0

Hamza Kubba
Hamza Kubba

Reputation: 2269

The id should be unique in your HTML. E.g.

<input class="show_hide" type="button" id="button1'" value="button1"/> 
<table id="table1"></table>

Then, you can 'choose' either the button or the table with jQuery using:

$('#button1')
$('#table1')

E.g.

for (var i = 1; i <= numberOfTables; i++) {
    $('#button' + i).click(function() {
        $('#table' + i).hide();
    });
}

Upvotes: 0

Related Questions