On the page there are 2 sets of checkboxes and a div, into which filtered data should fall through the AJAX. There is a button with a handler in which value arrays are formed from each checkbox set and, in theory, ajax should be transferred to a php file to retrieve a dataset from a database. Now the problem is ...

While I did not include ajax lines in the handler, everything worked fine - the button worked, value arrays were formed normally and correctly. As soon as he inserted the lines with the Ajax, the button stopped working, and in the 1st checkbox set the tree of elements was completely lost.

What could it be and where was I wrong?

<div class="scroll-div"> <div> <!-- ПЕРВЫЙ НАБОР ЧЕКБОКСОВ --> <ul id="tree"> <li><label><input type="checkbox" />Страна</label> <ul> <li><label><input name="kurorts_id" type="checkbox" value="1"/>Курорт 1</label></li> <li><label><input name="kurorts_id" type="checkbox" value="2"/>Курорт 2</label></li> <li><label><input name="kurorts_id" type="checkbox" value="3"/>Курорт 3</label></li> <li><label><input name="kurorts_id" type="checkbox" value="4"/>Курорт 4</label></li> <li><label><input name="kurorts_id" type="checkbox" value="5"/>Курорт 5</label></li> <li><label><input name="kurorts_id" type="checkbox" value="6"/>Курорт 6</label></li> </ul> </li> </ul> </div> </div> <!-- ВТОРОЙ НАБОР ЧЕКБОКСОВ --> <div class="checkbox"> <input type="checkbox" id="star0" name="hstars" value="0"/><label for="star0">0*</label> <input type="checkbox" id="star1" name="hstars" value="1"/><label for="star1">1*</label> <input type="checkbox" id="star2" name="hstars" value="2"/><label for="star2">2*</label> <input type="checkbox" id="star3" name="hstars" value="3"/><label for="star3">3*</label> <input type="checkbox" id="star4" name="hstars" value="4"/><label for="star4">4*</label> <input type="checkbox" id="star5" name="hstars" value="5"/><label for="star5">5*</label> </div> <div class="scroll-div"> <div> <div id='hotel_filter' class="checkbox"> <!-- Сюда через аякс должны вставлять отфильтрованные данные --> </div> </div> </div> <button class="blue dark small" onclick="bebebe()"> <img src="images/icons/small/white/bended_arrow_right.png"> <span>Фильтр</span> </button> </div> <script type="text/javascript"> $(document).ready(function(){$("#tree").Tree(); }); function bebebe() { var i_kurort = $('input[name=kurorts_id]:checked').map(function(indx, element){ return $(element).attr("value"); }); var arr_kurort = i_kurort.get(); // Массив value из 1й группы var i_stars = $('input[name=hstars]:checked').map(function(indx, element){ return $(element).attr("value"); }); var arr_stars = i_stars.get(); // Массив value из 2й группы alert(arr_kurort); alert(arr_stars); $.ajax({ url: 'filter_hotel.php', type: 'post', data: { ikurort: arr_kurort; istars: arr_stars }, success: function(data){$('#hotel_filter').html(data);} }); } </script> 

    1 answer 1

    Immediately I saw one mistake:

     data: { ikurort: arr_kurort, istars: arr_stars }, // разделять запятой, а не точкой с запятой 
    • Just gigantic thanks. Because of the missing stuff, a liter of valocardine drank. Everything is working. - Andrei Varzayev
    • @Trubadan in the browser console you need to drop in to save the valocardine :) well, and use jsHint. - zb '