AJAX dropdown menu selection

Question

I have an AJAX dropdown menu that present a range of options for the user based on three different parameters - once these are selected, a list is generated below.

As the user clicks and item, he is taken to:

legat.php?id=[number]

My problem is, that when the user presses the "go back" button in the browser, the AJAX list does no longer show the generated list.

The inputs ("dropdown selections") in the dropdowns are the same, but the list below is not generated.

This is big usability flaw, since the user will then have to select the three parameters again.

How do I solve this?

JavaScript:

function findLegater(val1, val2, val3) {

var stu = document.getElementById(val1).value
var ud = document.getElementById(val2).value
var kva = document.getElementById(val3).value

if (stu=="N" && ud =="0" && kva =="0") {
document.getElementById("txtHint").innerHTML="";
}
else {
if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari
    xmlhttp=new XMLHttpRequest();
}
else {// code for IE6, IE5
    xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function() {
    if (xmlhttp.readyState==4 && xmlhttp.status==200) {
        document.getElementById("txtHint").innerHTML=xmlhttp.responseText;
    }
}

xmlhttp.open("GET","getlegat.php?s="+stu+"&u="+ud+"&k="+kva,true);
xmlhttp.send();
}
}

PHP (to receive input):

$s=$_GET["s"];
$u=$_GET["u"];
$k=$_GET["k"];

include 'msql/msql-connect.php'; 

if ($s!= "N" && $u != "0" && $k!="0") {
$query = "SELECT * FROM legater WHERE studiegrad LIKE '%$s%' and studie LIKE '%$u%' and                  kvartal LIKE '%$k%'";
}
else if ($s!= "N" && $u == "0" && $k=="0")  {
$query = "SELECT * FROM legater WHERE studiegrad LIKE '%$s%'";
}
else if ($s!= "N" && $u != "0" && $k=="0")  {
$query = "SELECT * FROM legater WHERE studiegrad LIKE '%$s%' and studie LIKE '%$u%'"; 
}
else if($s== "N" && $u != "0" && $k=="0")  {
$query = "SELECT * FROM legater WHERE studie LIKE '%$u%'";
} 
else if($s== "N" && $u != "0" && $k!="0")  {
$query = "SELECT * FROM legater WHERE studie LIKE '%$u%' and kvartal LIKE '%$k%'"; 
} 
else if($s== "N" && $u == "0" && $k!="0")  {
$query = "SELECT * FROM legater WHERE kvartal LIKE '%$k%'";
} 
else if($s!= "N" && $u == "0" && $k!="0")  {
$query = "SELECT * FROM legater WHERE studiegrad LIKE '%$s%' and kvartal LIKE '%$k%'"; 
} 

// Execute query
$result = mysql_query($query) or die ("Error in" . $query);
$number = mysql_num_rows($result);

// Check result
if ($number == 0) {
  echo "Ingen legater fundet";
}
else {
  while ($row = mysql_fetch_array($result)) {
    echo "<li><a href=\"legat.php?id=" . $row['id'] . "\">" . $row['navn'] . "</a>    </li>";
  }
}

// free result set memory
mysql_free_result($result);

// close connection
mysql_close($connection);

See http://www.jscripters.com/ajax-disadvantages-and-advantages/ for disadvantages of AJAX. — , Aug 21 '13 at 14:02
`mysql_` is deprecated. Use `mysqli` instead. And `mysql_num_rows` is total waste of the server power. Use `SELECT COUNT(id) as id_rows` instead. — m1k1o, Aug 21 '13 at 14:25

score 0 · Answer 1 · edited May 23 '17 at 12:28

0

This is not a 'new' problem at all. This problem has been discovered by many people, and fixed in many places.

This will lead to many different solutions: Making Browser Back button work while using AJAX requests

edited May 23 '17 at 12:28

Community

1
1

answered Aug 21 '13 at 14:03

Shade

775
3
16

score 0 · Answer 2 · answered Aug 21 '13 at 14:21

0

You can use sessions for this... when user chooses from drop down save it to session.. on page load get id from session and send it to server, get the result.. after you session over destroy it.

answered Aug 21 '13 at 14:21

Raj Adroit

3,828
5
31
44

AJAX dropdown menu selection

2 Answers2