Click here to Skip to main content
15,868,141 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
See more:
Hello ,
I have a input type button and I want to call ajax after button click but ajax event is not fired . When I change input type to submit click event works but page reloads and ajax call is not called . Please help me to solve this issue .

CODE


<div class="modal-body" style="margin-left:-140px;">
      <div class="panel panel-default">
        <div class="panel-body">
            <form id="PortfolioRuleOrderForm">
            <table class="inputForm" cellspacing="0" cellpadding="0" border="0" style="width: 100%; height: 100%; table-layout: fixed">
                <thead>
                    <tr height="18">
                        <td>Portfolio Rule Order</td>
                    </tr>
                </thead>
                <tfoot>
                    <tr>
                        <td style="vertical-align: middle">
                        
                    <table>
                        <tfoot>
                        <tr>
                            <td>Rule no:</td>
                            <td>
                                <input type="Text" id="txtRule_No" name="txtRule_No" value="<%= long.Parse(Request.QueryString["RuleNo"]) %>"/>
                                <input type="hidden" id="MaxRule_No" name="MaxRule_No" value="<%= long.Parse(Request.QueryString["MaxRuleNo"]) %>"/>
                                <input type="hidden" id="PortfolioID" name="PortfolioID" value="<%= long.Parse(Request.QueryString["PortfolioID"]) %>"/>
                                <input type="hidden" id="RuleID" name="RuleID" value="<%= long.Parse(Request.QueryString["RuleID"]) %>"/>
                            </td>
                            <td>
                                <input type="button" id="Firstbtn" runat="server" value="|<" OnClick="Click_btnFirst()"/>
                                <input type="button" id="Prevbtn" runat="server"  value="<" OnClick="Click_btnPrev()"/>
                                <input type="button" id="Nextbtn" runat="server"  value=">" OnClick="Click_btnNext()"/>
                                <input type="button" id="Lastbtn" runat="server"  value=">|" OnClick="Click_btnLast()"/>
                            </td>
                        </tr>
                        </tfoot>
                    </table>
                        </td>
                    </tr>
                    <tr class="footerrow" height="24">
                        <td align="right">
                            <input class="button" id="btnSubmit" type="button" value="OK" name="OK"   />    
                            <input class="button" id="btnCancel" onclick=" top.window.close();" type="button"
                                value="Cancel" name="btnCancel" data-dismiss="modal"/></td>
                    </tr>
                </tfoot>
            </table>
        </form>       
        </div>
      </div>
    </div>



JavaScript
<script>
        
        function Click_btnFirst() {
           
            document.getElementById("txtRule_No").value = "1";
        }

        function Click_btnPrev() {
            
            if (document.getElementById("txtRule_No").value > 1)
            {
                
                document.getElementById("txtRule_No").value = document.getElementById("txtRule_No").value-1;
            }
        }

        function Click_btnNext(){
            
            if (document.getElementById("txtRule_No").value < document.getElementById("MaxRule_No").value)
            {
                
                document.getElementById("txtRule_No").value = parseInt(document.getElementById("txtRule_No").value) + parseInt(1);
            }
        }

        function Click_btnLast() {
            
            document.getElementById("txtRule_No").value = document.getElementById("MaxRule_No").value;
        }

            
        $('#btnSubmit').on('click', function (e) {
            alert("ok");
            $.ajax({
                url: "/WEB/ups/order.aspx/ruleorder_change",
                type: "POST",
                dataType: 'json',
                contentType: 'application/x-www-form-urlencoded; charset=UTF-8',
                
                data: { txtRule_No: txtRule_No, MaxRule_No: MaxRule_No, PortfolioID: PortfolioID, RuleID: RuleID },
                success: function () {
                    alert("Done!");
                    alert(data);
                    console.log('success', data);
                },
                failure: function () {
                    alert("Failure!");
                }
            });
            
        });
    </script>



$('#btnSubmit') on click button event ajax is not working at all . Can anyone tell me what am I doing wrong? Please help

What I have tried:

Tried with to change type = "button" to type ="submit" but the the page is reloading

<input class="button" id="btnSubmit" type="submit" value="OK" name="OK"   /> 
Posted
Comments
Richard Deeming 25-Nov-20 8:24am    
Check your browser's developer console for errors. Perhaps you forgot to include the jQuery script reference in your page?
Member 14362033 25-Nov-20 9:37am    
I checked network tab and console tab . This ajax call is not showing in network or console tab at all . I am getting alert but after that ajax call is not firing at all
Richard Deeming 25-Nov-20 10:25am    
Based on the code you've posted, you have references to a lot of undefined variables in your data object. Perhaps start by fixing that.
Member 14362033 26-Nov-20 6:41am    
all variables are defined and I'm getting these values if I alert the values . The thing is ajax call is not running and I don't know why it's not showing any error in console log

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900