Не выполняющийся ajax

Question

Есть код

* {
  list-style: none;
  text-decoration: none;
  margin: 0;
  padding: 0;
}
/*
#sidemenu {
  background: #afafaf;
  display: inline-flex;
  grid-area: leftsidemenu;
  flex-direction: column;
  display: block;
  width: 420px;
  border-right: 1px solid #000;
  position: fixed;
}

 #sidemenu > li {
    padding: 0.5em 0 0.5em 0.3em;
  background: #fff;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;   
}


    

#sidemenu li:hover {
  background: lightgreen;
}

#sidemenu li a {
  color: #000;
}

/*#sidemenu li:hover a,*/
/*
#sidemenu li:hover .fa {
  color: #fff;
}
*/
/*
#sidemenu li .fa {
  /*margin-left: 20px;
  margin-right: 10px;*/
/*  
  display: inline-block;
  width: 30px;
  height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
*/

    .menu {
      position: relative;
      width: 370px;
    }

    .menu ul {
      list-style-type: none;
      margin: 0;
      padding: 0;
    }

    .menu li {
      padding: 0.5em 0 0.5em 0.3em;
      cursor: pointer;
    }

    ul.level1 {
      border: 1px solid thistle;
    }

    ul.level1>li {
      background-color: #fff;
      border-bottom: 1px solid thistle;
        display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
    }

    ul.level1>li:last-child {
      border-bottom: none;
    }

    ul.level2 {
      position: absolute;
      top: 0;
      left: 100%;
      width: 559px;
      height: 1010px;
      padding: 0.5em 0.3em 0.5em 0.3em;
      background-color: #fff;
      border: 1px solid thistle;
      visibility: hidden;
      white-space: nowrap;
      column-count: 2;
    }

    ul.level2>li {
      padding: 0;
      border-bottom: 1px solid #fff;
    }

    ul.level2>ul>li {
      padding: 0;
    }

    ul.level2>li>ul>li {
      padding: 0;
    }

    ul.level1>li:hover ul.level2 {
      visibility: visible;
    }
    
    ul.level2 > li.submenu > ul > ul.innerUL>li.submenu__title {
    padding: 0;
    margin: 0;
    margin-bottom: 5px;
}

    ul.level2 > li.submenu > ul > ul.innerUL>li.submenu__item {
    padding: 0;
    margin: 0;
    /*margin-bottom: 5px;*/
}

    .menu a {
      color: #333;
    }

    .alignblock {
      text-align: center;
      vertical-align: middle;
    }

    .submenu__title {
      margin-bottom: 5px;
    }

    .submenu__title a {
      display: block;
      color: black;
      font: 13px Roboto, Tachoma, Arial, sans-serif;
      /* line-height: 1.5; */
      text-decoration: none;
      padding: 3px 5px;
    }

    .submenu__item {
      /* margin-bottom: 0px; */
    }

    .submenu__item a {
      display: block;
      color: gray;
      font: 13px Roboto, Tachoma, Arial, sans-serif;
      text-decoration: none;
      padding: 3px 5px;
    }

.leftside {
  margin-left: 16px;
  display: inline-block;
  width: 30px;
  height: 30px;  
  display: flex;
}

.rightside {
  margin-right: 16px;
  /* display: none;*/
  visibility: hidden;
  width: 30px;
  height: 30px;  
  display: inline-flex;
}

.centerplace {
  width: 328px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /*
  transition: .6s;
  overflow: hidden;
  transform: translateX(-328px);
  */
}

.nestedblock{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin:0 auto;
}

/*
#sidemenu.active .centerplace {
    transform: translateX(0px);
    transition-delay: .4s;
}

#sidemenu{
   width: 60px;
}

#sidemenu.active{
    width: 388px;
}
*/

/* Иное состояние */

/*
.leftside:hover + .centerplace,
.leftside:hover + .centerplace + .nestedblock,
.leftside:hover + .rightside{
    display: none;
}
 */
 
#sidemenu.-short {
  flex-direction: column;
}

#sidemenu.-short .centerplace,
#sidemenu.-short .centerplace .nestedblock,
#sidemenu.-short .rightside {
  display: none;
}

.contentpart {
    display: grid;
    grid-template-areas: "leftsidemenu centercolumn rightsidemenu";
    grid-template-columns: 370px 1fr 245.8px;
    /*height: 100vh;*/
    margin: 0;
    grid-area: centerpart;
}

.leftmenu {
    grid-area: leftsidemenu;
}

.centerarea {
    grid-area: centercolumn;
}

.rightmenu {
    grid-area: rightsidemenu;
}

#pageHeader {
    grid-area: header;
    width: 100%;
}

#pageFooter {
    grid-area: footer;
    width: 100%;
}

.bodyclass {
    display: grid;
    grid-template-areas: "header" "centerpart" "footer";
    grid-template-rows: 60px 1fr 150px;
    height: 100vh;
    margin: 0;
}

/*
.cl-kit .FilterGroupNewDesign{
    margin-top: 5px;
}
*/


.FilterBlockNewDesign{
    margin-bottom: 50px;
}

/*
.cl-kit .FilterGroupNewDesign {
    padding-bottom: 10px;
    margin-bottom:5px;
}
*/

.b-footer__container {
    background-color: #000;
}



.IconFont_arrow_01_B:before{content:"\f103"}.IconFont_arrow_01_L:before{content:"\f104"}.IconFont_arrow_01_R:before{content:"\f105"}


/*
.cl-kit .FilterGroupNewDesign__filter-item:last-child{
    margin-bottom: 10px;
}

.cl-kit .FilterLabelNewDesign:last-child{
    margin-bottom: 10px;
}
*/

<html>
<head>
<!-- <link rel="stylesheet" href="testsite.css">-->
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>Test Example</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" type="text/css" href="commons.bundle.css" media="all"></link>
<link rel="stylesheet" type="text/css" href="subcategory.bundle.css" media="all"></link>
<link rel="stylesheet" type="text/css" href="vendors.bundle.css" media="all"></link>
<link rel="stylesheet" type="text/css" href="styles.css" media="all"></link>
<link rel="stylesheet" type="text/css" href="template.css" media="all"></link>
<link rel="stylesheet" type="text/css" href="vendors.css" media="all"></link>
<link rel="stylesheet" type="text/css" href="main.css" media="all"></link>
<link rel="stylesheet" type="text/css" href="fonts.bundle.css" media="all"></link>
<link rel="stylesheet" type="text/css" href="components.bundle.css"></link>
<link rel="stylesheet" type="text/css" href="components.css"></link>
<link rel="stylesheet" type="text/css" href="common.css"></link>
<link rel="stylesheet" type="text/css" href="headerIndex.css"></link>
<link rel="stylesheet" type="text/css" href="indexIndex.css"></link>
<link rel="stylesheet" type="text/css" href="styles__ltr.css"></link>
<link rel="stylesheet" type="text/css" href="stylesheet.css"></link>
<link rel="stylesheet" href="testsite.css"></link>
    <link rel="stylesheet"
          href="//fonts.googleapis.com/css?family=PT+Sans:400,400italic,700,700italic&subset=latin,cyrillic"
          media="all">



<script type="text/javascript" src="http://code.jquery.com/jquery-3.6.0.min.js"></script>

<script>
    $(document).ready(function() {
        console.log('check');
        function expandCollapsedFunction() {
            let elemsOfFilterOpenGroup = document.querySelectorAll('.FilterDropdown__filter-open-group');
            
            Array.from(elemsOfFilterOpenGroup).forEach( element => {
                element.addEventListener( 'click', clickHandler );
            });
    
            function clickHandler(){
                let arrow = this.querySelector('i'),
                    openedClasses = ['FilterDropdown__toggle-opened','IconFontStory__icon','IconFont','IconFont_size_s','IconFont_arrow_01_B'],
                    closedClasses = ['FilterDropdown__toggle-closed','IconFontStory__icon','IconFont','IconFont_size_s','IconFont_arrow_01_R'];
            
                if( arrow.classList.contains('IconFont_arrow_01_R') ){
                    arrow.classList.remove(...closedClasses);
                    arrow.classList.add(...openedClasses);
                    this.parentNode.nextSibling.classList.add('FilterDropdown__body_opened');
                } else {
                    arrow.classList.remove(...openedClasses);
                    arrow.classList.add(...closedClassest);
                    this.parentNode.nextSibling.classList.remove('FilterDropdown__body_opened');
                };
            };
      };
      };
</script>      
</head>
<!-- <link rel="stylesheet" href="testsite.js"> -->
<body class="bodyclass">
<header id="pageHeader">
</header>
<div class="contentpart">
    <div class="leftmenu">
    <nav class="menu">
    <ul id="sidemenu" class="level1">
      <li>
        <div class="leftside">
        <i class="fa fa-home"></i>
        </div>
        <div class="centerplace">
        <a href="" class="nestedblock">Техника для кухни</a>
        </div>
        <div class="rightside">
        <i class="fa fa-home"></i>
        </div>
            <ul class="level2">
                <li class="submenu">
                  <ul>
                    <li class="submenu__title">
                      <a href="#">Крупная бытовая техника</a>
                    </li>
                    <li class="submenu__item">
                      <a href="#">Холодильники</a>
                    </li>
                    <li class="submenu__item">
                      <a href="#">Морозильные камеры</a>
                    </li>
                    <li class="submenu__item">
                      <a href="#">Морозильные лари</a>
                    </li>
                    <li class="submenu__item">
                      <a href="#">Плиты газовые </a>
                    </li>
                  </ul>

                  <ul>
                    <li class="submenu__title">
                      <a href="#">New title</a>
                    </li>
                    <li class="submenu__item">
                      <a href="#">Холодильники</a>
                    </li>
                    <li class="submenu__item">
                      <a href="#">Морозильные камеры</a>
                    </li>
                    <li class="submenu__item">
                      <a href="#">Морозильные лари</a>
                    </li>
                    <li class="submenu__item">
                      <a href="#">Плиты газовые </a>
                    </li>
                  </ul>
                </li>
              </ul>
      </li>
      <li>
        <div class="leftside">
        <i class="fa fa-home"></i>
        </div>
        <div class="centerplace">
        <a href="" class="nestedblock">Бытовая техника для дома</a>
        </div>
        <div class="rightside">
        <i class="fa fa-home"></i>
        </div>
      </li>
      <li>
        <div class="leftside">
        <i class="fa fa-home"></i>
        </div>
        <div class="centerplace">
        <a href="" class="nestedblock">Ноутбуки и компьютеры</a>
        </div>
        <div class="rightside">
        <i class="fa fa-home"></i>
        </div>
            <ul class="level2">
                 <li class="submenu">
                
                  <ul>
                    <ul class="innerUL">
                        <li class="submenu__title">
                          <a href="#">Ноутбуки</a>
                        </li>
                    </ul>
                    <ul class="innerUL">
                        <li class="submenu__title">
                          <a href="#">Ноутбуки-трансформеры</a>
                        </li>       
                    </ul>                   
                    <ul class="innerUL">
                        <li class="submenu__title">
                          <a href="#">Ультрабуки</a>
                        </li>           
                    </ul>
                    <ul class="innerUL">
                        <li class="submenu__title">
                            <a href="#">Моноблоки</a>
                        </li>
                        <li class="submenu__item">
                            <a href="#">Моноблоки с Windows</a>
                        </li>
                        <li class="submenu__item">
                            <a href="#">Apple iMac</a>
                        </li>
                    </ul>                   
                    <li class="submenu__item">
                      <a href="#">Холодильники</a>
                    </li>
                    <li class="submenu__item">
                      <a href="#">Морозильные камеры</a>
                    </li>
                    <li class="submenu__item">
                      <a href="#">Морозильные лари</a>
                    </li>
                    <li class="submenu__item">
                      <a href="#">Плиты газовые </a>
                    </li>
                  </ul>

                  <ul>
                    <ul class="innerUL">                    
                    <li class="submenu__title">
                      <a href="#">New title</a>
                    </li>
                    <li class="submenu__item">
                      <a href="#">Холодильники</a>
                    </li>
                    <li class="submenu__item">
                      <a href="#">Морозильные камеры</a>
                    </li>
                    <li class="submenu__item">
                      <a href="#">Морозильные лари</a>
                    </li>
                    <li class="submenu__item">
                      <a href="#">Плиты газовые </a>
                    </li>
                    </ul>
                  </ul>
                </li>

                            
      </ul>
      </li>
      <li>
        <div class="leftside">
        <i class="fa fa-home"></i>
        </div>
        <div class="centerplace">
        <a href="" class="nestedblock">Комплектующие</a>
        </div>
        <div class="rightside">
        <i class="fa fa-home"></i>
        </div>    
      </li>
      </li>
    </ul>
    </nav>
    </div>

    <div class="centerarea">
    </div>

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

                        


<script src="testsite3.js"></script>
<script>
    $(document).ready(function() {
        console.log('check');
        function expandCollapsedFunction() {
            let elemsOfFilterOpenGroup = document.querySelectorAll('.FilterDropdown__filter-open-group');
            
            Array.from(elemsOfFilterOpenGroup).forEach( element => {
                element.addEventListener( 'click', clickHandler );
            });
    
            function clickHandler(){
                let arrow = this.querySelector('i'),
                    openedClasses = ['FilterDropdown__toggle-opened','IconFontStory__icon','IconFont','IconFont_size_s','IconFont_arrow_01_B'],
                    closedClasses = ['FilterDropdown__toggle-closed','IconFontStory__icon','IconFont','IconFont_size_s','IconFont_arrow_01_R'];
            
                if( arrow.classList.contains('IconFont_arrow_01_R') ){
                    arrow.classList.remove(...closedClasses);
                    arrow.classList.add(...openedClasses);
                    this.parentNode.nextSibling.classList.add('FilterDropdown__body_opened');
                } else {
                    arrow.classList.remove(...openedClasses);
                    arrow.classList.add(...closedClasses);
                    this.parentNode.nextSibling.classList.remove('FilterDropdown__body_opened');
                };
            };      
        }
        let subcategoryflag='';
        console.log(subcategoryflag);
            $('.submenu__item a').on('click', function (event) {
                console.log('Inner check');             
                subcategoryflag=event.target.innerHTML;
                $.ajax ({
                    type: 'POST',
                    url: 'ajaxsubcategory1.php',
                    data: {subcategoryflag: subcategoryflag},
                    dataType: 'json',
                    success: function (data) {
                        console.log('check');
                        console.log(data);
                        $('.rightmenu').html(data.msg);
                        $('.centerarea').html('<div id=\"topcenterarea\">' +'<h1>'+data.header+'</h1>'+data.countrecords+'товара'+'</div>'); 

                        expandCollapsedFunction();
                        
                }
            

            }
            );
        }
        );      
        
        let categoryflag='';
            $('.submenu__title a').on('click', function (event) {
                console.log('Inner check');             
                categoryflag=event.target.innerHTML;
                subcategoryflag=categoryflag;
                console.log(categoryflag);
                $.ajax ({
                    type: 'POST',
                    url: 'ajaxsubcategory1.php',
                    data: {categoryflag: categoryflag, subcategoryflag: subcategoryflag},
                    dataType: 'json',
                    success: function (data) {
                        console.log('check');
                        console.log(data);
                        $('.rightmenu').html(data.msg);
                        $('.centerarea').html('<div id=\"topcenterarea\">'+'<h1>'+data.header+'</h1>'+data.countrecords+'товара'+'</div>'); 

                        expandCollapsedFunction();
                }
            }
            );
        }
        );
    }
    )
</script>
</body>
</html>

<?php
class ajaxValidate {

    function formValidate() {
        //Put form elements into post variables (this is where you would sanitize your data)
        $categoryflag=$_POST['categoryflag'];
        $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;
        
        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'] = '          <div><div class="FilterContainer"><div class="FilterSeoGroup FilterSeoGroup__seo" id="popularCollections"><h4 class="FilterSeoGroup__header">Популярные подборки</h4><div class="FilterSeoGroup__group_closed"><div class="FilterSeoGroup__item-wrapper"><a class="FilterSeoGroup__item" href="https://www.citilink.ru/catalog/monobloki--nedorogie-monobloki/">Недорогие</a></div><div class="FilterSeoGroup__item-wrapper"><a class="FilterSeoGroup__item" href="https://www.citilink.ru/catalog/monobloki--dlya-doma-m/">Для дома</a></div><div class="FilterSeoGroup__item-wrapper"><a class="FilterSeoGroup__item" href="https://www.citilink.ru/catalog/monobloki--dlya-ofisa-m/">Для офиса</a></div><div class="FilterSeoGroup__item-wrapper"><a class="FilterSeoGroup__item" href="https://www.citilink.ru/catalog/monobloki--win/">с Windows</a></div><div class="FilterSeoGroup__item-wrapper"><a class="FilterSeoGroup__item" href="https://www.citilink.ru/catalog/monobloki--imac/">Apple iMac</a></div></div><div class="FilterSeoGroup__toggle-container"><button class="FilterSeoGroup__toggle-button buttonStyleDecorator buttonStyleDecorator_theme_ghostOrange buttonStyleDecorator_size_s Button" name="" type="submit" value="" tabindex="0" borderstyle="none"><span class="buttonStyleDecorator__text ">Показать все</span></button></div></div></div></div>'
            $sql='SELECT * FROM monoblocks';
            $query=$pdo->prepare($sql);
            $result=$query->execute();
            while ($example=$result->fetch(PDO::FETCH_ASSOC))
            {
                $return['querycontent']='<div style="width: 100%; border: 2px solid red"></div>';
            };                  
            $return['countrecords']='SELECT COUNT(*) FROM monoblocks';
        }

        //Return json encoded results
        return json_encode($return);
    }

}

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

В результате правое боковое меню не отображается

судя ро отладочному коду (Inner check, Моноблоки). Подскажите как добиться выполнения ajax кода. По поводу закрывающих скобок см. скриншот снизу (нижний блок)

верхний блок

Answer 1

Не забываем закрывать функции. В <head> дублируется код с конца <body> (зачем?):

<script>
    $(document).ready(function() {
        console.log('check');
        function expandCollapsedFunction() {
            let elemsOfFilterOpenGroup = document.querySelectorAll('.FilterDropdown__filter-open-group');
            
            Array.from(elemsOfFilterOpenGroup).forEach( element => {
                element.addEventListener( 'click', clickHandler );
            });
    
            function clickHandler(){
                let arrow = this.querySelector('i'),
                    openedClasses = ['FilterDropdown__toggle-opened','IconFontStory__icon','IconFont','IconFont_size_s','IconFont_arrow_01_B'],
                    closedClasses = ['FilterDropdown__toggle-closed','IconFontStory__icon','IconFont','IconFont_size_s','IconFont_arrow_01_R'];
            
                if( arrow.classList.contains('IconFont_arrow_01_R') ){
                    arrow.classList.remove(...closedClasses);
                    arrow.classList.add(...openedClasses);
                    this.parentNode.nextSibling.classList.add('FilterDropdown__body_opened');
                } else {
                    arrow.classList.remove(...openedClasses);
                    arrow.classList.add(...closedClassest);
                    this.parentNode.nextSibling.classList.remove('FilterDropdown__body_opened');
                };
            };
       };
   });
    ^----- ЗАКРЫВАЮЩАЯСЯ СКОБКА ДОБАВИЛАСЬ
</script>

БЛОГ НА HUSL

Не выполняющийся ajax

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