jqhoga7yah
New Member
\[quote\] Here is my test environment [1]: http://carpet.freeiz.com Objective is to display paginated search result (15 at a time) after user makes selection from the select box. I have Carpet_Finder.php to display select boxes. once first option is selected from the select boxes and search button is clicked, 15 images are displayed. When i click next or page 2 at the bottom of the page, page layout disappears and images are displayed linearly. Logic is as follows: Carpet_Finder.php calls global.js when search button is clicked. global.js calls update.php to fetch data from the database and then global.js renders the returned data on Carpet_finder.php Can someone please let me know how i can rectify this issue?\[/quote\]\[code\]** - Carpet_Finder.php** <?php//Query the DB for the result we want$dropboxquery_size=mysql_query("SELECT distinct Size FROM Product_Details");$dropboxquery_color=mysql_query("SELECT DISTINCT Color FROM Product_Details");$dropboxquery_shape=mysql_query("SELECT DISTINCT Shape FROM Product_Details");$dropboxquery_style=mysql_query("SELECT DISTINCT Style FROM Product_Details");$dropboxquery_weave=mysql_query("SELECT DISTINCT Weave FROM Product_Details");?><div class="select_carpet"><!--<form name="form1" action="Update.php" method="POST">--><!--<font size="5"><b>Select from drop down to search carpet</b></font><br/>--><div class="select_box"><?php echo "<select id='color' name='color'>"; echo "<option selected='selected'>Select Color</option>"; while($row1 = mysql_fetch_array($dropboxquery_color)) { echo "<option value='".$row1[0]."'>".$row1[0]."</option>"; } echo "</select>"; ?></div><div class="select_box"><?php echo "<select id='size' name='size'>"; echo "<option selected='selected'>Select Size</option>"; while($row2 = mysql_fetch_array($dropboxquery_size)) { echo "<option value='".$row2[0]."'>".$row2[0]."</option>"; } echo "</select>"; ?></div><div class="select_box"><?php echo "<select id='shape' name='shape'>"; echo "<option selected='selected'>Select Shape</option>"; while($row3 = mysql_fetch_array($dropboxquery_shape)) { echo "<option value='".$row3[0]."'>".$row3[0]."</option>"; } echo "</select>"; ?></div><div class="select_box"><?php echo "<select id='style' name='style'>"; echo "<option selected='selected'>Select Style</option>"; while($row4 = mysql_fetch_array($dropboxquery_style)) { echo "<option value='".$row4[0]."'>".$row4[0]."</option>"; } echo "</select>"; ?></div><div class="select_box"><?php echo "<select id='weave' name='weave'>"; echo "<option selected='selected'>Select Weave</option>"; while($row5 = mysql_fetch_array($dropboxquery_weave)) { echo "<option value='".$row5[0]."'>".$row5[0]."</option>"; } echo "</select>"; ?></div><input type="submit" id="find-submit" value="http://stackoverflow.com/questions/15755205/Search" onClick="javascript:ajax_post(1);"/></div><hr /><!--End of Select div--><!--End Carpet Finder--><!--Start Body--> <div class="CF_body_container_list" id="CF_body_container_list"> <!--<progress id="progressBar" value="http://stackoverflow.com/questions/15755205/50" max="100" style="width:300px; height:44px;" ></progress> <span id="showstatus"></span>--> <script src="http://stackoverflow.com/questions/15755205/scripts/jquery-1.8.0.min.js" type="text/javascript"></script> <script src="http://stackoverflow.com/questions/15755205/scripts/global.js" type="text/javascript"></script>\</div>** - Update.php** <?php //Connect to the MySQL database include "connect_to_mysql.php"; if (isset($_GET['pn'])) { // Get pn from URL vars if it is present $pn = preg_replace('#[^0-9]#i', '', $_GET['pn']); // filter everything but numbers for security(new) // $pncounter=$pn;//$pn = ereg_replace("[^0-9]", "", $_GET['pn']); // filter everything but numbers for security(deprecated)} else { // If the pn URL variable is not present force it to be value of page number 1 $pn = 1; //$pncounter=$pn;} $color = $_GET['color']; $shape = $_GET['shape']; $size = $_GET['size']; $weave = $_GET['weave']; $style = $_GET['style']; $sql = mysql_query("SELECT * FROM Product_Details WHERE Color='$color' AND Shape='$shape' AND Size='$size' AND Style='$style' AND WEAVE='$weave'"); $productCount = mysql_num_rows($sql); // count the output amount if($productCount == 0) { echo "No Matching Record Found"; } else { //////////////////////////////////// Adam's Pagination Logic ////////////////////////////////////////////////////////////////////////$nr = mysql_num_rows($sql); // Get total of Num rows from the database query//This is where we set how many database items to show on each page $itemsPerPage = 15; // Get the value of the last page in the pagination result set$lastPage = ceil($nr / $itemsPerPage);// Be sure URL variable $pn(page number) is no lower than page 1 and no higher than $lastpageif ($pn < 1) { // If it is less than 1 $pn = 1; // force if to be 1} else if ($pn > $lastPage) { // if it is greater than $lastpage $pn = $lastPage; // force it to be $lastpage's value} // This creates the numbers to click in between the next and back buttons// This section is explained well in the video that accompanies this script$centerPages = "";$sub1 = $pn - 1;$sub2 = $pn - 2;$add1 = $pn + 1;$add2 = $pn + 2;if ($pn == 1) { $centerPages .= ' <span class="pagNumActive">' . $pn . '</span> '; $centerPages .= ' <a href="' . $_SERVER['PHP_SELF'] . '?color='.$color.'&shape='.$shape.'&size='.$size.'&weave='.$weave.'&style='.$style. '&pn=' . $add1 . '">' . $add1 . '</a> ';} else if ($pn == $lastPage) { $centerPages .= ' <a href="' . $_SERVER['PHP_SELF'] . '?color='.$color.'&shape='.$shape.'&size='.$size.'&weave='.$weave.'&style='.$style.'&pn=' . $sub1 . '">' . $sub1 . '</a> '; $centerPages .= ' <span class="pagNumActive">' . $pn . '</span> ';} else if ($pn > 2 && $pn < ($lastPage - 1)) { $centerPages .= ' <a href="' . $_SERVER['PHP_SELF'] . '?color='.$color.'&shape='.$shape.'&size='.$size.'&weave='.$weave.'&style='.$style.'&pn=' . $sub2 . '">' . $sub2 . '</a> '; $centerPages .= ' <a href="' . $_SERVER['PHP_SELF'] . '?color='.$color.'&shape='.$shape.'&size='.$size.'&weave='.$weave.'&style='.$style.'&pn=' . $sub1 . '">' . $sub1 . '</a> '; $centerPages .= ' <span class="pagNumActive">' . $pn . '</span> '; $centerPages .= ' <a href="' . $_SERVER['PHP_SELF'] . '?color='.$color.'&shape='.$shape.'&size='.$size.'&weave='.$weave.'&style='.$style.'&pn=' . $add1 . '">' . $add1 . '</a> '; $centerPages .= ' <a href="' . $_SERVER['PHP_SELF'] . '?color='.$color.'&shape='.$shape.'&size='.$size.'&weave='.$weave.'&style='.$style.'&pn=' . $add2 . '">' . $add2 . '</a> ';} else if ($pn > 1 && $pn < $lastPage) { $centerPages .= ' <a href="' . $_SERVER['PHP_SELF'] . '?color='.$color.'&shape='.$shape.'&size='.$size.'&weave='.$weave.'&style='.$style.'&pn=' . $sub1 . '">' . $sub1 . '</a> '; $centerPages .= ' <span class="pagNumActive">' . $pn . '</span> '; $centerPages .= ' <a href="' . $_SERVER['PHP_SELF'] . '?color='.$color.'&shape='.$shape.'&size='.$size.'&weave='.$weave.'&style='.$style.'&pn=' . $add1 . '">' . $add1 . '</a> ';}// This line sets the "LIMIT" range... the 2 values we place to choose a range of rows from database in our query$limit = 'LIMIT ' .($pn - 1) * $itemsPerPage .',' .$itemsPerPage; // Now we are going to run the same query as above but this time add $limit onto the end of the SQL syntax// $sql2 is what we will use to fuel our while loop statement below$sql2 = mysql_query("SELECT * FROM Product_Details WHERE Color='$color' AND Shape='$shape' AND Size='$size' AND Style='$style' AND Weave='$weave' ORDER BY Pid ASC $limit"); //////////////////////////////// END Adam's Pagination Logic ///////////////////////////////////////////////////////////////////////////////////////////////////////////////////// Adam's Pagination Display Setup /////////////////////////////////////////////////////////////////////$paginationDisplay = ""; // Initialize the pagination output variable// This code runs only if the last page variable is not equal to 1, if it is only 1 page we require no paginated links to displayif ($lastPage != "1"){ // This shows the user what page they are on, and the total number of pages $paginationDisplay .= 'Page <strong>' . $pn . '</strong> of ' . $lastPage. ' '; // If we are not on page 1 we can place the Back button if ($pn != 1) { $previous = $pn - 1; $paginationDisplay .= ' <a href="' . $_SERVER['PHP_SELF'] . '?color='.$color.'&shape='.$shape.'&size='.$size.'&weave='.$weave.'&style='.$style.'&pn=' . $previous . '"> Back</a> '; } // Lay in the clickable numbers display here between the Back and Next links $paginationDisplay .= '<span class="paginationNumbers">' . $centerPages . '</span>'; // If we are not on the very last page we can place the Next button if ($pn != $lastPage) { $nextPage = $pn + 1; $paginationDisplay .= ' <a href="' . $_SERVER['PHP_SELF'] . '?color='.$color.'&shape='.$shape.'&size='.$size.'&weave='.$weave.'&style='.$style.'&pn=' . $nextPage . '"> Next</a> '; } }///////////////////////////////////// END Adam's Pagination Display Setup ///////////////////////////////////////////////////////////////////////////if ($productCount > 0) {?> <br /> <div class="product_list"> <div class="row"> <?php $Column_Counter=0; $Product_Counter=0; $remainingProduct_Counter=0; if(($productCount-($pn-1)*15)>=15) { $remainingProduct_Counter=15; } else { $remainingProduct_Counter=($productCount-($pn-1)*15); } while($row = mysql_fetch_array($sql2)){ $Column_Counter=$Column_Counter+1; $Product_Counter=$Product_Counter+1; $ProductID = $row["Pid"]; $imagepath="images/".$ProductID.".JPG";?> <div class="box"> <?php echo '<a href="http://stackoverflow.com/questions/15755205/product_datail.php?id='.$ProductID.'"><img src="'.$imagepath.'" width="150px" height="200px" align="center" alt="random image"></a>'; ?> </div> <?php if ($Column_Counter==5) { $Column_Counter=0;?> </div> <div class="clear"></div> <br /><br /> <?php if($Product_Counter < $remainingProduct_Counter) { ?> <div class="row"> <?php } } else { if($Product_Counter == $remainingProduct_Counter) {?> </div> <div class="clear"></div> <?php } } } } else { echo "That item does not exist."; exit(); }}mysql_close();?></div><!--End of product_list--></div><!--End Body--><div class="pagination"> <!--Bottom Pagination Begins--> <?php echo $paginationDisplay?> <!--Bottom Pagination Ends--></div>** - global.js** function ajax_post(pn){ // Create our XMLHttpRequest object var hr = new XMLHttpRequest(); // Create some variables we need to send to our PHP file var color = document.getElementById("color").value; var style = document.getElementById("style").value; var shape = document.getElementById("shape").value; var size = document.getElementById("size").value; var weave = document.getElementById("weave").value; if (color == "Select Color"){ alert("Please Select Color"); } else if(shape == "Select Shape") { alert("Please Select Shape"); }else if(style == "Select Style") { alert("Please Select Style"); }else if(weave == "Select Weave") { alert("Please Select Weave"); }else if(size == "Select Size") { alert("Please Select Size"); } else { var URL = "../Update.php?color=" + color + "&shape=" + shape + "&style=" + style + "&size=" + size + "&weave=" + weave + "&pn=" + pn; //var vars = "color="+color+"&style="+style+"&size="+size+"&shape="+shape+"&weave="+weave; hr.open("GET", URL, true); // Set content type header information for sending url encoded variables in the request hr.setRequestHeader("Content-type", "application/x-www-form-urlencoded"); // Access the onreadystatechange event for the XMLHttpRequest object hr.onreadystatechange = function() { if(hr.readyState == 4 && hr.status == 200) { var return_data = http://stackoverflow.com/questions/15755205/hr.responseText; document.getElementById("CF_body_container_list").innerHTML = return_data; } } // Send the data to PHP now... and wait for response to update the status div hr.send(); // Actually execute the request document.getElementById("CF_body_container_list").innerHTML = "processing..."; }}\[/code\]