Question

我在MVC应用程序上工作，我必须在单击按钮时隐藏按钮，并在ajax请求完成时显示。但是在所有请求完成后，该按钮处于隐藏状态。下面是我尝试过的。

<input type="button" id="btnCalculateAndSave" value="Calculate & Save" style="float: right" />

下面是jQuery点击，甚至还具有调用同一按钮点击的ajax函数。

$("#btnCalculateAndSave").on("click", function (e) {
  $("#btnCalculateAndSave").hide();

  //Several lines for validation

  $.ajax({
    url: '@Url.Action("myControllerFunction", "myController")',
    type: "GET",
    async: false,
    cache: false,
    dataType: "JSON",
    data: { 
      "p1": v1, 
      "p2": v2
    },
    success: function(result) {
    }  
  }
}
});

因为我必须防止多次单击按钮事件。所以按钮是隐藏的，但是在ajax的所有过程都发生之后，即使按钮隐藏代码也位于jQuery click事件的第一行中。

Answer 1

希望这会有所帮助

    var pr;
    $("#btnCalculateAndSave").on("click", function (e) {
              var btn = $(this)
              btn.hide()   

             if(pr)
                 pr.abort() //Prevent multiple time click

            //Several lines for validation
            pr =    $.ajax({
            url: '@Url.Action("myControllerFunction", "myController")',
            type: "GET",
            async: false,
            cache: false,
            dataType: "JSON",
            data: { 
              "p1": v1, 
              "p2": v2
            },
            success: function(result) {
                     btn.show()
            }  
          }
        }
    });

Answer 2

您可以使用以下内容：

<?xml version="1.0" encoding="utf-8"?>

Answer 3

请在hide函数中编写主要代码。

Route::get('/checkSession',function(){
    $items= ['item1','item2'];
    session()->push('cart',["customKey" => $items ]);
    foreach (Session::get('cart') as $key){
        //dump($key["customKey"]);
        foreach ($key["customKey"] as $key1 ) {
            dump($key1);
        }
    }
    session()->forget('cart');
    session()->flush('cart');
    dd("STOP");
});

下面是您的主要代码。

$("#btnCalculateAndSave").hide(function(){ /* Main Code */ });

Answer 4

您首先通过$("#btnCalculateAndSave").hide();隐藏了该按钮，但是没有删除按钮后缀的说明。

根据您的问题，您需要在ajax调用完成后显示按钮。因此，您可以做的是，放入代码以使ajax成功显示按钮

$("#btnCalculateAndSave").on("click", function (e) {
   $("#btnCalculateAndSave").hide();
   .....
   //Several lines for validation
   .....
   $.ajax({
                    url: '@Url.Action("myControllerFunction", "myController")',
                    type: "GET",
                    async: false,
                    cache: false,
                    dataType: "JSON",
                    data: { "p1": v1, "p2": v2},
                    success: function (result) { 
//Add this line
$("#btnCalculateAndSave").show();  

                            }  
                        }
                    }
            });

为什么在单击jQuery按钮的第一行之前先调用AJAX函数，为什么？

4 个答案: