Overlay mit dynamischen PHP-Inhalten den richtigen Weg?

Question

Ich habe ein paar Probleme mit der Anzeige dynamischer Inhalte von einer Klick-Funktion und in eine Art Lichtkasten, den ich gemacht habe. gibt es drei Dateien aufgelistet:

index.php

Im Index Ich habe eine foreach mit allen Datensätzen aus der Tabelle und der Datensatz-ID.

<?php 
    foreach($id as $id){ 
?> 
    <div class="event"> 
     <a class="id" href="javascript:void(0)" id="<?php echo $id;?>">click to see more</a> 
    </div> 
<?php 
    } 
?> 

jquery Datei

In der jQuery-Datei Ich klicke ich die ID des Elements zu bekommen. jetzt möchte ich es in die Artikeldatei übergeben, um die Daten mit der angeklickt ID zu holen. Ich benutze die Funktion .load, um die Datei in den Leuchtkasten zu laden, aber ich kann die ID nicht bekommen.

$('.id').click(function(){ 
    var article_id = $(this).prop('id'); 
    $.post("article.php", {"article_id": event_id}); 
    $('.article').load("article.php"); 
}); 

Artikeldatei

Hier mag ich mit $ .post die article_id von Jquery erhalten, aber ich bin einen undefinierten Index zu bekommen. Ich denke, es ist, weil die Datei article.php vor der Anfrage geladen wurde.

Ich hoffe, jemand kann mir helfen, oder mir sagen, der richtige Weg, es zu tun.

Answer 1

Try this:

$('.id').click(function(){ 
    var article_id = $(this).prop('id'); 
    // send article_id and get the return content in data 
    $.post("article.php", {article_id : article_id}, function(data){ 
     $('.article').html(data); 
    }); 
}); 

Answer 2

versuchen diesen Code:

<?php 

$idlist = array(1,2,3,4); 
    foreach($idlist as $id){ 
?> 
    <div class="event"> 
     <a class="id" href="javascript:void(0)" id="<?php echo $id;?>">click to see more</a> 
    </div> 
<?php 
    } 
?> 



<div class="article"> 

</div> 

<script language="javascript"> 
     $(function(){ 
      $('.id').click(function(){ 
       $(".article").load("article.php", {id: $(this).attr('id')}); 
      }) 
     }) 
</script>