Javascript-форум (https://javascript.ru/forum/)
-   Элементы интерфейса (https://javascript.ru/forum/dom-window/)
-   -   как добавить исключение в методе .on() для некоторых потомков выбранного селектора? (https://javascript.ru/forum/dom-window/79655-kak-dobavit-isklyuchenie-v-metode-dlya-nekotorykh-potomkov-vybrannogo-selektora.html)

Oughtem 05.03.2020 11:24

как добавить исключение в методе .on() для некоторых потомков выбранного селектора?
 
<div class="large-container" style="text-align:center;">
    <form action="<?php echo  Url::toRoute(['categories/index', 'alias'=>$mainCategory->alias,'mod'=>$params['mod']]) ?>" style="width:90%;" id="filterByParams" pjax-container>
        <div class="container-tab">
            <ul class="side-filter__list accordion-tabs">
                <?php if (!empty($productParams) OR (!empty($providers))): 
                $i = 0;
                $maxCount = SystemSetting::getMaxCountFiltersCats();

                foreach ($productParams as $pName => $param):?>
                <li class="tab-head-cont">
                  <a href="#" onclick="return false;" class="side-filter__item filter-param"><?= $pName;?></a>
                      <section>
                      <li class="side-filter__item">
                        <?php
                        asort($param['value']);
                        foreach ($param['value'] as $v) {
                            $seo_name = $seoProps->get($pName,$v);
                            $cheked =  (!empty($productParam) && in_array($seo_name,explode('_',$productParam))) ? true : false;
                            echo Html::input('checkbox', 'productParam[]', $seo_name, ['id' => 'productParam-'.$pName.'~'.$v, 'checked' => $cheked]);
                            echo Html::label(Html::tag('span', null).$v, 'productParam-'.$pName.'~'.$v);
                            $cheked = false;
                        }
                        ?>
                      </li>
                      </section>
                  <?php 
                    $i++;
                    if($i >= $maxCount) break;
                  ?>
                </li>
                <?php endforeach; ?>
                <?php endif; ?>

                <?php  if(!empty($providers)): ?>
                <li class="tab-head-cont">   
                    <a href="#" onclick="return false;"  class="side-filter__item filter-param"><?=mb_convert_case(yii::t('app','providers'), MB_CASE_TITLE, "UTF-8");?></a>
                    <section>
                        <li class="side-filter__item">
                        <?php 
                        foreach ($providers as $provider) {
                            $chek = (in_array($provider->id, $provIds)) ? true : false;
                            echo Html::input('checkbox', 'provider[]', $provider->id, ['id' => 'provider-'.$provider->id, 'checked' => $chek]);
                            echo Html::label(Html::tag('span', null).$provider->providerProfile->name_company, 'provider-'.$provider->id);
                            $chek = false;
                        }; 
                        ?>
                        </li>
                    </section>
                </li>  
                <?php endif; ?>
                <?php if (!$session->isActive){
                    $session = Yii::$app->session;
                    $session->open();
                } 
                $sortProducts = new SortProducts();
                ?>
                <select class="prod-head__select" onchange="window.location.href='/catalog-sort?type=' + this.value">
                    <?php foreach ($sortProducts->getTypes() as $type => $options) {?>
                        <option <?php if ($sortProducts->isActive($type)) echo 'selected' ?> value="<?= $type ?>"><?= $options['title'] ?></option>
                    <?php } ?>
                </select>

            </ul>
        </div>
    </form>
</div>

и скрипт
$(document).on('submit', 'form[pjax-container]', function(event) {
    /*$.pjax.defaults = {
        scrollTo: false,
    };
    $.pjax.submit(event, '#pjax-container')*/
    event.preventDefault();
    if($(this).serialize() == ''){
        location.href = THIS_URL;
    }else{
        var filterurl = $(this).serialize();
        if(filterurl.split('productParam%5B%5D=').length>1){
            filterurl = filterurl.split('productParam%5B%5D=');
            filterurl = filterurl.join('_');
        }
        if(filterurl.split('provider%5B%5D=').length>1){
            filterurl = filterurl.split('provider%5B%5D=');
            for (var i = 1; i<filterurl.length; i++){
                 filterurl[i] = 'provider-'+filterurl[i]
            }  
            filterurl = filterurl.join('_');
        }     
        location.href= THIS_URL+'/filter/'+filterurl.substring(1).replace(/&/g,'');
    }

скрипт корректирует урлы на которые посылаются запросы из формы. Это действие мне необходимо сохранить для элементов, находящихся в <li>...</li>. После <li> у меня идёт блок
<?php if (!$session->isActive){
    $session = Yii::$app->session;
    $session->open();
    } 
    $sortProducts = new SortProducts();
?>
<select class="prod-head__select" onchange="window.location.href='/catalog-sort?type=' + this.value">
    <?php foreach ($sortProducts->getTypes() as $type => $options) {?>
         <option <?php if ($sortProducts->isActive($type)) echo 'selected' ?> value="<?= $type ?>"><?= $options['title'] ?></option>
    <?php } ?>
</select>

к которому не надо применять действие скрипта. В этом блоке при событии onchange мне надо изменить переменную в сессии, закинув её по адресу
"/catalog-sort?type=' + this.value"
. Но это не получается сделать, т.к. вышеприведенный скрипт почему-то влияет на
onchange="window.location.href='/catalog-sort?type=' + this.value"
. Как в этой строке
$(document).on('submit', 'form[pjax-container]', function(event) {
исключить блок <select>...</select>?

laimas 05.03.2020 12:31

$(this.elements).not('селекторы')....

Oughtem 05.03.2020 21:28

да, эту штуку я пробовал в таком формате
$(document).not(document.getElementById("#nojs")).on('submit', 'form[pjax-container]', function(event) {
, присвоив предварительно
<select id="nojs" class="prod-head__select" onchange="window.location.href='/catalog-sort?type=' + this.value">


Возможно, я неправильно, применил этот метод и он выбирает не то. Пожалуйста, подсобите.

laimas 06.03.2020 00:48

$(document).on('submit', 'form[pjax-container]'... это делегирование обработки события onsubmit форм документу. Элемент select не является формой и не имеет события onsubmit, и документ один, а не куча, серди которых нужно исключить #nojs. То есть ваш "формат", это по сути бред.

А вот форма имеет коллекцию своих элементов, серди которых и список select, и если его нужно исключить из набора (из этой коллекция), то это делается так, как показано выше.

FreeStyler 12.03.2020 09:43

Цитата:

Сообщение от Oughtem (Сообщение 520966)
[html]<div class="large-container" style="text-align:center;">
Как в этой строке
$(document).on('submit', 'form[pjax-container]', function(event){
исключить блок <select>...</select>?

А какой target у этого event'а? Ну или что там показывает console.log(event)?

Oughtem 13.03.2020 05:37

Цитата:

А какой target у этого event'а? Ну или что там показывает console.log(event)?
x.Event {type: "submit", timeStamp: 1584066660144, jQuery110207746604547728344: true, isTrigger: 3, namespace: "", …}
type: "submit"
timeStamp: 1584066660144
jQuery110207746604547728344: true
isTrigger: 3
namespace: ""
namespace_re: null
result: false
target: form#filterByParams
delegateTarget: document
currentTarget: form#filterByParams
handleObj: {type: "submit", origType: "submit", data: undefined, guid: 53, handler: ƒ, …}
data: undefined
isDefaultPrevented: ƒ it()
isPropagationStopped: ƒ it()
__proto__: Object




laimas, ваш ответ
Цитата:

$(this.elements).not('селекторы')
и следующее за ним разъяснение безусловно содержит максимум информации для человека, имеющего схожий уровень репутации на данном форуме :) Однако мне от до сих пор не помог, хотя должен был бы... Суть ваше ответа для себя я понял так: мой "код" подразумевает, то, что надо исключить делегировать обработки события submit из объектов уровня document, хотя $(document) один.

Прошу вас более подробно помочь мне с кодом. Я на том уровне изучения js, когда прочитать частично могу, но писать не могу.

Мне надо написать блок кода, который запрещает обработку <select></select> и обрамить его условием
if $(this.elements).not('select')
или достаточно где-то втыкнуть
$(this.elements).not('select')
, чтоб при событии submit просто исключался код между <select></select> ?


Часовой пояс GMT +3, время: 01:53.