javascript function make a full postback in an update panel

Question

I call the following javascript function in an update panel which refresh my page although it is in an update panel!!

<script type="text/javascript" language="javascript">
    function get_emp_num(source, eventArgs) {
        var txt_emp_num = "<%= txt_RequestEmpNum.ClientID %>";
        document.getElementById(txt_emp_num).value = eventArgs.get_value();
        __doPostBack("<%=txt_RequestEmpNum.ClientID %>");
    }

    function get_person_num(source, eventArgs) {
        var txt_person_num = "<%= txt_RequestPersonNum.ClientID %>";
        document.getElementById(txt_person_num).value = eventArgs.get_value();
        __doPostBack("<%=txt_RequestPersonNum.ClientID %>");
    }

</script>

---

I don't want this script to change the partial post back behavior of my update panel .how to do that ?

Answer 1

What is your postback control and is it setup as an async trigger on the update panel? Based on the code you posted, I suspect that txt_RequestEmpNum and txt_RequestPersonNum are text boxes. Those controls don't natively support postbacks. What you need is a hidden button on the page that your javascript will "click" to send the postback. Something like this:

<asp:UpdatePanel ID="UpdatePanel2" runat="server">
    <Triggers>
        <asp:AsyncPostBackTrigger ControlID="Button1" />
    </Triggers>
    <ContentTemplate>
        <asp:TextBox ID="txt_RequestEmpNum" runat="server" />
        <asp:TextBox ID="txt_RequestPersonNum" runat="server" />
    </ContentTemplate>
</asp:UpdatePanel>
<div style="display: none;">
    <asp:Button id="Button1" runat="server" OnClick="Button1_Click" />
</div>

<script>
    function get_emp_num(source, eventArgs) {
        // I am unsure what your intent was with the code here so I removed it
        __doPostBack("<%=Button1.UniqueID %>", "");
    }

    function get_person_num(source, eventArgs) {
        // I am unsure what your intent was with the code here so I removed it
        __doPostBack("<%=Button1.UniqueID %>", "");
    }

    function refresh_using_jquery() {
        __doPostBack($('#<%=Button1.ClientID %>').attr('name'), '');
    }
</script>

Answer 2

If you're looking to not do a full page postback then you'll want to implement a solution that uses AJAX. I would go with using jQuery because it makes using AJAX somewhat easier (in my opinion, anyway).