Description in html table in Multiple Select Dropdown Lists

Place for comments, problems, questions, or any issue related to the JavaScript / PHP scripts from this site.
Posts: 4

Description in html table in Multiple Select Dropdown Lists

I'm using the Multiple Select Dropdown Lists with Ajax, with the code from this page:
and I tried to get description in a nice html table but I am not getting anywhere - I tried everywhere to insert between line 68/70 but it does not give me a nice table.

This is the code in select_lists.php

Code: Select all

// Multiple select lists -

// Here add your own data for connecting to MySQL database
$server = 'localhost';
$user = 'testing';
$pass = '1234';
$dbase = 'frozzie_orientation';

// Here add the name of the table and columns that will be used for select lists, in their order
// Add null for 'links' if you don`t want to display their data too
$table = 'orientation_schedule';
$ar_cols = array('campus', 'course', 'category', 'title');

//Here you can add extra columns with data for description
//Let it empty ( array(() ) if you not use additional column for description
$extra_desc = array('descr', 'start date', 'end date', 'start time', 'end time', 'location');

if(!isset($_SESSION)) session_start();
header('Content-type: text/html; charset=utf-8');

$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
$nrc = count($extra_desc);
$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

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

$_SESSION['ar_cols'][$wcol] = isset($wval) ? $conn->real_escape_string($wval) : $wcol; // store in SESSION the column and its value for WHERE

// 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 ') : '';
$get_cols = $key<$last_key ? $col : $col .($nrc >0 ?','. implode(',', $extra_desc) :'');
$get_cols = '`'. str_replace(array('`', ','), array('', '`,`'), $get_cols) .'`'; //add the column names between `..`
$sql = "SELECT DISTINCT $get_cols 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) {
// sets the "onchange" event, which is added in <select> tag
$onchg = $next_col!==null ? " onchange=\"ajaxReq('$next_col', this.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>- - -</option>';

while($row = $result->fetch_assoc()) {
// if its the last column, set a tablle with description, else, adds data in OPTION tags
$re_html .= '<table width="200" border="1">
<td>Start Date</td>
<td>End Date</td>
<td>Start Time</td>
<td>End Time</td>
</table>'. $row[$col] .'</td></tr>'; //start table with data from first column for description
for($i=0; $i<$nrc; $i++) $re_html .='<tr><td>'. $row[str_replace('`', '', $extra_desc[$i])] .'</td></tr>'; //add data from $extra_desc columns
$re_html .='</table>'; //end table
else $re_html .= '<option value="'. $row[$col]. '">'. $row[$col]. '</option>';

if($col!=$ar_cols[$last_key]) $re_html .= '</select> '; // ends the Select list
else { $re_html = '0 results'; }


// 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 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>var ar_cols = '.json_encode($ar_cols).'; var preid = "'. $preid. '";</script>';
else echo $re_html; 

Try to replace the code (lines 63 to 86 in your code posted above):

Code: Select all

// 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>- - -</option>';

while($row = $result->fetch_assoc()) {
  // if its the last column, set a table with description, else, adds data in OPTION tags
    $re_html .= '<table><tr><td>'. $row[$col] .'</td></tr>';  //start table with data from first column for description
    for($i=0; $i<$nrc; $i++) $re_html .='<tr><td>'. $row[str_replace('`', '', $extra_desc[$i])] .'</td></tr>';  //add data from $extra_desc columns
    $re_html .='</table>';  //end table
  else $re_html .= '<option value="'. $row[$col]. '">'. $row[$col]. '</option>';

if($col!=$ar_cols[$last_key]) $re_html .= '</select> '; // ends the Select list
With this:

Code: Select all

//if not the last column set select tag list (and the first <option>); else, html table for description
if($col!=$ar_cols[$last_key]) $re_html = $col. ': <select name="'. $col. '"'. $onchg. '><option>- - -</option>';
else $re_html ='<table width="200" border="1"><tr><th>Title</th><th>Description</th><th>Start Date</th><th>End Date</th><th>Start Time</th><th>End Time</th><th>Location</th></tr>';

while($row = $result->fetch_assoc()){
  // if the last column, add description in html table, else, adds data in OPTION tags
    $re_html .='<tr><td>'. $row[$col] .'</td>';  //1st column with description
    for($i=0; $i<$nrc; $i++) $re_html .='<td>'. $row[str_replace('`', '', $extra_desc[$i])] .'</td>'; //data from $extra_desc columns
    $re_html .='</tr>'; //end row
  else $re_html .= '<option value="'. $row[$col]. '">'. $row[$col]. '</option>';

if($col!=$ar_cols[$last_key]) $re_html .= '</select> '; //ends the Select list
else $re_html .='</table>';  //end html table 
- Also, if you want to make other modifications to the html table from php, see this tutorial: ... ml-table_t

Similar Topics