Блог

У меня есть кнопка внутри модального всплывающего окна, и я хочу сделать AJAX-запрос после нажатия этой кнопки, однако AJAX-запрос не запускается.

Когда я меняю кнопку на type="submit" событие щелчка, оно срабатывает, но страница перезагружается, и вызов AJAX отменяется. Я попытался остановить перезагрузку страницы с e.prevenDefault() помощью, но это останавливает каждый шаг. На вкладке консоль или сеть ошибок нет.

 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;
}

function Click_btnSubmit(e) {
        //e.preventDefault();
        alert('!!@@##');
        var valdata = $("#PortfolioRuleOrderForm").serialize();
        alert(valdata);
        //console.log();
        $.ajax({
            url: '/WEB/ups/Order.aspx/order_change',
            type: "POST",
            dataType: 'json',
            contentType: 'application/json; charset=UTF-8',
            data: valdata,
            async: false,
            //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!");
            }
        });
        //console.log();
        //e.preventDefault();
       
    }
 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<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" OnClick="Click_btnSubmit()" />
                <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>