Результат эхо-php-массива вне цикла while - для обновления html div с помощью jquery

Question

Хорошо, так что этот человек терзал мой мозг. У меня есть следующая страница product_main.php. Это моя основная страница отображения продукта для моего приложения. Я использую следующий код для отображения продуктов на основе ссылки определенной категории на другой странице. Это прекрасно работает и отображает продукты, основанные на их категории:

<?php 

    $q = $_GET['cat']; 

    include 'db_connect.php'; 

    $result = mysqli_query($con, "SELECT * FROM product_info WHERE ProductCat= '".$q."'"); 

    while($row = mysqli_fetch_array($result)) { 

     $pro_id = $row['ProductID']; 
     $pro_tit = $row['ProductTitle']; 
     $pro_des = $row['ProductDesc']; 
     $pro_img = $row['ProductImg']; 

     echo " 

     <div class='product-display'> 
      <img id='prodImage' src='Images/$pro_img.jpg' alt='product photo'> 
      <h3>$pro_tit</h3> 
      <h3>$pro_des</h3> 
     </div> 

     "; 

    } 
?> 

Теперь то, что я хочу сделать, это добавить фильтр падение вниз, чтобы выбрать другую категорию в то время как на той же странице. У меня есть следующий код, чтобы захватить выход function_load_product.php и обновить DIV элемента на моей странице:

<script> 

function selectCat(str) { 
if (str == "") { 
    document.getElementById("prodArea").innerHTML = ""; 
    return; 
} else { 
    if (window.XMLHttpRequest) { 
     // code for IE7+, Firefox, Chrome, Opera, Safari 
     xmlhttp = new XMLHttpRequest(); 
    } else { 
     // code for IE6, IE5 
     xmlhttp = new ActiveXObject("Microsoft.XMLHTTP"); 
    } 
    xmlhttp.onreadystatechange = function() { 
     if (this.readyState == 4 && this.status == 200) { 
      document.getElementById("prodArea").innerHTML = this.responseText; 
     } 
    }; 

    xmlhttp.open("GET","function_load_product.php?cat="+str,true); 
    xmlhttp.send(); 
    } 
} 

</script> 

Это снова работает отлично в «попытке», чтобы захватить выход из function_load_product.php.

Я думал, что, используя тот же код, что и на главной странице дисплея, я бы получил ту же функциональность, но у меня, похоже, возникли проблемы с отображением чего-либо.

Я думаю, что я сузил его до проблемы с областью - с JQuery, не возвращающим ничего, поскольку оператор эха содержится внутри цикла while.

Я попытался использовать следующий код, так как это помогло мне в другом проекте вернуть таблицу результатов из файла PHP в HTML-документ и обновить div. К сожалению, это тоже не работает! - Он просто возвращает пустой DIV на главную страницу:

<?php 

    $q = $_GET['cat']; 

    include 'db_connect.php'; 

    $result = mysqli_query($con, "SELECT * FROM product_info WHERE ProductCat= '".$q."'"); 

echo "<div class='product-display'>"; 

while($row = mysqli_fetch_array($result)) { 

     echo "<img id='prodImage' src='Images/" . $row['ProductImg'] . ".jpg' alt='product photo'>"; 
     echo "<h3>" . $row['ProductTitle'] . "</h3>"; 
     echo "<h3>" . $row['ProductDesc'] . "</h3>"; 

    } 

    echo "</div>"; 

?> 

Не совсем уверен, куда идти отсюда и быть честным у меня есть трусливое подозрение, что я приближаюсь всю идею «фильтра продукт» в наименее эффективным путь возможно! Любые указатели оцениваются ....

EDIT - О, и я также попытался использовать глобальные переменные, а затем повторить результат за пределами цикла while, но он просто вернул пустой результат на главную страницу продукта.

ИСКЛЮЧИТЕЛЬНЫЙ ОТВЕТ: Это было что-то маленькое все время! Это был вариант кода у меня был:

<div class="product-filter-bar"> 
     <div> 
      <form class="product-filter-cat" onchange="selectCat(this.value)"> 
      <select> 
       <option>Select a category:</option> 
       <option>Top</option> 
       <option>Jacket</option> 
       <option>Dress</option> 
       <option>Jeans</option> 
       <option>Skirt</option> 
      </select> 
      </form> 
     </div> 
    </div> 

Но это должно было быть:

<div class="product-filter-bar"> 
     <div> 
      <form> 
      <select class="product-filter-cat" onchange="selectCat(this.value)"> 
       <option>Select a category:</option> 
       <option>Top</option> 
       <option>Jacket</option> 
       <option>Dress</option> 
       <option>Jeans</option> 
       <option>Skirt</option> 
      </select> 
      </form> 
     </div> 
    </div> 

** Я просто был вызов функции, прикрепленную к «форме» метки и должен был он прикреплен к тегу «select».

Answer 1

Попробуйте использовать инструменты разработчика в вашем браузере, чтобы сделать консольный журнал в ответ на запрос ajax. Это позволит вам увидеть, что что-то возвращается и сузить, это вы PHP или ваш Javascript.

Мой сценарий Java ржавый, но вы уверены, что xmlhttp.onreadystatechange работает правильно?