У меня есть именованная вспомогательная функция, которая вызывается из различных bootstrap модальных windows, которые являются «помощниками по покупкам» на веб-сайте, над которым я работаю. Все, что делает эта функция - это инициирует AJAX вызов страницы PHP, которая отправляет обратно JSON кодированный массив. Это работает!
То, что не работает, - это то, что, как я думал, будет самой простой частью функции: при вызове функции она перекрывает экран вращателем (эта часть работает), а когда сделано с помощью вызова AJAX, которое должно скрывать счетчик. Это та часть, которая не работает, и я не могу понять, почему. Я думаю, что смотрю на это так долго, что мой мозг отказывается работать. Вот код:
function getDetailHandler(prodType, id, element) { // Takes type of product, ID number, and element name)
$('#spinner').modal('show');
$.ajax({
url: '/productHelper.php?type=' + prodType + '&id=' + id,
type: 'get',
dataType: 'JSON',
success: function(response) {
var len = response.length;
for (var i = 0; i < len; i++) {
var id = response[i].id;
var size = response[i].size;
var msrp = response[i].msrp;
var retail = response[i].retail;
var description = response[i].description;
var name = response[i].name;
if (prodType == 2) {
var tr_str = description;
} else if (prodType == 3) {
var tr_str = name + ' added';
} else {
var tr_str = size + ' added';
}
}
$('#spinner').modal('hide');
$('#' + element + '').append(tr_str);
}
});
};
Меня сбивает с толку то, что каждая другая часть функции работает отлично. Он просто отказывается скрыть модал в конце. Очевидно, это где-то моя вина, но я действительно не вижу, что я делаю неправильно.
ON EDIT: вот вызывающая функция:
$('#controlForm').submit(function(e) {
var sum = 0;
e.preventDefault();
$('#addControl').show();
$('#addControl').append($(document.activeElement).attr('value'));
$('#addControl').append('<span class="addLightText" style="display:inline";></span><a href="#removeControl" class="removeControl"><i class="fa fa-times-circle fa-2x" name="removeControl" title="Remove Control From Configuration" style="color: Tomato; position: relative;margin-left: 10px; top: 5px;"></i></a>');
$('#addControl').data('price', $(document.activeElement).attr('value'));
$('#addControl').attr('data-idnumber', $(document.activeElement).attr('id'));
$('#addControl').attr('data-price', $(document.activeElement).attr('value'));
$('#addToCart').append('<input type="hidden" name="controlID" value="' + $(document.activeElement).attr('id') + '" />');
getDetailHandler(3, $('#addControl').attr('data-idnumber'), 'controlUpdated');
doSum();
$('#addControlButtonElement').hide();
$('#addControlModal').modal('toggle');
});
СЕЙЧАС ИСПРАВЛЕНО Я закончил модификацию функции, чтобы более плотно перехватить функции запуска и остановки Ajax, используя то, что я нашел здесь : { ссылка }. Это работает как шарм !!
Спасибо всем за ваше время:)
function getDetailHandler(prodType, id, element) {
$.ajax({
url: '/productHelper.php?type='+prodType+'&id='+id,
type: 'get',
dataType: 'JSON',
success: function(response){
var len = response.length;
for(var i=0; i<len; i++){
var id = response[i].id;
var size = response[i].size;
var msrp = response[i].msrp;
var retail = response[i].retail;
var description = response[i].description;
var name = response[i].name;
if(prodType == 2){
var tr_str = description;
} else if(prodType == 3) {
var tr_str = name + ' added';
} else {
var tr_str = size + ' added';
}
$('#'+element+'').append(tr_str);
}
}
});
};
$(document).ajaxSend(function(event, request, settings) {
$('#spinner').show();
});
$(document).ajaxComplete(function(event, request, settings) {
$('#spinner').hide();
});