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?

Answer 1

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>

Answer 2

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()')