StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

POphp include and jquery .load()
text
Body
copied!<p>I have a php page that shows a bunch of products and down the left hand side is a set of filters (e.g. colour, size, style). I originally had it so that when you choose a filter (e.g. green) it would post the form using the GET method and refresh the page with the filtered results. I'm now changing this so that it will refresh only the products content and not the whole page itself and I'm doing this with jquery.</p> <p>When the user visits the page with no filters selected, it uses a php include to show the initial results:</p> <pre><code><div id="products"> <?php include('products.php') ?> </div> </code></pre> <p>When a user clicks a filter, I'm using jquery .load() to load the the same include in its place but with the filters in the querystring:</p> <pre><code>$("#products").load("products.php?colour=green"); </code></pre> <p>When it refreshes the products div, it does the php bit fine and only shows green products.</p> <p>However, it still runs the php include under the filtered results which means I have the filtered results showing and then the php include results showing underneath and I'm not sure why!</p> <p>I have to have the php include first so that if a search engine indexes by page, it will see there's content as search engines won't execute JavaScript (see answer to <a href="https://stackoverflow.com/questions/14688490/search-engine-visibility-and-jquery-load-function">Search engine visibility and jquery load function</a>).</p> <p>Can anyone help me with this?</p> <p>EDIT: Here's my code.</p> <p>shop.php</p> <pre><code><form id="filterproducts" action="" method="get"> <div id="filters"> <p>Colour</p> <input type="checkbox" name="colour" value="red" /> Red <input type="checkbox" name="colour" value="blue" /> Blue <input type="checkbox" name="colour" value="green" /> Green <input type="checkbox" name="colour" value="yellow" /> Yellow <input type="hidden" name="colours" value="" /> </div> </form> <div id="products"> <?php include("products.php"); ?> </div> <script> $(':checkbox').change(function() { var colour = $(this).val(); $("#products").load("products.php?colour="+colour); }); </script> </code></pre> <p>products.php</p> <pre><code><?php $sql = "SELECT id, productname, productprice FROM products"; if (isset($_GET['colour']) && $_GET['colour'] != "") { $colour = $_GET['colour']; $sql .= " WHERE colour = '$colour'"; } $sql .= " ORDER BY productprice LIMIT 10"; $result = mysql_query($sql,$link); if (mysql_num_row($result) > 0) { while($line = mysql_fetch_assoc($result) { extract($line); ?> <div id="product-<?php print $id ?>"> <p> <a href="http://www.myshopsite.com/product/product-<?php print $id ?>" title="<?php print $productname ?>"> <img src="/images/product-<?php print $id ?>" alt="<?php print $productname ?>" /> <br /> <?php print $productname ?> <br /> <?php print $productprice ?> </a> </p> </div> <?php } } else { ?> <p>Sorry, there are no products to show</p> <?php } ?> </code></pre> <p>I've only added the very basic code, just so you can see what I'm doing.</p> <p>NEW EDIT: I've tested the .load() bit by putting some normal text in #products and then running the click function:</p> <pre><code><div id="products"> <p>This is some test text</p> </div> </code></pre> <p>When I click a filter, .load() replaces the <p> with whatever is in .load() so I know this bit works, it's just not removing the php include content...</p>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload