Не выполняющийся 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&gt;li {
  background-color: #fff;
  border-bottom: 1px solid thistle;
    display: flex;

flex-direction: row;
  align-items: center;
  justify-content: space-between;
    }
ul.level1&gt;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&gt;li {
  padding: 0;
  border-bottom: 1px solid #fff;
}

ul.level2&gt;ul&gt;li {
  padding: 0;
}

ul.level2&gt;li&gt;ul&gt;li {
  padding: 0;
}

ul.level1&gt;li:hover ul.level2 {
  visibility: visible;
}

ul.level2 &gt; li.submenu &gt; ul &gt; ul.innerUL&gt;li.submenu__title {
padding: 0;
margin: 0;
margin-bottom: 5px;

}
ul.level2 &gt; li.submenu &gt; ul &gt; ul.innerUL&gt;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'] .= '&lt;li&gt;Error: Field1 is empty.&lt;/li&gt;';
    }

    //Begin form success functionality
    if ((!$return['error']) &amp;&amp; $subcategoryflag=='Моноблоки'){
        $return['msg'] = '          &lt;div&gt;&lt;div class=&quot;FilterContainer&quot;&gt;&lt;div class=&quot;FilterSeoGroup FilterSeoGroup__seo&quot; id=&quot;popularCollections&quot;&gt;&lt;h4 class=&quot;FilterSeoGroup__header&quot;&gt;Популярные подборки&lt;/h4&gt;&lt;div class=&quot;FilterSeoGroup__group_closed&quot;&gt;&lt;div class=&quot;FilterSeoGroup__item-wrapper&quot;&gt;&lt;a class=&quot;FilterSeoGroup__item&quot; href=&quot;https://www.citilink.ru/catalog/monobloki--nedorogie-monobloki/&quot;&gt;Недорогие&lt;/a&gt;&lt;/div&gt;&lt;div class=&quot;FilterSeoGroup__item-wrapper&quot;&gt;&lt;a class=&quot;FilterSeoGroup__item&quot; href=&quot;https://www.citilink.ru/catalog/monobloki--dlya-doma-m/&quot;&gt;Для дома&lt;/a&gt;&lt;/div&gt;&lt;div class=&quot;FilterSeoGroup__item-wrapper&quot;&gt;&lt;a class=&quot;FilterSeoGroup__item&quot; href=&quot;https://www.citilink.ru/catalog/monobloki--dlya-ofisa-m/&quot;&gt;Для офиса&lt;/a&gt;&lt;/div&gt;&lt;div class=&quot;FilterSeoGroup__item-wrapper&quot;&gt;&lt;a class=&quot;FilterSeoGroup__item&quot; href=&quot;https://www.citilink.ru/catalog/monobloki--win/&quot;&gt;с Windows&lt;/a&gt;&lt;/div&gt;&lt;div class=&quot;FilterSeoGroup__item-wrapper&quot;&gt;&lt;a class=&quot;FilterSeoGroup__item&quot; href=&quot;https://www.citilink.ru/catalog/monobloki--imac/&quot;&gt;Apple iMac&lt;/a&gt;&lt;/div&gt;&lt;/div&gt;&lt;div class=&quot;FilterSeoGroup__toggle-container&quot;&gt;&lt;button class=&quot;FilterSeoGroup__toggle-button buttonStyleDecorator buttonStyleDecorator_theme_ghostOrange buttonStyleDecorator_size_s Button&quot; name=&quot;&quot; type=&quot;submit&quot; value=&quot;&quot; tabindex=&quot;0&quot; borderstyle=&quot;none&quot;&gt;&lt;span class=&quot;buttonStyleDecorator__text &quot;&gt;Показать все&lt;/span&gt;&lt;/button&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;'
        $sql='SELECT * FROM monoblocks';
        $query=$pdo-&gt;prepare($sql);
        $result=$query-&gt;execute();
        while ($example=$result-&gt;fetch(PDO::FETCH_ASSOC))
        {
            $return['querycontent']='&lt;div style=&quot;width: 100%; border: 2px solid red&quot;&gt;&lt;/div&gt;';
        };                  
        $return['countrecords']='SELECT COUNT(*) FROM monoblocks';
    }

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


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

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

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

верхний блок

Что значит эта ошибка @Igor? Где конкретно в моем коде располагается эта ошибка? — htmllayout, Jun 15 '21 at 17:06
Держи: Как и какими средствами находить ошибки в PHP коде? и Как и какими средствами находить ошибки в Javascript коде? (конкретно можно смотреть Debugging - Отладка) ............Не стоит благодарности)) — Алексей Шиманский, Jun 15 '21 at 17:09
@АлексейШиманский вышеприведенная ошибка находится в "filename": "https://stacksnippets.net/js", в строке lineno: 378, colno: 1, а где ошибка в моем файле непонятно. — htmllayout, Jun 15 '21 at 17:23
используй отладку в пыхе и смотри что происходит и что возвращаешь.....смотри отладку в js и смотри что возвращается — Алексей Шиманский, Jun 15 '21 at 17:25

InDevX · Answer 1 · 2021-06-18T11:23:00.567

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 =&gt; {
            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>

edited Jun 18 '21 at 11:23

answered Jun 15 '21 at 18:10

InDevX

5,004

где отсутствуют скобки? У меня все есть. Я просмотрел - не нашел отсутствующих скобок. Последняя закрывающая скобка (относящаяся к $(document).ready(function(){}) находится в самом конце. @InDevX – htmllayout Jun 16 '21 at 07:26
проверял в Notepad-е. – htmllayout Jun 16 '21 at 07:41
проясните ваш ответ, пожалуйста. – htmllayout Jun 17 '21 at 09:52
До сих пор не закрытая функция присутствует... И какой смысл дублировать код? – InDevX Jun 17 '21 at 12:16
я уточнил вопрос – htmllayout Jun 17 '21 at 13:21
Зачем там скриншоты с вопроса? Там прекрасно и так видно что в head не закрыт document.ready... – InDevX Jun 17 '21 at 13:30
там были лишние пробелы (и пропуски строк) - я отредактировал (удалил пустые строки), поэтому вы решили , что закрывающей скобки нет. Проверьте еще раз. – htmllayout Jun 18 '21 at 08:31
@htmllayout до сих пор нет.. Отредактировал ответ – InDevX Jun 18 '21 at 11:20

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

1 Answers1