Изменение страницы

Question

Есть гиперссылка #monoblocks (Ноутбуки и компьютеры->Моноблоки), по нажатию на которую происходит обновление страницы

    <li><a href="#" id="monoblocks">Моноблоки</a></li>

загружающаяся из файла ../html/notebooksandpcs.html

<h1 class="headercontent">Ноутбуки и компьютеры</h1>
  <div class="menucategoryitem">
    <div class="menu__item">
      <h2 class="headersubmenu"><a href="#">Ноутбуки</a></h2>
      <ul>
        <li><a href="#">Недорогие ноутбуки</a></li>
        <li><a href="#">Ультрабуки</a></li>
        <li><a href="#">Ноутбуки-трансформеры</a></li>
        <li><a href="#">Игровые ноутбуки</a></li>
        <li><a href="#">8 ядерные ноутбуки</a></li>
      </ul>
    </div>
    <div class="menu__item">
      <h2 class="headersubmenu"><a href="#">Компьютеры и моноблоки</a></h2>
      <ul>
        <li><a href="#">Игровые компьютеры</a></li>
        <li><a href="#" id="monoblocks">Моноблоки</a></li>
        <li><a href="#">Компьютеры</a></li>
        <li><a href="#">Системные блоки</a></li>
        <li><a href="#">Микрокомпьютеры</a></li>
      </ul>
    </div>
    <div class="menu__item">
      <h2 class="headersubmenu"><a href="#">Жесткие диски и SSD</a></h2>
      <ul>
        <li><a href="#">Жесткие диски</a></li>
        <li><a href="#">SSD накопители</a></li>
        <li><a href="#">Внешние жесткие диски</a></li>
      </ul>
    </div>
</div>

Сама гиперссылка находится в блоке #CatalogMenuRight файла testsite.ru/stackoverflow/html/testsite.html (загружающаяся туда из файла ../html/notebooksandpcs.html с помощью fetch)

<body class="bodyclass">

<div id="fullblock">

<div id="dropdownwindow">
        <div class="contentdropdownwindow">
            <div class="CatalogMenuLeft">
                        <div class="windowmenulist" id="menulist">                          
                                <div class="menulistitem" id="smartphonesandgadgets">
                                        Смартфоны и гаджеты
                                    </div>
                                    <div class="menulistitem" id="notebooksandpcs">
                                        Ноутбуки и компьютеры
                                    </div>
                                    <div class="menulistitem" id="tvsaudiovideohifi">
                                        Телевизоры, аудио-видео, Hi-Fi
                                    </div>
                                    <div class="menulistitem" id="householdappliancesforhomeandkitchen">
                                        Бытовая техника для дома и кухни
                                    </div>
                                    <div class="menulistitem" id="constructionandrepair">
                                        Строительство и ремонт
                                    </div>
                                    <div class="menulistitem" id="houseandcottage">
                                        Дом и дача
                                    </div>
                                    <div class="menulistitem" id="photosvideossecuritysystems">
                                        Фото, видео, системы безопасности
                                    </div>
                                    <div class="menulistitem" id="automotiveproducts">
                                        Автотовары
                                    </div>
                                    <div class="menulistitem" id="officesuppliesfurnitureandofficeequipment">
                                        Канцтовары, Мебель и Офисная техника
                                    </div>
                                    <div class="menulistitem" id="beautyandhealth">
                                        Красота и здоровье
                                    </div>
                                    <div class="menulistitem" id="sportsandrecreation">
                                        Спорт и отдых
                                    </div>
                                    <div class="menulistitem" id="productsforgamers">
                                        Товары для геймеров
                                    </div>
                                    <div class="menulistitem" id="discountedproducts">
                                        Уцененные товары
                                    </div>
                                    <div class="menulistitem" id="giftcertificates">
                                        Подарочные сертификаты
                                    </div>
                                    <div class="menulistitem" id="services">
                                        Сервисы и услуги
                                    </div>                                  
                            </div>
                </div>
            <div id="dropdownwindowright">
                    <div class="crosslineright">
                        <div class="close">&times;</div>
                    </div>
                    <div class="CatalogMenuRight" id="CatalogMenuRight">
                    </div>
            </div>
        </div>
</div>

<div class="rightmenu">
</div>

</div>
</body>

Если смотреть блоком выше, то #dropdownwindow содержит #CatalogMenuRight, где #dropdownwindow - это блок-подокно, который отображается и закрывается по нажатию кнопки cataloglistbutton

let cataloglistbutton = document.querySelector('.catalogbutton');


cataloglistbutton.onclick = function() {
  console.log('Before');
  if (document.getElementById('dropdownwindow').style.display == "none") {
    document.getElementById('dropdownwindow').style.position = "fixed";
    document.getElementById('dropdownwindow').style.marginLeft = "0";
    document.getElementById('dropdownwindow').style.marginTop = "0";
    document.getElementById('dropdownwindow').style.display = "block";
    console.log(document.getElementById('dropdownwindow').style.display);
    document.getElementById('dropdownwindow').style.marginRight = "20%";
    document.getElementById('dropdownwindow').style.width = "80%";

    document.getElementById('dropdownwindowright').style.flex = "60%";
    document.getElementById('dropdownwindow').style.backgroundColor = "#ffffff";


    let idnumber = 0;

    let array = ['smartphonesandgadgets', 'notebooksandpcs', 'tvsaudiovideohifi', 'householdappliancesforhomeandkitchen',

      'constructionandrepair', 'houseandcottage', 'photosvideossecuritysystems', 'automotiveproducts', 'officesuppliesfurnitureandofficeequipment', 'beautyandhealth',

      'sportsandrecreation', 'productsforgamers', 'discountedproducts', 'giftcertificates', 'services'
    ];
    for (let item of array) {
      // console.log('iteration');
      displayMenuItem(item);
    }


  } else {
    document.getElementById('dropdownwindow').style.display = "none";
    document.getElementById('dropdownwindow').style.position = "fixed";
    document.getElementById('dropdownwindow').style.marginLeft = "0";
    document.getElementById('dropdownwindow').style.marginTop = "0";
    console.log(document.getElementById('dropdownwindow').style.display);
    document.getElementById('dropdownwindow').style.marginRight = "0";
    document.getElementById('dropdownwindow').style.width = "0";

    document.getElementById('dropdownwindow').style.backgroundColor = "#ffffff";

  };

  console.log('After');

}

Есть следующие цепочки вложенности блоков #fullblock->cataloglistbutton, #fullblock->#dropdownwindow->#CatalogMenuRight->#monoblocks, #fullblock->.rightmenu.

Блок #CatalogMenuRight содержит гиперссылку #monoblocks (Моноблоки)

function displayMenuItem(headerMenuItem) {
  // console.log('BeforeOK');
  document.querySelector('#' + headerMenuItem).addEventListener('mouseover', (event) => {
    event.target.style.cursor = "pointer";
    event.target.classList.add('menulistitem_selected');
    fetch('../html/' + headerMenuItem + '.html')
      .then(r => r.text())
      .then(data => {
        document.querySelector('#CatalogMenuRight').innerHTML = data
      });
  });
  document.querySelector('#' + headerMenuItem).addEventListener('mouseout', (event) => {
    event.target.style.cursor = "pointer";
    event.target.classList.remove('menulistitem_selected');
  });
  // console.log('AfterOK');
};

а именно при headerMenuItem = notebooksandpcs загружается с помощью fetch('../html/'+headerMenuItem+'.html').then(r => r.text()).then(data => {document.querySelector ('#CatalogMenuRight').innerHTML = data}); - т.е. ссылка #monoblocks, находящаяся внутри ../html/notebooksandpcs.html, помещается в #CatalogMenuRight.

При щелчке на #monoblocks (пункт меню Моноблоки) происходит закрытие блока #dropdownwindow и изменение содержимого блока #fullblock, лежащего на один уровень выше (см. вторую строчку кода в первой вставке кода),а именно его элемента - .rightmenu

let categoryflag = '';
$('#monoblocks').on('click', function(event) {
  event.preventDefault();
  console.log('Checkmenuitem');

  subcategoryflag = event.target.innerHTML;
  console.log(subcategoryflag);
  let windowclose = document.querySelector('#dropdownwindow');
  windowclose.style.display = "none";

  $.ajax({
    method: 'POST',
    url: '../php/ajaxsubcategory1.php',
    cache: false,
    data: {
      subcategoryflag: subcategoryflag
    },
    dataType: 'json',
    success: function(data) {
      console.log('check');
      console.log(data);
      $('.rightmenu').html(data.result.msg);

    }
  })
});

Но при этом содержимое .rightmenu не изменяется, происходит просто переход на страницу ../html/testsite.html (содержащую .rightmenu). Привожу содержимое файла ../php/ajaxsubcategory1.php

<?php
    class ajaxValidate {
    
            $subcategoryflag = $_POST['subcategoryflag'];

            //Establish values that will be returned via ajax
            $return = array();
            $return['msg'] = '';
            $return['error'] = false;
            $return['querycontent']='';
            $return['header']='Моноблоки';
            $return['countrecords']=0;
            $i=0;
            
            
            require_once('config.php');
            $pdo = new PDO($dsn, $user, $password);

            //Begin form validation functionality
            if (!isset($subcategoryflag) || empty($subcategoryflag)){
                $return['error'] = true;
                $return['msg'] .= '<li>Error: Field1 is empty.</li>';
            }

            //Begin form success functionality
            if ((!$return['error']) && $subcategoryflag=='Моноблоки'){
                $return['msg'] = 'ChangePart`;
            }               
            

                        

            //Return json encoded result
            return json_encode([
                                'result' => $return
                               ]
            );
        }

    }

    $ajaxValidate = new ajaxValidate;
    echo $ajaxValidate->formValidate();
    ?>

Подскажите, как добиться, чтобы при щелчке на гиперссылке #monoblocks (Моноблоки), кроме загрузки новой страницы происходило её изменение (новой) страницы (а именно ее части .rightmenu).

Answer 1

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

$('#CatalogMenuRight').on('click', '#monoblocks', function(event) {...});

БЛОГ НА HUSL

Изменение страницы

Ответы (1 шт):