Функция AJAX вызывается первой еще до нажатия первой строки кнопки jQuery, почему?
Я работаю над приложением 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.
добавить $("#btnCalculateAndSave").show(); внутри успеха
Я написал шоу после всего процесса, но до того, как кнопка вызова ajax не скрывается.
Во-первых, откуда вы звоните show()? Во-вторых, удалите async: false, так как это очень плохая практика.
Да, забыл поставить $("#btnCalculateAndSave").show(). Думаю стоит поставить complete: function(result) {$("#btnCalculateAndSave").show()}. Это покажет кнопку после завершения вашего запроса ajax.
Возможно, вам нужна стратегия обратного вызова, вызов ajax должен срабатывать только тогда, когда кнопка скрыта. Затем вы можете показать кнопку обратного вызова успешного вызова ajax.
Проблема не в том, как отобразить кнопку, а в том, что у меня проблемы, почему она не скрывается перед вызовом функции ajax, как в последней, но скрывается даже в первой строке, которая работает, наконец, после завершения всего процесса.
@SurajKumar Ну, ваш код наверняка спрятал бы это, $(this).hide(). Кстати, я предполагаю, что у вас есть только 1 элемент с этим идентификатором.
Он скрывается, но после нескольких строк кода, включая проверку и вызов функции ajax. Я хочу ограничить многократное нажатие, скрыв кнопку.
@SurajKumar, почему бы тебе тогда просто не отключить кнопку?
Это также не работает при запуске, так как мне нужна функциональность, например, подождите...
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 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();
}
}
}
});
Вы также можете передать функцию обратного вызова следующим образом: element.hide({done: some_function}); чтобы код выполнялся после того, как кнопка скрыта.
Прошу вас посмотреть мои комментарии.
попробуйте, если вы можете скрыть его перед щелчком, или проверьте, не переопределяет ли какой-либо другой css display:none, установленный jquery hide(), или попробуйте $("#btnCalculateAndSave").css("display", "none !important" :);
@UsmanAfzal В текущем примере из OP не было бы причин делать это.
Как реализовать обратный вызов, как в вашем комментарии?
Надеюсь это поможет,
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()
}
}
}
});
если скрытие не работает, используйте btn.css('cssText','display:none !important'), может быть проблема css, я думаю
Вы можете использовать что-то вроде этого:
$("#btnCalculateAndSave").on("click", function (e) {
$("#btnCalculateAndSave").hide(0, ajaxCall);
//.....
//Several lines for validation
//.....
});
function ajaxCall() {
$.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();
}
});
}
Моя проблема в том, что кнопка скрывается после выполнения всех приведенных ниже кодов. Но ваш ответ: как показать кнопку после скрытия? Не мои требования.
Это сначала скроет кнопку, а затем инициирует вызов ajax в качестве обратного вызова. Кнопка будет отображаться только после завершения запроса. Я думаю, это то, чего вы пытались достичь.
Пожалуйста, напишите основной код внутри функции скрытия.
$("#btnCalculateAndSave").hide(function(){ /* Main Code */ });
Ниже приведен ваш основной код.
$("#btnCalculateAndSave").on("click", function (e) {
$("#btnCalculateAndSave").hide(function(){
$.ajax({
url: '@Url.Action("myControllerFunction", "myController")',
type: "GET",
async: false,
cache: false,
dataType: "JSON",
data: {
"p1": v1,
"p2": v2
},
success: function(result) {
}
}
});
});
});
Я не вижу никакого кода, который говорит, что кнопка снова видна. не будет ли
success: function (result) { $("#btnCalculateAndSave").show()}