Echo php数组结果外循环 - 使用jquery更新html div

Question

Ok so this one has been racking my brain. I have the following page product_main.php. This is my main product display page for my application. I am using the following code to display products based on a specific category link on another page. This works fine and displays the products based on their category:

<?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>

        ";

    }
?>

Now what I want to do is add a filter drop down to select a different category whilst on the same page. I have the following code to grab the output of function_load_product.php and update the div element on my page:

<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>

This again works fine at 'attempting' to grab the output from function_load_product.php.

I thought that using the same code as per the main display page - I would get the same functionality - but I seem to be having trouble getting anything to display.

I think I have narrowed it down to a scope issue - with the Jquery not returning anything as the echo statement is contained within the while loop.

I have attempted the following code as this did work for me on another project to return a table of results from a PHP file into a HTML doc and update the div. Sadly this does not work either! - It just returns an empty div to the main page:

<?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>";

?>

Not really sure where to go from here and to be honest I have sneaky suspicion that I am approaching the whole 'product filter' idea in the least efficient way possible! Any pointers are appreciated....

EDIT - Oh and I have also attempted to use global variables and then echo the result outside of the while loop - but it just returned an empty result to the main product page.

CORRECT ANSWER: It was something small all along! This was the option code I had:

<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>

But this should have been:

<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>

**I simply had the function call attached to the "form" tag and should have had it attached to the "select" tag.

Answer 1

Try using the developer tools in you browser to do a console log on the response of the ajax request. This will allow you to see if anything is being returned and narrow down is it you PHP or your Javascript.

My Java script is rusty but are you sure that xmlhttp.onreadystatechange is working correctly?