Avatar billede dj-sejler Praktikant
22. september 2010 - 11:37 Der er 2 kommentarer og
1 løsning

AJAX div-dropdown med resultater fra MySQL opslag

Hej alle

Som 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
Avatar billede dj-sejler Praktikant
22. september 2010 - 11:40 #1
Faktisk må det gerne være sådan at i stedet for at virke i browsere før IE7 gerne må bede folk om at opdatere istedet... men det er ikke vigtigt!
Avatar billede aners Nybegynder
22. september 2010 - 14:23 #2
http://www.nodstrum.com/2007/09/19/autocompleter/

Jeg har brugt ovenstående - nem at implementere og modificere.
Avatar billede dj-sejler Praktikant
27. september 2010 - 20:47 #3
har jeg desværre ikke kunne bruge - og kunne heller ikke downloade koden fra siden...

men problemet er løst på andenvis, så lukker og slukker her
Avatar billede Ny bruger Nybegynder

Din løsning...

Tilladte BB-code-tags: [b]fed[/b] [i]kursiv[/i] [u]understreget[/u] Web- og emailadresser omdannes automatisk til links. Der sættes "nofollow" på alle links.

Loading billede Opret Preview
Kategori
Vi tilbyder markedets bedste kurser inden for webudvikling

Log ind eller opret profil

Hov!

For at kunne deltage på Computerworld Eksperten skal du være logget ind.

Det er heldigvis nemt at oprette en bruger: Det tager to minutter og du kan vælge at bruge enten e-mail, Facebook eller Google som login.

Du kan også logge ind via nedenstående tjenester