Click here to Skip to main content
15,879,326 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
See more:
try to click on a button from jquerry code. but onclick event is not firing. the code i pasted below
tried following non of them work
$('#<%=hidButton.ClientID%>').click();

document.getElementById('<%=hidButton.ClientID%>').click();

$("[id*=Button1]").click();







ASP.NET
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="demo.aspx.cs" Inherits="Stage1.demo" %>

<!DOCTYPE html>

<<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">

    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
    <script src="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.9/jquery-ui.js" type="text/javascript"></script>
    <link href="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.9/themes/start/jquery-ui.css" rel="stylesheet" type="text/css" />
    <title></title>
</head>
<body>
    <form id="form1" runat="server">

    
<script type="text/javascript">
    $("[id*=btnModalPopup]").live("click", function () {
        
        $("#modal_dialog").dialog({
            title: "Select The Format You Wanted",
            height: 300,
            width: 400,
            buttons: {
                'Select All': select,
                Save: save,
                Cancel: cancel,
                Testclick: Testclick
                
        
            },
            modal: true
        });
        
        return false;
    });
    function Testclick() {
        
        
        var clickButton = document.getElementById("<%= test.ClientID %>");
        clickButton.click();
        
    }
    function select() {
        $(':checkbox').prop('checked', true);
    }
    function save() {
        
        $(this).dialog('close');
    }

    function cancel() {
        
        $(this).dialog('close');
        $(':checkbox').prop('checked', false);
    }




 






</script>
<div id="modal_dialog" style="display: none">
    
   PDF <asp:CheckBox ID="CheckBox1" runat="server" />
   WORD <asp:CheckBox ID="CheckBox2" runat="server" />
   CSV <asp:CheckBox ID="CheckBox3" runat="server" />
    XL<asp:CheckBox ID="CheckBox4" runat="server" />
   XML <asp:CheckBox ID="CheckBox5" runat="server" /><br />
      
</div>
 <asp:Button ID="test" runat="server" Text="Button"  OnClick = "Button1_Click" />
      
<asp:Button ID="btnModalPopup" runat="server" Text="Test" />


    </form>
</body>
</html>


What I have tried:

tried following non of them work
$('#<%=hidButton.ClientID%>').click();

document.getElementById('<%=hidButton.ClientID%>').click();

$("[id*=Button1]").click();
Posted
Updated 26-Sep-16 23:55pm
v3
Comments
Karthik_Mahalingam 27-Sep-16 2:21am    
run this in $('#<%=hidButton.ClientID%>') console window and check it returns a button object.
Vincent Maverick Durano 27-Sep-16 11:16am    
Which click event is not firing, the client side onclick or the server side onclick? Have you tried using the debugger to check for JavaScript errors? Also could try adding an alert within your Testclick() function?

function Testclick() {
alert('invoked');
}

CSS
$('.btnApply').on('click', function () {
                $("#alt-model").dialog({
                    autoOpen: true,
                    position: { my: "center", at: "top+350", of: window },
                    width: 1000,
                    resizable: false,
                    title: 'Add User Form',
                    modal: true,
                    open: function () {
                        $(this).load('@Url.Action("GetConfirmationMessage", "Jobs")');
                    }
                });


OR

JavaScript
$('[data-toggle="modal"]').click(function (e) {
            e.preventDefault();
            var url = $(this).attr('href');
            if (url.indexOf('#') == 0) {
               $(url).modal('open');
            } else {
                    $.get(url, function (data) {
                    $('<div class="modal hide fade">' + data + '</div>').modal();
            }).success(function () { $('input:text:visible:first').focus(); });
      }
 });
 
Share this answer
 
v2
hi
You can use inline events to run the command

like
ASP.NET
<asp:button id="btn_test" runat="server" onclick="javascript:doClick(this , event)">


<script>

 function doClick(sender , e)
{

$("#modal_dialog").dialog({
            title: "Select The Format You Wanted",
            height: 300,
            width: 400,
            buttons: {
                'Select All': select,
                Save: save,
                Cancel: cancel,
                Testclick: Testclick
                
        
            },
            modal: true
        });
        
        return false;

}

</script>


</asp:button>
 
Share this answer
 
Comments
Vincent Maverick Durano 27-Sep-16 11:08am    
That may work, but there's actually a dedicated OnClientClick event for asp.net button controls. You can use that instead of onclick.
Hi,
You can try like this :

$("#btnModalPopup").click(function({
});
or
$("#btnModalPopup").live("click",function({
});
 
Share this answer
 
Comments
Vincent Maverick Durano 27-Sep-16 11:10am    
You may end up getting null reference exception when accessing like that with asp.net controls, as server controls will generate ID's based on it's naming containers. It's always safe to use ClientID instead, or better yet assign a class and use that to reference the control.

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