user3426191 user3426191 - 4 months ago 8
Ajax Question

overlay with dynamic php content the right way?

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

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);
    });
});