How to call a javascript function when a button inside html table is clicked?

Question

update sir anmarti hello sir thank you for answering my questions i add this code to

page_load

string eventTarget = this.Request["__EVENTTARGET"];
        if (eventTarget == "DeleteRecord")
        {
            Label1.Text = "Method called!!!";
            // Delete your record here
        }else
        {
            Label1.Text = "No method";
        }

on page load(run time) the label1 change its text to "No method"

then i clicked the button then the pop up comes in. i choosed the YES button but nothing happend it didn't even close the pop up

in order to check if the javascript works correctly i changed this code
__doPostBack("DeleteRecord", ''); to $("[id*=btnadd]").click();

and after clicking the yes button of pop up it clicked the button BTNADD

my question sir is why do __doPostBack("DeleteRecord", ''); doesn't work on me? i even tried some posted tutorials online but its still the same

This is the javascript function:

    <script type="text/javascript">
   $(function () {
       //$("[id*=btnDelete]").removeAttr("onclick");
       $("[id*=btnDelete]").removeAttr("onclick");
       $("#dialog").dialog({
           modal: true,
           autoOpen: false,
           title: "Confirmation",
           width: 350,
           height: 160,
           buttons: [
           {
               id: "Yes",
               text: "Yes",
               click: function () {
                   $("[id*=btnDelete]").attr("rel", "delete");
                   $("[id*=btnDelete]").click();
               }
           },
           {
               id: "No",
               text: "No",
               click: function () {
                   $(this).dialog('close');
               }
           }
           ]
       });
       $("[id*=btnDelete]").click(function () {
           if ($(this).attr("rel") != "delete") {
               $('#dialog').dialog('open');
               return false;
           } else {
               __doPostBack(this.name, '');
           }
       });
   });
</script>

Here is the code behind

    protected void DeleteRecord(object sender, EventArgs e)
    {
        ClientScript.RegisterStartupScript(this.GetType(), "alert", "alert('Record Deleted.')", true);
    }

Html code

<asp:Button ID="btnDelete" runat="server" Text="Delete" OnClick="DeleteRecord" UseSubmitBehavior="false" />
    <div id="dialog" style="display: none">
       Do you want to delete this record?
    </div>

it works perfectly

but how to i call the function inside html table

<tr>
   <td>
      <%# DataBinder.Eval(Container.DataItem, "signatoryid") %> 
   </td>
   <td>
      <%# DataBinder.Eval(Container.DataItem, "signatoryname") %> 
   </td>
   <td>
      <%# DataBinder.Eval(Container.DataItem, "signatoryPosition") %> 
   </td>
   <td>
      <%# DataBinder.Eval(Container.DataItem, "signatoryOffice") %> 
   </td>
   <td>
      <button type="button" class="btndelete btn btn-xs btn-danger" OnClick="DeleteRecord">
      <span class="glyphicon glyphicon-trash" aria-hidden="true"></span>Delete
      </button>
   </td>
</tr>

See this answer: stackoverflow.com/questions/1947263/…

Anoxy
– Anoxy

2015-10-23 07:32:02 +00:00
Commented Oct 23, 2015 at 7:32 — Anoxy
– Anoxy, Commented Oct 23, 2015 at 7:32

anmarti · Accepted Answer · 2015-10-23 08:04:09Z

1

Client side

Create a function that opens the dialog and call it in the onClick event:

 <button type="button" class="btndelete btn btn-xs btn-danger" OnClick="javascript:deleteRecord();">
     <span class="glyphicon glyphicon-trash" aria-hidden="true"></span>Delete
  </button>


<script>
  $(function () {
     $("#dialog").dialog({
        modal: true,
        autoOpen: false,
        title: "Confirmation",
        width: 350,
        height: 160,
        buttons: [
        {
            id: "Yes",
            text: "Yes",
            click: function () {
                 __doPostBack("DeleteRecord", '');
            }
        },
        {
            id: "No",
            text: "No",
            click: function () {
                $(this).dialog('close');
                return false;
            }
        }
        ]
     });
});

    function deleteRecord(){
        $("#dialog").dialog('open');
    }
 </script>

Server side code

If you do a hand-made __doPostback() you have to retrieve the EventTarget and EventArguments (if you have) on the Page_Load() or Page_Init() if you prefer, event handlers of the current page:

 protected void Page_Load(object sender, EventArgs e)
    {
      string eventTarget = this.Request["__EVENTTARGET"];
      if(eventTarget == "DeleteRecord")
      {

       // Delete your record here
      }

  }

edited Oct 23, 2015 at 8:04

answered Oct 23, 2015 at 7:38

anmarti

5,15310 gold badges62 silver badges96 bronze badges

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

7 Comments

knowmeifyou Over a year ago

thanks it's working but i don't understand the server side code you posted can you give me a sample code sir that calls a code behind function when the yes button is clicked. thank you

anmarti Over a year ago

__doPostBack("DeleteRecord", ''); should hit the Page_Load() event handler.

knowmeifyou Over a year ago

can you explain sir? the code. i really don't understand it. or can you give me a keyword to search for me to read? to understand better the code? thank you

anmarti Over a year ago

Take a look here and here and also here

knowmeifyou Over a year ago

hello sir @anmarti i updated my questions above hope you can help me. my question is not enough in this box to i put it above thank you

|

Collectives™ on Stack Overflow

How to call a javascript function when a button inside html table is clicked?

1 Answer 1

7 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

7 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related