Can't refresh a php table using ajax

Question

I want to refresh a table from the main file of a web page using an ajax function. When the select box change its value the function dayChanged() has to be executed. This function is inside the file "ajax.js". The problem is that when I select another option of the elect box nothing happens. I include the file like: <script src="ajax.js></script> . I expect to send the value of the select box to a MySQL query (this query is inside "config.php") and then refresh the table of the main file. Here's the main:

<html>  
<head> 
<style type="text/css">
body {
    background-color: #9C3;
}
p {color:black;}
.table_test {
    font-family: Constantia, Lucida Bright, DejaVu Serif, Georgia, serif;
}
</style>
<script src="ajax.js"></script>
</head>
<body><div align='center'>
<div class="table_test">  
  <table border='1' cellpadding='0' cellspacing='0' width='600' bgcolor='#F6F6F6' bordercolor='#FFFFFF'>  
    <tr>  
      <td width='150' style='font-weight: bold'></td>
      <td width='150' style='font-weight: bold'>Festa</td> 
      <td width='150' style='font-weight: bold'>Preu</td>  
      <td width='150' style='font-weight: bold'>Entrada</td>
      <td width='150' style='font-weight: bold'>Final</td>
      <td width='150' style='font-weight: bold'>Estil</td>
      <td width='150' style='font-weight: bold'>Llista</td>  
    </tr>

<form name="form1" method="post"> 
<div id="table_var">  
<?php
    include ('functions.php');
    $dw = date("w");
    display_table_by_day($dw);
?> 
  </table>    
</div>
<p>Veure un altre dia de la setmana:
  <select name="select_day" id="day_select" onChange="dayChanged()">
    <option value="1">Dilluns</option>
    <option value="2">Dimarts</option>
    <option value="0">Diumenge</option>
  </select>
</p>
</form>
</body>  
</html>

The function display_table_by_day($dw) is working right. The ajax.js file is:

function dayChanged()
{
var buscaAjax;
if(window.XMLHttpRequest)
{
    buscaAjax = new XMLHttpRequest();
}else{
    buscaAjax = new ActiveXOject("Microsoft.XMLHTTP");
    }
    buscaAjax.onreadystatechange = function(){
        if(buscaAjax.readyState==4 && buscaAjax.status==200){
            document.getElementById('table_var').innerHTML = buscaAjax.responseText;
            }
        }
        var dato = document.form1.select_day.value;
        buscaAjax.open("GET","config.php?variable="+dato,true);
        buscaAjax.send();
}

Finally, the config.php file is:

<?php
error_reporting(E_ALL ^ E_NOTICE);
include ('connection.php');
include ('functions.php');

$dw = $_GET['variable'];
display_table_by_day($dw);

?>

Any idea why is not working?

Answer 1

You are referencing the select by name:

var dato = document.form1.select_day.value;

Change it to the id of the select like this:

var dato = document.form1.day_select.value;

Can't refresh a php table using ajax

Question

1 answers

solution1
0 2013-11-21 23:20:40

Can't refresh a php table using ajax

Question

1 answers

solution1 0 2013-11-21 23:20:40

solution1
0 2013-11-21 23:20:40