Jqeury กับ Ajax ของ asp.net ไม่ทำงาน

เพื่อนๆ ที่เขียน ASP.NET โดยใช้ AJAX ที่เป็น Controls สำเร็จรูปของ .NET   อาจเคยเจอปัญหาความไม่เข้ากันของทั้งสองค่ายกันบ้างนะครับ  ปัญหาที่เจอ ตัวอย่างเช่น Code ด้านล่างเป็นการใช้ Jquery สำหรับบังคับ input txet ให้กรอกข้อมูลได้เพียงตัวเลขเท่านั้น

  <script>

        $(document).ready(function () {
                ForceNumberTextBox();
        });


        function ForceNumberTextBox() {
            $("#<%= txtItem.ClientID %>").ForceNumericOnly();
            $("#<%= txtDiscount.ClientID %>").ForceNumericOnly2Digit();
        }
    </script>

(Code ด้านบนเป็น Code อย่างย่อไม่สามารถทำงานได้จริงคับ)

ซึ่งตามปกติแล้ว  Code ส่วนนี้ก็สามารถทำงานได้ตามปกติ  แต่เมื่อ เพิ่ม Controls ของ ASP.NET เข้าไป

 <asp:ScriptManager ID="ScriptManager1" runat="server">
    </asp:ScriptManager>
    <asp:UpdatePanel ID="UpdatePanel1" runat="server">
        <ContentTemplate>
	.
	.
	.
	.		
        </ContentTemplate>
    </asp:UpdatePanel>

มันทำให้เกิด Effect ของสอง  platform  Effect นี่จะแสดงอาการโดย  Script ดังกล่าวจะทำงานได้ถูกต้องเพียงครั้งแรกเพียงครั้งเดียวหลังจากการ Post Back เพียง 1 ครั้ง Script Jquery จะไม่ทำงานอีกเลย   ถ้าหากใครก็ตามที่เจอปัญหาแบบนี้ วันนี้ผมมีทางออกครับ   โดยแก้ Script Jquery สะใหม่ให้เหมือนดัง Code ด้านล่าง

<script>

        $(document).ready(function () {

            Sys.WebForms.PageRequestManager.getInstance().add_endRequest(EndRequestHandler);
            function EndRequestHandler(sender, args) {

                ForceNumberTextBox();

            }
        });


        function ForceNumberTextBox() {

            $("#<%= txtItem.ClientID %>").ForceNumericOnly();
            $("#<%= txtDiscount.ClientID %>").ForceNumericOnly2Digit();

        }
    </script>

โดย script นี้เป็นตัวสั่ง ให้ เรียก function ForceNumberTextBox(); ทุกครั้งที่ จบการ Request ของ Ajax .NET เท่านี้ ทั้งสอง platform ก็สามารถทำงานร่วมกันได้แล้วครับ หวังว่าคงมีประโยชน์บ้างนะครับ

Loading Facebook Comments ...