AJAX div-dropdown med resultater fra MySQL opslag
Hej alleSom titlen antyder vil jeg meget gerne have en AJAX funktion til at komme med data som en boks, under det link som skal frembringe boksen.
Jeg har et system, der tæller en masse parametre i min SQL database og udskriver antal og sammenfald til skærmen - eksempel:
20 Blå
15 Rød
4 Gul
1 Grøn
Det jeg så her ønsker er, at hvis man trykker på linket "4 Gul" kommer der til at stå noget lignende:
20 Blå
15 Rød
4 Gul
- banen
- bold
- solen
- mønt
1 Grøn
De data skal frembringes uden at "Reloade" siden altså via AJAX. Jeg har kigget på flere eksempler blandt andet på w3schools, og er fremkommet med denne omskrivning - som ikke virker desværre.
Første punkt er at overfører op til 6 parametre i kaldet - havde tænk POST i stedet for GET!?
Andet punkt er at få skrevet dataene ud når der klikkes på linket:
Her er de eksempler jeg er gået ud fra:
..:: test.js ::..
function showAllReferences(mode,counter)
{
if (mode=="")
{
document.getElementById("txtHint-"+ counter).innerHTML="";
return;
}
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystateclick=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("txtHint-"+ counter).innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","config/test.php?mode="+mode,true);
// xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
// xmlhttp.send("mode="+ mode +"&page="+ page +"&id="+ id +"&=ref="+ ref +"&start="+ start +"&end="+ end);
xmlhttp.send();
}
function showUser(str)
{
if (str=="")
{
document.getElementById("txtHint").innerHTML="";
return;
}
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","config/test.php?mode="+str,true);
xmlhttp.send();
}
..:: test.php ::.. -> bare for at se hvad jeg får med over
<?php
$mode = $_POST['mode'];
$page = $_POST['page'];
$id = $_POST['id'];
$ref = $_POST['ref'];
$start = $_POST['start'];
$end = $_POST['end'];
echo "TEST<br />TEST<br />TEST<br />TEST<br />TEST<br />";
echo "mode: ". $mode ."<br />";
echo "mode: ". $_REQUEST['mode'] ."<br />";
echo "str: ". $_GET['q'] ."<br />";
?>
..:: siden.php ::.. -> siden det bliver kaldt fra
// Første del virker!
<form>
<select name="users" onchange="showUser(this.value)">
<option value="">Select a person:</option>
<option value="1">Peter Griffin</option>
<option value="2">Lois Griffin</option>
<option value="3">Glenn Quagmire</option>
<option value="4">Joseph Swanson</option>
</select>
</form>
<br />
<div id="txtHint"><b>Person info will be listed here.</b></div>
// Anden del virker IKKE!
print ": <a onClick='showAllReferences(". $_REQUEST['mode'].",". $counter.")' title='Kig på siden: $key'>";
echo "<br /><button type='button' onClick='showAllReferences(". $_REQUEST['mode'].",". $counter.")'>Get my CD collection</button>";
// Der er værdier i både $_REQUEST[mode] og $counter!
Nogen der kan hjælpe mig?
Toste
