overlay with dynamic php content the right way?
<p>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:</p>

<p>index.php</p>

<p>In the index I have a foreach with all the records from the table and the record id.</p>

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

<p>jquery file</p>

<p>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.</p>

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

<p>article file</p>

<p>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.</p>

<pre><code>&lt;div class="article"&gt;
   &lt;!-- here I want to get the $_POST['article_id']--&gt;
&lt;/div&gt;
</code></pre>

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