locked
button click event run from client side but, addEventListener not working RRS feed

  • Question

  • User-1471881183 posted

    hello there,

    im using a hosted payment page in my user control(web application project .net 4.7.2). the user control has UpdatePanel

    <script src="http://localhost/ClubMembersSite/js/LibGlobalPay/rxp-hpp.js"></script>
    <script type="text/javascript"> $(function () { $("#payServerButtonId").click(function () { //$("[id*=btnSubmit]").click(); alert('jq called'); var hppResponse = JSON.parse($('#MyHidden').val()); if (hppResponse != '') { RealexHpp.setHppUrl("https://pay.sandbox.realexpayments.com/pay"); RealexHpp.lightbox.init("payServerButtonId", "http://localhost/ClubMembersSite/correspondence/payment-receipt", hppResponse); return false; } else { return false; } }); }); </script> <asp:UpdatePanel ID="Updatepanel1" runat="server"> <ContentTemplate> <asp:HiddenField ID="MyHidden" runat="server" ClientIDMode="Static" /> ------------------------------------ --------------------------other server controls <asp:Button runat="server" ID="payServerButtonId" ClientIDMode="Static" /> </div> </ContentTemplate> </asp:UpdatePanel>

    the output should be when i click "payServerButtonId" then it has to open Hosted Payment Page there i have to feed some input data. so, when i click "payserverButtonId" then through jquery click function it will goto rxp-hpp.js  there the script seems below.

    Now the problem is, while click the button jquery function called shown alert box to then HPP is not open, when i click at second time then it is opening HPP popup. May i know why its not open at first click and what changes have to do for this issue? (hope im doing simple mistake but, dont know what!!)  Experts please suggest me

    init: function (idOfLightboxButton, merchantUrl, serverSdkJson) {
    				//Get the lightbox instance (it's a singleton) and set the sdk json
    				var lightboxInstance = RxpLightbox.getInstance(serverSdkJson);
    
    				// Sets the event listener on the PAY button. The click will invoke the lightbox method
    				if (document.getElementById(idOfLightboxButton).addEventListener) {
    					document.getElementById(idOfLightboxButton).addEventListener("click", lightboxInstance.lightbox, true);
    				} else {
    					document.getElementById(idOfLightboxButton).attachEvent('onclick', lightboxInstance.lightbox);
    				}
    
    				if (window.addEventListener) {
    					window.addEventListener("message", internal.receiveMessage(lightboxInstance, merchantUrl), false);
    				} else {
    					window.attachEvent('message', internal.receiveMessage(lightboxInstance, merchantUrl));
    				}
    			}
    
    

    Wednesday, November 18, 2020 1:52 PM

All replies

  • User-474980206 posted

    we have no idea how the libraries you are calling work. but with the displayed code, there are several issues.

    the code:

    $("#payServerButtonId").click(function () {

    does not support update panels. the click is bound to a button that gets replaced by the update panel. this code should be tied the update panel load event. of use the "live" version

      $("#payServerButtonId").on("click", function () {

    also code in the click should probably not rn until the update panel has loaded. so again you should probably use the update panel load event, rather than a click event. the server side code could render this. 

    fortunately I haven't had to use webforms and update panels for over a decade now.

    Wednesday, November 18, 2020 7:52 PM
  • User1535942433 posted

    Hi winseealn@hotmail.com,

    As far as I think,when you click the button inside the updatepanel,the updatepanel will postback. After a postback has occured triggering the button again causes a postback, both Load and PreRenderComplete events fire but the click event is skipped.

    You could try putting UseSubmitBehavior="false" on your Button.

    Also,you could use like this:

    <script type="text/javascript">
        $(function () {
            $("body").on('click','#payServerButtonId',function(){
    }) }); </script>

    Best regards,

    Yijing Sun

    Thursday, November 19, 2020 3:28 AM
  • User-1471881183 posted

    hello yij sun thanks for your response.

    tried to use UseSubmitBehavior="false" but, no change

    also, the jquery code .

    is there any other waybelow, below is my compltete code

    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title>Payment:POC</title>
        <script src="https://code.jquery.com/jquery-3.5.0.js"></script>
        <script src="Scripts/LibGlobalPay/rxp-hpp.js"></script>
    
    
        <script type="text/javascript">
            $(document).ready(function () {
                $("#payButtonId").click(function () {
                    //alert("hi");
                    var hppResponse = JSON.parse($('#hdnJson').val());
                    if (hppResponse != '') {
                        alert(hppResponse);
                        RealexHpp.setHppUrl("https://pay.sandbox.realexpayments.com/pay");
                        RealexHpp.lightbox.init("payButtonId", "http://localhost/ClubMembersSite/correspondence/payment-receipt.aspx", hppResponse);
                        return false;
                    }
                    else {
                        return false;
                    }
                });
            });
        </script>
    
        <%--<script type="text/javascript">
            function ActualHpp() {
                alert("ActualHpp");
                var hppResponse = JSON.parse($('#hdnJson').val());
                if (hppResponse != '') {
                    alert(hppResponse);
                    RealexHpp.setHppUrl("https://pay.sandbox.realexpayments.com/pay");
                    RealexHpp.lightbox.init("payButtonId", "http://localhost/ClubMembersSite/correspondence/payment-receipt.aspx", hppResponse);
                    return false;
                }
                else {
                    return false;
                }
            }
    
        </script>--%>
    </head>
    <body>
    
    
        <form id="form1" runat="server">
            <asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
            <asp:UpdatePanel ID="Updatepanel1" runat="server" EnableViewState="true">
                <ContentTemplate>
    
                    <asp:HiddenField ID="hdnJson" runat="server" ClientIDMode="Static" />
                    <div>
                        <%--<input type="submit" id="payButtonId" value="Checkout Now" onclick="return false" />--%>
                        <input type="submit" id="payButtonId" value="Checkout Now" />
                        <asp:HiddenField ID="MyHidden" runat="server" Value="1" />
                    </div>
                </ContentTemplate>
            </asp:UpdatePanel>
        </form>
    </body>
    </html>
    

    Thursday, November 19, 2020 9:53 AM
  • User-1471881183 posted

    hello Bruce, thanks for your response.  i tried the way you suggested but, still on the second click only the payment popup comes in; below is my sample code

    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title>Payment:POC</title>
        <script src="https://code.jquery.com/jquery-3.5.0.js"></script>
        <script src="Scripts/LibGlobalPay/rxp-hpp.js"></script>
    
    
        <script type="text/javascript">
            $(document).ready(function () {
                //$("#payButtonId").click(function () {
                $("#payButtonId").on("click", function () {
                    //alert("hi");
                    var hppResponse = JSON.parse($('#hdnJson').val());
                    if (hppResponse != '') {
                        alert(hppResponse);
                        RealexHpp.setHppUrl("https://pay.sandbox.realexpayments.com/pay");
                        RealexHpp.lightbox.init("payButtonId", "http://localhost/ClubMembersSite/correspondence/payment-receipt.aspx", hppResponse);
                        return false;
                    }
                    else {
                        return false;
                    }
                });
            });
        </script>
    
        <%--<script type="text/javascript">
            function ActualHpp() {
                alert("ActualHpp");
                var hppResponse = JSON.parse($('#hdnJson').val());
                if (hppResponse != '') {
                    alert(hppResponse);
                    RealexHpp.setHppUrl("https://pay.sandbox.realexpayments.com/pay");
                    RealexHpp.lightbox.init("payButtonId", "http://localhost/ClubMembersSite/correspondence/payment-receipt.aspx", hppResponse);
                    return false;
                }
                else {
                    return false;
                }
            }
    
        </script>--%>
    </head>
    <body>
    
    
        <form id="form1" runat="server">
            <asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
            <asp:UpdatePanel ID="Updatepanel1" runat="server" EnableViewState="true">
                <ContentTemplate>
    
                    <asp:HiddenField ID="hdnJson" runat="server" ClientIDMode="Static" />
                    <div>
                        <%--<input type="submit" id="payButtonId" value="Checkout Now" onclick="return false" />--%>
                        <input type="submit" id="payButtonId" value="Checkout Now" />
                        <asp:HiddenField ID="MyHidden" runat="server" Value="1" />
                    </div>
                </ContentTemplate>
            </asp:UpdatePanel>
        </form>
    </body>
    </html>

    Thursday, November 19, 2020 10:00 AM
  • User-1471881183 posted

    when i place the button outside of update panel then payment popup comes in else no :(

    Thursday, November 19, 2020 10:01 AM
  • User-474980206 posted

    as I stated, most likely the button click event processing needs to be deferred until the update panel completes. moving the button outside disabled the update panel. either the update panels client library or use server code tied to the update panel to trigger events

    you probably should replace the update panel with a simple ajax call.

    Thursday, November 19, 2020 4:04 PM