Click here to Skip to main content
15,867,453 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
See more:
Hello experts,

I have a web application,in there is a Update panel.
In the Update panel, there is a div.
From code behind, I am creating a table like layout with say 100 cells over all. like 10 cells in each 10 rows.
Every cell has a button with text assigned.
To this point everything is perfect. Here is the html picked from debugger resource tools in browsers
HTML
<th class="thbut">
<input class="thbut" type="submit" style="background-color:#CCEEDD;height:30px;width:60px;" value="AA096" name="ctl03">
</th>
<th class="thbut"> <pre><input class="thbut" type="submit" style="background-color:#CCEEDD;height:30px;width:60px;" value="AA094" name="ctl04">
</th>


And I have a Jquery function. Every time a button is clicked it has to alert the name/text of the button and here comes the problem. It works only once. Meaning first time when I click on the button, it pops up alert with the name of the button. Next button click will do nothing. It doesn't hit the Jquery event. Neither shows any errors.
JavaScript
function ClickManager(element) {
            debugger;
            this.el = $(element);
            this.check = function () {
                if (this.el.hasClass('thbut')) {
                    alert(this.el.val());
                }
            };
        }


        $(document).ready(function () {
            debugger;
            //on and live are same 
        $('.thbut').on('click', function () {
                manager = new ClickManager(this);
                manager.check();
            });
        });



Could someone please help me in this?

What I have tried:

I have tried doing the $(document).ready(function () {
debugger;
//on and live are same
$('.thbut').on('click', function () {
manager = new ClickManager(this);
manager.check();
});
});
inside a function and add that in attributes from codebehind. Like evey button has onclick = Hit(); function. Nothing seems to work
function ClickManager(element) {
           debugger;
           this.el = $(element);
           this.check = function () {
               if (this.el.hasClass('thbut')) {
                   alert(this.el.val());

               }
           };
           return false;
       }
       $(document).ready(function () {
           $(document).on('click', '.thbut', function () {
               manager = new ClickManager(this);
               manager.check();
           });
       });
Posted
Updated 19-Feb-16 7:56am
v2

Because you haven't cancelled the event, when you click the button, it submits the form. Since it's inside the UpdatePanel, the page is updated without reloading.

You've attached the event handler to specific elements in the document. When the page is updated via an UpdatePanel, those elements are replaced with the content returned from the server.

The $(document).ready(...) event won't fire when the page is updated via an UpdatePanel, so your event handler doesn't get attached to the new buttons.

You could move the code that wires up the event handlers to the client-side pageLoad event, but that wouldn't be particularly efficient. Instead, you should attach the event handler at a higher level, and let the click events bubble up the tree from the button to the document element:
JavaScript
$(document).ready(function () {
    $(document).on('click', '.thbut', function() {
        manager = new ClickManager(this);
        manager.check();
    });
});

See the "Direct and delegated events" section in the jQuery documentation for more details:
.on() | jQuery API Documentation[^]
 
Share this answer
 
Comments
sudevsu 19-Feb-16 13:16pm    
I did as per your solution. But now, as soon as I click on button, it shows the alert and all the dynamic created cells and table are gone. It shows white panel. I have Enableviewestate = True in my ASPX page.
Richard Deeming 19-Feb-16 13:17pm    
Try adding return false; to the end of the event handler. That will stop the page from posting back to the server.
sudevsu 19-Feb-16 13:57pm    
now every time the button is clicked first alert shows button text and second alert with empty message. Please see improved questions
Richard Deeming 19-Feb-16 13:59pm    
Probably because you have the thbut class defined on the parent <th> as well.

If you only want to handle the event for the <input> elements, then update the filter:
$(document).on('click', 'input.thbut', function() {
sudevsu 19-Feb-16 14:03pm    
Awww.. How did I miss that . You are right.
Use the pageLoad event rather than document.ready to attach your events.

How to run javascript after updatepanel execution completed | The ASP.NET Forums[^]
 
Share this answer
 
v2
Comments
sudevsu 19-Feb-16 9:52am    
Page Load for javascript??? Can you show me how?

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900