jquery toggle div - med indhold fra database

Det bliver du nød til at gøre med AJAX. jQuery har også et AJAX API, så der kan du hente inspiration.

Hej, sidder og roder med det - men ja, den toggle'r selvfølgelig ikke: Den henter bare data ind i mit div. Ville ønske man kunne åbne og lukke den...

function show_description(str)
{
if (str=="")
  {
  document.getElementById("desc"+str).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("desc"+str).innerHTML=xmlhttp.responseText;
    }
  }
xmlhttp.open("GET","faq_getinfo.php?q="+str,true);
xmlhttp.send();
}
</script>


Kan du pege mig i den rigtige retning - er hverken ajax el. jquery haj :-)

I din oprindelige post bruger du jQuery - hvorfor bruger du så ikke også det til AJAX kaldet, istedet for at forsøge at lave noget som du allerede har tilgængeligt?

Som sagt er jeg ikke haj til nogen af delene :-) Jeg bruger lige nu koden i #2 - koden i det oprindelige indlæg er bare noget jeg har fundet, der toggle'r, som jeg ønsker det :-)

Brug koden i nummer 1 og ændrer du

<script>
    $("button").click(function () {
      $('.mybox').slideToggle("slow");
    });
</script>

til:

<script>
    $("button").click(function () {
      $.ajax({
        url: "test.html",
        success: function(html){
          $("#mybox").html(html);
        }
      });
      $('.mybox').slideToggle("slow");
    });
</script>

eller til den her, hvis boksen først skal åbne, når data er blevet hentet:

Brug koden i nummer 1 og ændrer du

<script>
    $("button").click(function () {
      $('.mybox').slideToggle("slow");
    });
</script>

til:

<script>
    $("button").click(function () {
      $.ajax({
        url: "side.php",
        success: function(data){
          $("#mybox").html(data);
        }
      });
      $('.mybox').slideToggle("slow");
    });
</script>

eller:



<script>
    $("button").click(function () {
      $.ajax({
        url: "side.php",
        success: function(data){
          $("#mybox").html(data);
          $('.mybox').slideToggle("slow");
        }
      });
    });
</script>

hvis boksen først skal åbne når du har hentet dine data.

Husk at ændre "side.php" til den side der henter de data ud du gerne vil have vist.

Hej, den loader ikke min eksterne side ind i DIV'et?

<div class="mybox" style="display:none;">a</div>

- så viser den "a", men altså ikke resten...

Hvordan kan jeg i øvrigt klare flg. 2:
- ikke bruge en button, men bare et alm. tekst-link?
- bruge et ID, så indholdet af DIV'et er forskelligt alt efter hvilken overskrift man klikker

Tak for hjælpen!

Hmm, jeg kæmper videre :-)

Tekstlink + åbn individuelle DIVs ud fra ID er på plads. Men den loader stadig ikke min side. Kan du se problemet der:

Link:
---
<a href='#' id='<?php echo $item_id; ?>' class='showdiv'><?php echo $item_title; ?></a><br><div class="mybox<?php echo $item_id; ?>" style="display:none;">a</div>
---


Kode:
---
<script>
$(".showdiv").click(function(){
 
    var element = $(this);
    var item_id = element.attr("id");
    var info = 'q=' + item_id + '';
 
  $.ajax({
    type: "GET",
    url: "fag_getinfo.php",
    data: info,
    success: function(data){
      $("#mybox' + item_id + '").html(data);
    }
  });
  $('.mybox' + item_id + '').slideToggle("slow");
});
</script>
---

Hmm ja, ok, det kunne da gøres noget nemmere:

<script>
$(".showdiv").click(function(){
 
    var element = $(this);
    var item_id = element.attr("id");
 
  $('.mybox' + item_id + '').load('faq_getinfo.php?q=' + item_id + '').slideToggle("fast");
});
</script>