How to get click event in code behind in c# using jquery

Question

Hi Please check i want to get click event in code behind as i am using master page concept and i have one child form of it in this page i have ContentPlaceHolder, My button "btnSubmit" this is a linkbutton which is under GridView. i want loading image when i will click on btnSubmit button. please check and help.

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
function ShowProgress() {
    setTimeout(function () {
        var modal = $('<div />');
        modal.addClass("modal");
        $('body').append(modal);
        var loading = $(".loading");
        loading.show();
        var top = Math.max($(window).height() / 2 - loading[0].offsetHeight / 2, 0);
        var left = Math.max($(window).width() / 2 - loading[0].offsetWidth / 2, 0);
        loading.css({ top: top, left: left });
    }, 200);
}
$('form').live("submit", function () {
    ShowProgress();
});

aspx page..

<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" Runat="Server">
<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False">
<Columns>
    <asp:BoundField DataField="Journal" HeaderText="Customer Id" />
    <asp:BoundField DataField="ISBN" HeaderText="Contact Name" />
    <asp:BoundField DataField="Status" HeaderText="City" />
    <asp:TemplateField HeaderText="Btn">
        <ItemTemplate>
            <asp:Button ID="btnSubmit" runat="server" Text="Load Customers"
OnClick="btnSubmit_Click"  />
        </ItemTemplate>
    </asp:TemplateField>
</Columns>
</asp:GridView>
<div class="loading" align="center">
Downloading Files. Please wait<br />
<br />
<img src="loader.gif" alt="" />
</div>
</asp:Content>

In cs Page.

 protected void Page_Load(object sender, EventArgs e)
{
    if (!IsPostBack)
    {
        string script = "$(document).ready(function () { $('[id*=btnSubmit]').click(); });";
        ClientScript.RegisterStartupScript(this.GetType(), "load", script, true);
    }       
}

Just make sure the you are using the correct id of submit button because id is rendered with contentplaceholder id.Check id in browser and use that. — Mairaj Ahmad
– Mairaj Ahmad, Commented Aug 27, 2014 at 7:59

Hiral Nayak · Accepted Answer · 2014-08-27 09:14:24Z

1

try this way

Script AS

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">
    function ShowProgress() {
        setTimeout(function () {
            var modal = $('<div />');
            modal.addClass("modal");
            $('body').append(modal);
            var loading = $(".loading");
            loading.show();
            var top = Math.max($(window).height() / 2 - loading[0].offsetHeight / 2, 0);
            var left = Math.max($(window).width() / 2 - loading[0].offsetWidth / 2, 0);
            loading.css({ top: top, left: left });
        }, 200);
    }
    $('form').live("submit", function () {
        ShowProgress();
    });
</script>

And Add event onrowdatabound in grid

<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False" 
 onrowdatabound="GridView1_RowDataBound">

And CS page

protected void GridView1_RowDataBound(object sender, GridViewRowEventArgs e)
{
    if(e.Row.RowType == DataControlRowType.DataRow)
    {    
         Button btnSubmit = e.Row.FindControl("btnSubmit") as Button;
         btnSubmit.Attributes.Add("OnClick", "ShowProgress();");
    }
}

edited Aug 27, 2014 at 9:14

answered Aug 27, 2014 at 8:11

Hiral Nayak

1,0828 silver badges15 bronze badges

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

7 Comments

Ashwani Gusain Over a year ago

Hi Hiral good i want exactly this... tell me more thing if we have two button and i want loading img in both button with same js code is this possible or not?

Hiral Nayak Over a year ago

@AshwaniGusain yaa its possible but one thing if its not requirement to call function to code behind you simply set On button on client click AS OnClientClick="ShowProgress();return true;"

Hiral Nayak Over a year ago

@AshwaniGusain you call function like this <asp:Button ID="btnSubmit" runat="server" Text="Load Customers" OnClick="btnSubmit_Click" OnClientClick="ShowProgress();return true;" />

Hiral Nayak Over a year ago

@AshwaniGusain but if you use this way then not requirement to add code in CS page

Ashwani Gusain Over a year ago

Hiral its not working yaar your first is working perfect.. Tell me if i want same with both button click.

|

Muhammad Yousaf Sulahria · Accepted Answer · 2014-08-27 08:50:46Z

1

Use OnClientClick event of the button also in this event call a javascript function which change the css of the progress bar to visible.

OnClientClick="ShowProgress();return true;"

answered Aug 27, 2014 at 8:50

Muhammad Yousaf Sulahria

1,7381 gold badge14 silver badges16 bronze badges

Collectives™ on Stack Overflow

How to get click event in code behind in c# using jquery

2 Answers 2

7 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

7 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related