how to trigger updatepanel within a javascript function

Question

i have an updatepanel in my asp.net web page. I want to trigger the updatepanel within a javascript function insead of triggering with a button.
In order to do that, i used __doPostBack('myUpdatePanel', ''); function. But i think it causes the whole page postback. My document.ready function is also executed when i call this function. I may be missing some points.
Is there any other way to trigger updatepanel within a javascript function?

Grant Thomas · Accepted Answer · 2013-05-08 09:27:43Z

22

I think if you put a hidden button inside the update panel and you can use the javascript to fire the click of this button, it will do what you want.

<script type="text/javascript">
        function Update_UpdatePaanel() {
            document.getElementById('<%= YourButton.ClientID %>').click()
        }
    </script>

The button MUST be inside a hidden div and DON'T set visibile="false" because if you set it to false, the control will not render and the javascript will produce errors.

<div style="display:none">
        <asp:Button ID="YourButton" runat="server" />
    </div>

edited May 8, 2013 at 9:27

Grant Thomas

45.1k10 gold badges88 silver badges129 bronze badges

answered Jul 28, 2011 at 8:54

Samir Adel

2,5092 gold badges15 silver badges16 bronze badges

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

5 Comments

Fer Over a year ago

is it really possible? So i should look for how to fire click of a aspbutton. do you know how to fire click event of a hidden aspbutton with javascript?

Samir Adel Over a year ago

document.getElementById('<%# YourButton.ClientID %>').click()

Fer Over a year ago

i used "<%=YourButoon.ClientID%>" insead of '<%# YourButton.ClientID %>'. it looks well now.

kͩeͣmͮpͥ ͩ Over a year ago

I had to put CausesValidation="False" on the button too

Denis G. Labrecque Over a year ago

Tired of seeing this hack. Is there not a straightforward way by updating the control without the use of a button?

rkw · Accepted Answer · 2011-07-28 16:41:11Z

3

Just create a javascript function and execute the generated postback event:

<%=ClientScript.GetPostBackEventReference(myUpdatePanel, "")%>

The above statement is put on your aspx page, and it references the exact same code generated from the server to cause a postback for your panel. You can use it by putting it inside a function on the client side:

function fncUpdatePanel () {
    <%=ClientScript.GetPostBackEventReference(myUpdatePanel, "")%>;
}

Then you can attach that function to any event on your page (even a mouseover event). This example uses a server side to attach the event:

myUpdatePanel.attributes('onmouseover', 'fncUpdatePanel()')

edited Jul 28, 2011 at 16:41

answered Jul 28, 2011 at 8:56

rkw

7,2974 gold badges28 silver badges39 bronze badges

3 Comments

Fer Over a year ago

Can you explain in detail? i need to trigger panel in javascript code. your code seems to be in server side?

Jeff LaFay Over a year ago

This doesn't work because GetPostBackEventReference is for postbacks not async post backs. I'm trying to use GetCallbackEventReference instead but not having any lucking passing it the correct control reference to make it work.

Denis G. Labrecque Over a year ago

Can't access ClientScript on a custom ascx control

Collectives™ on Stack Overflow

how to trigger updatepanel within a javascript function

2 Answers 2

5 Comments

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related