Trigger Jquery event from ASP.NET server-side code?

Question

I have a simple JQuery enabled ASP.NET page:

<script>
    $(document).ready(function() {
    $("#accordion").accordion();
  });
  </script>

<asp:UpdatePanel ID="UpdatePanel1" runat="server">
    <ContentTemplate>
        <div id="accordion">
            <h3><a id="Accordion1" href="#">Accordion Panel 1</a></h3>
            <div>
                A form input...
                <asp:Button id="btnSubmit" runat="server" onclick="btnSubmit_Click" />
            </div>
            <h3><a id="Accordion2" href="#">Accordion Panel 2</a></h3>
            <div>
            Some content...
            </div>
        </div>

    </ContentTemplate>
</asp:UpdatePanel>

If you'll notice, I'm using an UpdatePanel also.

btnSubmit_Click event does something like this:

protected void btnSubmit_Click(object sender, EventArgs e)
{
    //Some MySql INSERT, etc.
}

Now what I want to do is for server-side btnSubmit_Click to trigger JQuery to "click" Accordion Panel 2 (so it will open Accordion Panel 2 and close 1). How to do this?

UPDATE: Sorry guys I forgot to mention earlier that It's got an UpdatePanel

Can I put something in "OnClientClick" of the server-side button, then fire up something from my .js? — A.B. User
– A.B. User, Commented Jan 16, 2012 at 10:59

A.B. User · Accepted Answer · 2012-01-18 03:35:57Z

2

Oh well, I just used the "change the value of a hiddenfield after postback then let jquery read that hiddenfield" approach. Thanks guys!

Jquery:

var tag = $("#contentBody_hfTag1").val();
if (tag=="1") { $(".Accordion").accordion({ active: 1 }); }
else { $(".Accordion").accordion({ active: 0 }); }

.aspx

<asp:HiddenField ID="hfTag1" ClientIDMode="Predictable" Value="0" runat="server" />

C#

protected void btnMyButton_Click(object sender, EventArgs e)
{
    hfTag1.Value = "1";
}

answered Jan 18, 2012 at 3:35

A.B. User

4731 gold badge9 silver badges21 bronze badges

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

Comments

Jason · Accepted Answer · 2012-01-16 10:44:59Z

1

You can't. Jquery runs on the client, your handler is on the server. You will need to trigger the event on the client when the page reloads after the post back.

answered Jan 16, 2012 at 10:44

Jason

15.9k3 gold badges51 silver badges73 bronze badges

1 Comment

A.B. User Over a year ago

thanks. i just changed the value of a server-side hiddenfield that jquery will read after postback. seems to work ok. not neat but works just fine.

Bibhu · Accepted Answer · 2012-01-16 10:54:16Z

1

You can't do that as Jquery works on client side, from a server side event, as the page reloads. And the state of the accordion will be lost. So what you can do is, instead of making a post back, you can do the same work in a Jquery AJAX call on the button click to do whatever you want and then close the accordion 1 and show accordion 2.

edited Jan 16, 2012 at 10:54

answered Jan 16, 2012 at 10:47

Bibhu

4,1014 gold badges35 silver badges64 bronze badges

Comments

Rosmarine Popcorn · Accepted Answer · 2012-01-16 14:02:46Z

0

<asp:UpdatePanel ID="up1" runat="server">
    <ContentTemplate>
        <i88:InlineScript runat="server">
            <script type="text/javascript">
                $('Accordion2').click()
            </script>
        </i88:InlineScript>
        <asp:Button ID="cmd" runat="server" Text="Update" />        
    </ContentTemplate>
</asp:UpdatePanel>

You can put inlineScript which will get Executed every time you update the Panel. You can also use jQuery.Trigger(); for other event's.

answered Jan 16, 2012 at 14:02

Rosmarine Popcorn

11k11 gold badges62 silver badges90 bronze badges

2 Comments

A.B. User Over a year ago

Thanks, but may I ask where did <i88:InlineScript> come from?

Rosmarine Popcorn Over a year ago

@A.B.User is jut an example token from Google ,you can replace i88 with you're need's.

Collectives™ on Stack Overflow

Trigger Jquery event from ASP.NET server-side code?

4 Answers 4

Comments

1 Comment

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

1 Comment

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related