Hi Guys,
I am a desperate noob with PHP, usually I get where I need to be with creative copy pasting and reading other peoples post. But i’ve been working on this specific piece of code for more then 14 hours now and I still can’t get it to do what I want!
So the idea is very basic, the script should query some info from the SQL database and dynamicly create some boxes as an output. The last output however (output 4) should output an url and redirect the user to this URL. The idea for this code is to create a product finder with links to the desired product.
However I tried using the ‘header’ PHP function to redirect the user, but for some reason this doesn’t get executed, if it does something at all it will only work when I send it a non url like ‘test’. If I feed it ‘http://www.test.nl’ nothing happens at all. Then I tried outputting Javascript to redirect, but it seems if you insert Javascript into an already loaded page it doesn’t execute anymore.
The index.php code:
<?php include 'select_list.php'; ?>
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>Triple Select drop down list with Ajax</title>
<script src="ajax_select.js" type="text/javascript"></script>
</head>
<body>
<form action="" method="post">
Kies uw adapter : <?php echo $re_html; ?>
</form>
</body>
</html>The select_list.php :
I’ve commented out ‘//’ some of my attempts with my findings…
<?php
// Multiple select lists - www.coursesweb.net/ajax/
if(!isset($_SESSION)) session_start();
// Here add your own data for connecting to MySQL database
$server = 'localhost';
$user = 'root';
$pass = '';
$dbase = 'budgetadapter_selector';
// Here add the name of the table and columns that will be used for select lists, in their order
// Add null for 'col_description' if you don`t want to display their data too
$table = 'adapters';
$ar_cols = array('Merk', 'Model', 'Type', 'Link');
$preid = 'slo_'; // a prefix used for element's ID, in which Ajax will add <select>
$col = $ar_cols[0]; // the variable used for the column that wil be selected
$re_html = ''; // will store the returned html code
// if there is data sent via POST, with index 'col' and 'wval'
if(isset($_POST['col']) && isset($_POST['wval'])) {
// set the $col that will be selected and the value for WHERE (delete tags and external spaces in $_POST)
$col = trim(strip_tags($_POST['col']));
$wval = "'".trim(strip_tags($_POST['wval']))."'";
}
$key = array_search($col, $ar_cols); // get the key associated with the value of $col in $ar_cols
$wcol = $key===0 ? $col : $ar_cols[$key-1]; // gets the column for the WHERE clause
$_SESSION['ar_cols'][$wcol] = isset($wval) ? $wval : $wcol; // store in SESSION the column and its value for WHERE
// gets the next element in $ar_cols (needed in the onchange() function in <select> tag)
$last_key = count($ar_cols)-1;
$next_col = $key<$last_key ? $ar_cols[$key+1] : '';
$conn = new mysqli($server, $user, $pass, $dbase); // connect to the MySQL database
if (mysqli_connect_errno()) { exit('Connect failed: '. mysqli_connect_error()); } // check connection
// sets an array with data of the WHERE condition (column=value) for SELECT query
for($i=1; $i<=$key; $i++) {
$ar_where[] = '`'.$ar_cols[$i-1].'`='.$_SESSION['ar_cols'][$ar_cols[$i-1]];
}
// define a string with the WHERE condition, and then the SELECT query
$where = isset($ar_where) ? ' WHERE '. implode($ar_where, ' AND ') : '';
$sql = "SELECT DISTINCT `$col` FROM `$table`".$where;
$result = $conn->query($sql); // perform the query and store the result
// if the $result contains at least one row
if ($result->num_rows == 0 || $result->num_rows == 1 || $result->num_rows == 2) {
// sets the "onchange" event, which is added in <select> tag
$onchg = $next_col!==null ? " onchange=\"ajaxReq('$next_col', this.value);\"" : '';
// $onchg = $next_col!==null ? " onchange=\"location.href='http://' + this.options[this.selectedIndex].value;\"" : '';
// sets the select tag list (and the first <option>), if it's not the last column
// if($col!=$ar_cols[$last_key]) $re_html = $col. ': <select name="'. $col. '"'. $onchg. '><option>Merk</option>';
if($col==$ar_cols[0]) $re_html = '<select name="'. $col. '"'. $onchg. '><option>Kies uw Merk</option>';
if($col==$ar_cols[1]) $re_html = '<select name="'. $col. '"'. $onchg. '><option>Kies uw Model</option>';
if($col==$ar_cols[2]) $re_html = '<select name="'. $col. '"'. $onchg. '><option>Kies uw Type</option>';
// if($col!=$ar_cols[$last_key]) { header("HTTP/1.0 302 Moved Temporarily"); header ("Location: test"); }
while($row = $result->fetch_assoc()) {
// if its the last column, reurns its data, else, adds data in OPTION tags
// if($col==$ar_cols[$last_key]) $re_html .= '<br/><script type="text/javascript">window.location="'. $row[$col]. '"; </script>'; // this doesnt work because the JS doesnt execute?
if($col==$ar_cols[$last_key]) $re_html .= $row[$col]; // print for debug reasons
if($col==$ar_cols[$last_key]) { header ("Location: $row[$col]"); exit; }// doesn't work for unknown reason?
else $re_html .= '<option value="'. $row[$col]. '">'. $row[$col]. '</option>';
}
if($col!=$ar_cols[$last_key]) $re_html .= '</select> '; // ends the Select list
// if($col==$ar_cols[$last_key]) { header("HTTP/1.0 302 Moved Temporarily"); header ("Location: test"); }
}
else { $re_html = '0 results'; }
$conn->close();
// if the selected column, $col, is the first column in $ar_cols
if($col==$ar_cols[0]) {
// adds html code with SPAN (or DIV for last item) where Ajax will add the select dropdown lists
// with ID in each SPAN, according to the columns added in $ar_cols
for($i=1; $i<count($ar_cols); $i++) {
if($ar_cols[$i]===null) continue;
if($i==$last_key) $re_html .= '<div id="'. $preid.$ar_cols[$i]. '"> </div>';
else $re_html .= '</span></br><span id="'. $preid.$ar_cols[$i]. '"> </span>';
}
// adds the columns in JS (used in removeLists() to remove the next displayed lists when makes other selects)
$re_html .= '<script type="text/javascript">var ar_cols = '.json_encode($ar_cols).'; var preid = "'. $preid. '";</script>';
}
else echo $re_html;
?>And the javascript ajax_select.js
[code]// Multiple select lists - www.coursesweb.net/ajax/
// function used to remove the next lists already displayed when it chooses other options
function removeLists(colid) {
var z = 0;
// removes data in elements with the id stored in the “ar_cols” variable
// starting with the element with the id value passed in colid
for(var i=1; i<ar_cols.length; i++) {
if(ar_cols[i]==null) continue;
if(ar_cols[i]==colid) z = 1;
if(z==1) document.getElementById(preid+ar_cols[i]).innerHTML = ‘’;
}
}
// create the XMLHttpRequest object, according browser
function get_XmlHttp() {
// create the variable that will contain the instance of the XMLHttpRequest object (initially with null value)
var xmlHttp = null;
if(window.XMLHttpRequest) { xmlHttp = new XMLHttpRequest(); } // for Forefox, IE7+, Opera, Safari
else if(window.ActiveXObject) { xmlHttp = new ActiveXObject(“Microsoft.XMLHTTP”); } // IE5 or 6
return xmlHttp;
}
// sends data to a php file, via POST, and displays the received answer
function ajaxReq(col, wval) {
removeLists(col); // removes the already next selects displayed
// if the value of wval is not ‘- - -’ and ‘’ (the first option)
if(wval!=’- - -’ && wval!=’’) {
var request = get_XmlHttp(); // call the function with the XMLHttpRequest instance
var php_file = ‘http://localhost/budgetadapter/modules/cyberselector/select_list.php’; // path and name of the php file
// create pairs index=value with data that must be sent to server
var data_send = 'col='+col+'&wval='+wval;
request.open("POST", php_file, true); // set the request
document.getElementById(preid+col).innerHTML = 'Loading...'; // display a loading notification
// adds a header to tell the PHP script to recognize the data as is sent via POST
request.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
request.send(data_send); // calls the send() method with data_send
// Check request status
// If the response is received completely, will be added into the tag with id value of "col"
request.onreadystatechange = function() {
if (request.readyState==4) {
document.getElementById(preid+col).innerHTML = request.responseText;
}
}
}
}
[/code]
I am out of ideas and I cannot find a generic answer on any forum. If any of you guys has a suggestion I would be really really grateful! I’ve attached a .zip file with all the scripts including my used SQL database (very tiny for testing).
Thanks a lot in advance everyone!!
Bosti
And to go even further on this, you could even choose to use the product URL’s instead of the correct productid variable link. I understand that if your product link changes your database URLs break. But we only have about 25 products and they are easy searched & replaced for now.
