Моя проблема: я использую выбранный плагин. 2 коробки выбора. При выборе первого варианта выбора, во втором поле выбора значения фильтруются. это работает отлично. Но когда я перезагружаю страницу с помощью ajax, первое значение поля выбора выбрано правильно, но выглядит так, как будто оно не активно, оно не может отфильтровать значение второго поля выбора. Я пытался смоделировать событие изменения, пытался вызвать окно выбора, но мне не повезло.
Я покажу некоторый исходный код:
Ajax Call:
function loadContent(url){
var slidersGetUrl = "&slider1="+slider1Val1+"&slider2="+slider1Val2+"&slider3="+slider1Val3+"&slider4="+slider1Val4+"&slider5="+slider1Val5+"&slider6="+slider1Val6;
var planUrl = "&plan="+selectedplan;
var paymentPeriodUrl = "&billing="+selectedpaymentperiod;
var cpUrl = "&cp="+selectedcp;
var osUrl = "&os="+selectedos;
$.ajax({
type: "get",
url: "aa/aa/aa/aa.php" + url + slidersGetUrl + planUrl + paymentPeriodUrl + cpUrl + osUrl,
//url: url,
beforeSend: function(){
$('#plans-block').html('loading...');
},
success: function(data){
$('#plans-block').html("");
$('#plans-block').html(data);
//$('#ajax-wrap').slideToggle();
//console.log(data);
},
error: function(){
$('#plans-block').html("Failed. Please reload the page!");
}
});
}
Тогда у меня есть большой блок HTML в AJAX называется файл, где сделаны поля выбора
Это мое поле выбора 1:
<select id="cp" name="cp">
<option value="-1"><?php echo $_LANG['none'] ?></option>
<?php
foreach ($controlpanels as $cp):
$os_price = (float) $cp['price'];
if ($os_price < 0)
continue;
?>
<option data-price="<?php echo $os_price; ?>" data-bc="<?php echo $cp['bc']; ?>" value="<?php echo $cp['id']; ?>" <?php echo ($cp['id'] == $_GET['cp'] ? 'selected' : '') ?>><?php echo $cp['name']; ?></option>
<?php endforeach; ?>
</select>
Тогда у меня есть JavaScript
$(document).ready(function () {
...
$('#cp').change(function () {
$($(this)).children().each(function (i, j) {
if ($(this).val() > 0)
order.removeAdittionalProduct($(this).val());
});
if ($(this).val() > 0)
updatePrice(
order.addAdittionalProduct($(this).val(), $(this).children('[value="' + $(this).val() + '"]').attr('data-bc'), $(this).children('[value="' + $(this).val() + '"]').attr('data-price'), {}, {})
);
else
updatePrice(order.getPrice().toFixed(2));
});
$("#cp").chosen({disable_search_threshold: 10, width: "245px"});
$('#cp').on('change', function () {
if ($("#cp").val() != -1) {
// Removing all none centos from OS
$("#os option").each(function ()
{
if ($(this).val() != -1)
{
if ($(this).text().toLowerCase().indexOf("centos") == -1)
$(this).remove();
}
});
$('#os').val('-1');
$('#os').trigger('change');
$('#os').trigger("liszt:updated");
$('#cp_chzn .chzn-single span').css("color", "#444444");
}
else {
// Remove all but first
$('#os option:gt(0)').remove();
// Add all default OS
$.each(os_arr, function (i, elem) {
$("#os").append('<option data-price="0.00" value="' + elem['id'] + '">' + elem['name'] + '</option>');
});
$('#os').val('-1');
$('#os').trigger('change');
$('#os').trigger("liszt:updated");
$('#cp_chzn .chzn-single span').css("color", "#8d9aab");
}
});
...
});
Это изображение, когда я вручную изменил значение в первом окне выбора, все работает как надо.
Это изображение после вызова ajax, когда html снова был загружен. На рисунке вы можете видеть, что в первом поле выбора значение выбора серое, а в первом изображении это значение черного цвета, поэтому я хочу, чтобы после вызова ajax значение не было $('#cp').trigger('change').
затронут, и во втором окне выбора вы можете увидеть, что есть больше опций, что означает, что значения не были отфильтрованы.
Я пробовал много вещей в других постах, которые мне предлагали, но это не работает.
Я только что проверил некоторый код в окне консоли, и он работал так:
$('#cp').change();
$('#cp').on('change', function () {
$('#cp').val('129');
});
Но когда я добавляю его в код своей страницы, он не работает.
Это не работает либо:
$('#cp').trigger('change');
$('#cp').trigger("liszt:updated");
ОБНОВИТЬ
Проблемы решены. $('#cp').val('<?php echo $_GET['cp']; ?>').trigger("change");
эта функция должна быть в нижней части функции готовности документа.
Попробуйте использовать делегированные обработчики событий, прикрепленные к частям страницы которые не меняются:
$(document).on('change', '#cp', function () {
$('#cp').val('129');
});
Делегированное событие работает путем прослушивания событий, восходящих к неизменному предку. document
по умолчанию, если нет ничего удобного / ближе. Это затем применяет селектор jQuery к элементам в цепочке пузырьков. Это затем вызывает функцию для любого соответствующего элемента, вызвавшего событие. Это означает, что элемент не должен совпадать до времени события, а не после создания обработчика события.
Примечание: не используйте 'body'
для делегированных событий, так как стилизация может привести к тому, что тело будет иметь нулевую высоту, и события могут не произойти! Всегда используйте document
как запасной вариант.
Других решений пока нет …