Имеется фильтр товаров, при выборе например бренда отмечаю чекбокс и выполняется аякс запрос с перезагрузкой самого фильтра
, проблема в том что когда я отмечаю чекбокс после перезагрузки блока фильтра выпадающие чекбоксы обратно сворачиваются, мне нужно
что они не сворачивались, и при обновлении страницы вылетает блок с колличеством выбранных по бренду товаров, нужно чтобы полсе аякс запроса
вылетал только этот блок а не перезагружался весь блок с фильтром и последующим сворачиванием выпадающих чекбоксов
Вот привожу скрины для наглядности
$(function(){
$('#filterBlock').on('change', 'input', function(){
var action = $('#filterBlock form').attr('action');
$.post(
action+"?ajax=Y",
$('#filterBlock form').serialize(),
function(data){
$('#filterBlock').html(data);
},
'html'
);
});
});
<?if(!defined("B_PROLOG_INCLUDED") || B_PROLOG_INCLUDED!==true)die();?>
<?if(!$_REQUEST["ajax"]):?>
<?$this->SetViewTarget('filter');?>
<!--
<script type="text/javascript" src="/bitrix/templates/Sib_beta/components/bitrix/catalog/beta_catalog_new/gma/filter/.default/jquery-ui-1.10.3.custom/js/jquery-ui-1.10.3.custom.min.js"></script>
<link rel="stylesheet" href="/bitrix/templates/Sibi_beta/components/bitrix/catalog/beta_catalog_new/gma/filter/.default/jquery-ui-1.10.3.custom/css/custom-theme/jquery-ui-1.10.3.custom.min.css" />
-->
<link rel="stylesheet" href="/bitrix/templates/Sibi_beta/components/bitrix/catalog/beta_catalog_new/gma/filter/.default/jslider/css/jslider.css" />
<link rel="stylesheet" href="/bitrix/templates/Sib_beta/components/bitrix/catalog/beta_catalog_new/gma/filter/.default/jslider/css/jslider.plastic.css" />
<link rel="stylesheet" href="/bitrix/templates/Sibi_beta/components/bitrix/catalog/beta_catalog_new/gma/filter/.default/jslider/css/jslider.blue.css" />
<link rel="stylesheet" href="/bitrix/templates/Sibi_beta/components/bitrix/catalog/beta_catalog_new/gma/filter/.default/jslider/css/jslider.round.css" />
<link rel="stylesheet" href="/bitrix/templates/Sibi_beta/components/bitrix/catalog/beta_catalog_new/gma/filter/.default/jslider/css/jslider.round.plastic.css" />
<script type="text/javascript" src="/bitrix/templates/Sibi_beta/components/bitrix/catalog/beta_catalog_new/gma/filter/.default/jslider/js/jshashtable-2.1_src.js"></script>
<script type="text/javascript" src="/bitrix/templates/Sibi_beta/components/bitrix/catalog/beta_catalog_new/gma/filter/.default/jslider/js/jquery.numberformatter-1.2.3.js"></script>
<script type="text/javascript" src="/bitrix/templates/Sibi_beta/components/bitrix/catalog/beta_catalog_new/gma/filter/.default/jslider/js/jquery.dependClass-0.1.js"></script>
<script type="text/javascript" src="/bitrix/templates/Sibi_beta/components/bitrix/catalog/beta_catalog_new/gma/filter/.default/jslider/js/tmpl.js"></script>
<script type="text/javascript" src="/bitrix/templates/Sibi_beta/components/bitrix/catalog/beta_catalog_new/gma/filter/.default/jslider/js/draggable-0.1.js"></script>
<script type="text/javascript" src="/bitrix/templates/Sibi_beta/components/bitrix/catalog/beta_catalog_new/gma/filter/.default/jslider/js/jquery.slider.js"></script>
<div id="filterBlock">
<?endif?>
<!--<h3 style="padding:8px 0 3px 15px;"><?=GetMessage('IBLOCK_FILTER_TITLE')?></h3>-->
<form action="<?=$arResult["FORM_ACTION"]?>" method="get" id="formsubmit">
<?foreach($arResult["arrPrice"] as $name=>$arPrice):?>
<div class="propBlock ss" style="padding-top:14px;">
<h4 style="padding-left:15px"><span style="color:#000"><?=$arPrice["TITLE"]?></span></h4>
<div id="options" style="margin-left:15px;margin-bottom:10px;vertical-align:middle;">
<?=GetMessage("IBLOCK_FILTER_FROM")?> <input id="price" style="width:63px;padding:3px;" type="text" name="price[<?=$arPrice["ID"]?>][low]" value="<?=$_REQUEST["price"][$arPrice["ID"]]["low"]?$_REQUEST["price"][$arPrice["ID"]]["low"]:''?>" placeholder="<?=$arPrice["MIN_VALUE"]?>"/>
<?=GetMessage("IBLOCK_FILTER_TO")?> <input id="price2" style="width:63px;padding:3px;" type="text" name="price[<?=$arPrice["ID"]?>][high]" value="<?=$_REQUEST["price"][$arPrice["ID"]]["high"]?$_REQUEST["price"][$arPrice["ID"]]["high"]:''?>" placeholder="<?=$arPrice["MAX_VALUE"]?>"/>
<input id="Slider1" type="slider" value="<?=(int)$arPrice["MIN_VALUE"]?>;<?=(int)$arPrice["MAX_VALUE"]?>" name="price" style="display: none;">
</div>
<script charset="utf-8" type="text/javascript">
jQuery("#Slider1").slider({ from: <?=(int)$arPrice["MIN_VALUE"]?>, to: <?=(int)$arPrice["MAX_VALUE"]?>, step:500, smooth: true, round: 0, dimension: "& $", skin: "plastic",
onstatechange: function( value ){
var curVals = $('#Slider1').slider('calculatedValue').split(';');
$('#price').val(curVals[0]);
$('#price2').val(curVals[1]);
}
});
</script>
</div>
<?endforeach;?>
<ul id="iblock">
<?foreach($arResult["arrProp"] as $arProp):?>
<li><!--Брэнд-->
<div class="gg">
<h4><span><?=$arProp["NAME"]?></span></h4>
<?if(is_array($arProp["VALUE_LIST"])):?>
<ul class="ss" style="margin-left:0 !important;">
<?foreach($arProp["VALUE_LIST"] as $value):?>
<li>
<input class="in" id="param_<?=$arProp["CODE"]?>_<?=$value["VALUE"]?>" type="checkbox" name="param[<?=$arProp["CODE"]?>][]" value="<?=$value["VALUE"]?>"<?=in_array($value["VALUE"], $_REQUEST["param"][$arProp["CODE"]])?' checked="checked"':''?>/>
<label class="lab" for="param_<?=$arProp["CODE"]?>_<?=$value["VALUE"]?>"><?=$value["NAME"]?> (<?=$value["QUANTITY"]?>)</label>
</li>
<?endforeach;?>
</ul>
<?elseif($arProp["PROPERTY_TYPE"]=="N"):?>
<ul class="ss" style="margin-left:-16px;">
<li>
<div style="padding-top:5px;padding-left:14px;">
<?=GetMessage("IBLOCK_FILTER_FROM")?> <input type="text" style="width:63px;padding:3px;border: 1px solid #CCCCCC;
box-shadow: 0 0 2px #CCCCCC inset;
color: #555555;" id="sec1" name="num[<?=$arProp["CODE"]?>][low]" value="<?=$_REQUEST["num"][$arProp["CODE"]]["low"]?$_REQUEST["num"][$arProp["CODE"]]["low"]:''?>" placeholder="<?=$arProp["MIN_VALUE"]?>"/>
<?=GetMessage("IBLOCK_FILTER_TO")?> <input type="text" style="width:63px;padding:3px;border: 1px solid #CCCCCC;
box-shadow: 0 0 2px #CCCCCC inset;
color: #555555;" id="sec2" name="num[<?=$arProp["CODE"]?>][high]" value="<?=$_REQUEST["num"][$arProp["CODE"]]["high"]?$_REQUEST["num"][$arProp["CODE"]]["high"]:''?>" placeholder="<?=$arProp["MAX_VALUE"]?>"/>
</div>
<div id="slider-range2"></div>
</li>
</ul>
<?else:?>
<ul>
<li>
<input id="param_<?=$arProp["CODE"]?>" type="text" value="<?=$_REQUEST["param"][$arProp["CODE"]]?>" name="param[<?=$arProp["CODE"]?>]"/>
</li>
</ul>
<?endif;?>
</div>
</li>
<?endforeach;?>
<?foreach($arResult["arrAddProp"] as $key=>$arProp):?>
<li>
<div class="gg">
<h4><span><?=$arProp["NAME"]?></span></h4>
<?if(is_array($arProp["VALUE_LIST"])):?>
<ul class="ss" style="margin-left:0 !important;">
<?foreach($arProp["VALUE_LIST"] as $name=>$count):?>
<li>
<input class="in" id="props_<?=++$k?>" type="checkbox" name="props[<?=$key?>][]" value="<?=$name?>"<?=in_array($name, $_REQUEST["props"][$key])?' checked="checked"':''?>/>
<label class="lab" for="props_<?=$k?>"><?=$name?> (<?=$count?>)</label>
</li>
<?endforeach;?>
</ul>
<?endif;?>
</div>
</li>
<?endforeach;?>
</ul>
<div class="buttons">
<input id="filterButon" type="submit" value="<?=GetMessage('IBLOCK_SET_FILTER')?>" name="set_filter"/>
<input type="hidden" value="Y" name="set_filter"/>
<input id="filterButon2" type="submit" value="<?=GetMessage('IBLOCK_DEL_FILTER')?>" name="del_filter"/>
</div>
</form>
<script>
$(document).ready(function(){
$( '#iblock > li > div > ul.ss' )
.hide()
.click(function( e ){
e.stopPropagation();
});
$('#iblock > li ').toggle(function(){
$(this).css('background-position', '-24px 14px').find('ul.ss').slideDown();
}, function(){
$( this ).css('background-position', '5px -15px').find('ul.ss').slideUp();
});
});
$(document).ready(function(){
$( '#menu > li > ul' )
.hide()
.click(function( e ){
e.stopPropagation();
});
$('#menu > li').toggle(function(){
$(this)
.css('background-position', 'right -20px')
.find('ul').slideDown();
}, function(){
$( this )
.css('background-position', 'right top')
.find('ul').slideUp();
});
});
</script>
<?if(!$_REQUEST["ajax"]):?>
</div>
<?$this->EndViewTarget();?>
<?else:?>
<div class="filterCount" id="clickme">
<span class="ecke"></span>
<?=str_replace('#COUNT#', $arResult["ELEMENT_COUNT"], GetMessage("ELEMENT_COUNT"))?> <a href="#" onclick="$('#formsubmit').submit();">Показать</a></div>
<script>
$(document).ready(function() {
$('#clickme').load(function() {
$('#clickme').fadeOut('slow').oneTime(1000, function() {
$(this).parent("#clickme").hide();
};
});
}); </script>
<?endif?>
Коротко словами: после аякс запроса чтобы не перезагружался блок с фильтром а вылетал только блок с выбранными элементами
т.е чтобы не сворачивались чекбоксы, а оставались отмеченными и не свернутыми при проставлении галочки
