0

I am trying to invoke a server side method through JavaScript by first displaying a confirm message and then trigger a button click on the page to call the function. However, the .click() method doesn't seem to work. Any ideas?

<script type="text/javascript">
    function confirmDelete() {
        var button = document.getElementById("hiddenButton");
        if (confirm("Are you sure you would like to delete the row")) {
            button.click();
        }
    }
</script>

and the button is defined like follows

<asp:Button ID="hiddenButton" runat="server" onclick="showHiddenMessage"  Text="hidden" width="100px" />

Everything that I have found suggest that it should. including here:

http://www.comptechdoc.org/independent/web/cgi/javamanual/javabutton.html

and here:

Call ASP.NET function from JavaScript?

Community
  • 1
  • 1
JSON
  • 1,113
  • 10
  • 24

3 Answers3

5
var button = document.getElementById('<% =hiddenButton.ClientID %>');

Id of server side controls is different on client side. modify code as above and try.

Modify confirmDelete() method as below:

 function confirmDelete() {

    if (confirm("Are you sure you would like to delete the row")) {
       __doPostBack(( 'hiddenButton', '' );
    }
}
Akshey Bhat
  • 8,227
  • 1
  • 20
  • 20
  • found that solution already since I posted this thread...tried that...didn't work. – JSON Dec 22 '15 at 16:02
  • check modified answer. – Akshey Bhat Dec 22 '15 at 16:26
  • I should have been more specific. I have a separate delete button that already uses the confirmDelete() method. That works fine. The confirm message shows up just fine, however the button.click() event doesn't execute. Just for fun, I tried adding the OnClientClick to my hidden button, and the message box showed up twice. This means the button.click does execute the OnClientClick, but not the onclick.I feel that I am missing something – JSON Dec 22 '15 at 16:34
  • button.click() would invoke only client side click event not server side. For raising server side click event, postback in required. – Akshey Bhat Dec 22 '15 at 16:37
  • modified code again according to your explanation. please check – Akshey Bhat Dec 22 '15 at 16:44
2

Take a look at the ClientIDMode property of a Button. Setting this to Static will cause the button to render with the ID you entered in to your ASP.NET code. https://msdn.microsoft.com/en-us/library/system.web.ui.control.clientidmode.aspx

<asp:Button ID="hiddenButton" runat="server" ClientIDMode="Static" onclick="showHiddenMessage"  Text="hidden" width="100px" />

If you look at the generated HTML, you should see the ID of this button as hiddenButton which should allow your Javascript to work.

By default ClientIDMode value will be Inherit, and will include the NamingContainer within the ID. This means the ID of the rendered HTML will be something like Panel1_hiddenButton and your Javascript won't find it with the current code.

For reference:

  • Static - The ClientID value is set to the value of the ID property. If the control is a naming container, the control is used as the top of the hierarchy of naming containers for any controls that it contains.
  • Inherit - The control inherits the ClientIDMode setting of its NamingContainer control.
Kirk
  • 16,182
  • 20
  • 80
  • 112
0

But why don't you use your javascript function with your button? I think it is better:

<script type="text/javascript">
    function confirmDelete() {
        if (confirm("Are you sure you would like to delete the row?")) {
            return true;
        }
        return false;
    }

And your button:

<asp:Button ID="hiddenButton" runat="server" OnClientClick="return confirmDelete();" onclick="showHiddenMessage"  Text="hidden" width="100px" />

In this case if user will click OK button, your showHiddenMessage function will occur. Otherwise nothing will be happen.

Khazratbek
  • 1,656
  • 2
  • 10
  • 17
  • I tried that, but it wasn't working. However, it may have been the due to the random post back event that was giving me troubles with everything else. Now that I understand what was going wrong, your solution seems more than reasonable. I will give it a try! Thanks for the input. – JSON Dec 23 '15 at 16:03
  • Works perfectly. Thanks! As you can tell, my knowledge of websites and javascript is minimal. However thanks to everyones help, I am learning! – JSON Dec 23 '15 at 16:20
  • @JSON you are welcome. If you have solved your issue already, choose the answer that helped you and close question. So if somebody will look for similar question, they might be able to see the approved answer and to use that. – Khazratbek Dec 24 '15 at 00:27