overlay with dynamic php content the right way?

Question

I am having a few problems displaying dynamic content from a click function and into sort of a light box I made. there is three files as listed:

index.php

In the index I have a foreach with all the records from the table and the record 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 file

In the jQuery file I'm getting the id of the element I'm clicking. now I want to pass it into the article file to fetch the data with the clicked id. I'm using the function .load to load the file into the lightbox but I can't get the id.

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

article file

Here, I want to receive the article_id from jquery with $.post but I'm getting an undefined index. I'm thinking it's because the article.php file has been loaded before the request.

<div class="article">
   <!-- here I want to get the $_POST['article_id']-->
</div>

I hope sombody can help me, or tell me the right way to do it.

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

try this 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>