How can get the refreshed option values from database only when i click on select box?

Question

I want to get the refreshed option values from database only when i click on select box.

Suppose two waiter open the same order panel page at same time. Then table no:2 is shown as free in both of the panel.

Now a waiter booked table no:2. Then another waiter when clicked on the select box, he will not get the table no:2 in the options.

<select name="table_id" class="form-control tablename">
<option disabled="disabled">Select Table</option>
<?php $result =  mysql_query("select * from rtable r
inner join table_status as ts 
on ts.status_id=r.status_id  
where ts.status!='Booked'
order by r.table_id desc")or die(mysql_error()); 
while ($row=mysql_fetch_array($result)){ ?>
<option value="<?php echo $row['table_id'];?>"><?php echo $row['table_name']; ?></option>
<?php } ?>
</select>

table_status

rtable

Answer 1

Create function in php to generate options ( sending html is not good practice but I am adjusting to this example). In this particular example i suggest to create functions.php file and there add printSelectOptions function declaration:

function printSelectOptions(){

  $result =  mysql_query("select * from rtable r
  inner join table_status as ts 
  on ts.status_id=r.status_id  
  where ts.status!='Booked'
  order by r.table_id desc")or die(mysql_error()); 

  echo "<option disabled='disabled'>Select Table</option>";

  while ($row=mysql_fetch_array($result)){

    echo "<option value=".$row['table_id'].">".$row['table_name']."</option>";
  }

}

Above function prints all html options for select.

Use it function in generating select ( remember that functions.php should be included in any file with usage of printSelectOptions ) :

<?php
//db connection code
require_once("functions.php");//here we add our function to be available in this file

?>

<select name="table_id" class="form-control tablename">
<?php printSelectOptions() ?>
</select>

In frontend bind Your select ( javascript code ):

document.addEventListener("DOMContentLoaded", function(event) {

 var select=document.querySelector("select"); //this is pure selector gets first select on page

 //function sends ajax and refresh options of select
 function refreshOptions(){

     //send ajax request
     select.innerHTML="<option>Loading..</option>"; //loading info

     var xmlhttp=new XMLHttpRequest();
     xmlhttp.open("GET", 'yourSecondPHPScript.php');//here example url where we get updated options
     xmlhttp.onreadystatechange = function() {
         if (xmlhttp.readyState == XMLHttpRequest.DONE) {
             if(xmlhttp.status == 200){
                 select.innerHTML = xmlhttp.responseText;//set new options
             }else{
                 console.log('Error: ' + xmlhttp.statusText )
                 select.innerHTML="<option>Connection problem</option>";
             }
         }
     }
     xmlhttp.send();  

 };

 //bind our select
 select.addEventListener("focus",function(){

     refreshOptions();        

 });

});

Last create example yourSecondPHPScript.php and in it use function:

 <?php
 //db connection code
 require_once("functions.php");//here we add our function to be available in this file

 printSelectOptions();//outputs options

To be sure that users will not take the same table besides checking in focus check it again in some submit of order form. So if table was taken refresh select ( by ajax using refreshOptions() ) and show info that this table was taken.

Last thing is to secure it on server side, create some check function in php ( PHP CODE ):

function tableCanBeTaken($optionId){

  //this code adds **and** to query with id to check but optionId should be validate before using in query

  $result =  mysql_query("select * from rtable r
  inner join table_status as ts 
  on ts.status_id=r.status_id  
  where ts.status!='Booked'
  and ts.table_id=$optionId ")or die(mysql_error()); 


  return mysql_fetch_array($result); //if row exists - will be false if not exists row with table_id==$optionId and not booked

  }

}

Then use it (PHP CODE ):

if (tableCanBeTaken($youOptionId)){

    //here code for taking option

}else{

    //here option is taken

}

Answer 2

Have the ajax call in the focus event of the select box.In the success of the call, append the data(available tables) to the select input.Until then, leave the select box options as 'Loading. Hope this helps!

Answer 3

@Maciej Sikora

problem is fixed. printSelectOptions() function can not be called from another file like yourSecondPHPScript. And also needs to remove the back-slash from url.

xmlhttp.open("GET", 'yourSecondPHPScript.php');

i just paste the same code in yourSecondPHPScript.php like below

<?php 
include("connect.php");

$result =  mysql_query("select * from rtable r inner join table_status as ts on ts.status_id=r.status_id where ts.status!='Booked' order by r.table_id desc")or die(mysql_error()); 
  echo "<option disabled='disabled'>Select Table</option>";
  while ($row=mysql_fetch_array($result))
      {
        echo "<option value=".$row['table_id'].">".$row['table_name']."</option>";
      }
?>