Display specific content according to the link clicked

Question

So I have a gallery web page showing all user's folders that contains images (Something like Behance or Pinterest):

<div id="project_display">

<?php
$img_title_display = mysqli_query($db, "SELECT DISTINCT title, description, category FROM images WHERE user_id='$user_id' ORDER BY title");
while($row = $img_title_display->fetch_assoc())
{   
?>

<a href="#openModal2" id="Modal"><p><?php echo ($row['title']);?></p></a>

<?php   
}
?>
</div>

Then, after clicking on any folder, the modal window appears and you can see folder's content:

<div id="openModal2" class="modalDialog">
<div>
<a href="#close" title="Close" class="close">X</a>

<?php
$img_desc_display = mysqli_query($db, "SELECT DISTINCT title, description, category FROM images WHERE user_id='$user_id' ORDER BY title");
$img_details=mysqli_fetch_array($img_desc_display,MYSQLI_ASSOC);
?>

<h2><?php echo ($img_details['title']); ?></h2><br/>
<p><?php echo($img_details['description']); ?></p>
<p><?php echo($img_details['category']); ?></p>

</div></div>

The problem is that now in each folder it shows the same content (first row from the database). How to specify the link so that each folder had an appropriate content?

[Your script is at risk for SQL Injection Attacks.](http://stackoverflow.com/questions/60174/how-can-i-prevent-sql-injection-in-php) Learn about [prepared](http://en.wikipedia.org/wiki/Prepared_statement) statements for [MySQLi](http://php.net/manual/en/mysqli.quickstart.prepared-statements.php). — Jay Blanchard, Mar 24 '16 at 18:00
Ok thank you, I will.. But it doesn't solve my problem unfortinately — Elina, Mar 24 '16 at 18:06
Please show us the JavaScript or jQuery code you use for the modal. — Nergal, Mar 24 '16 at 18:18
http://www.webdesignerdepot.com/2012/10/creating-a-modal-window-with-html5-and-css3/ — Elina, Mar 24 '16 at 18:24
For every anchor tag there should be a unique id and href and to open the modal with different details pass that unique id appropriately. — Vishnu Sharma, Mar 24 '16 at 18:34
Thanks, Vishnu Sharma, could you please give a simple example of how the code should looks like? — Elina, Mar 24 '16 at 18:45

score 1 · Answer 1 · answered Mar 24 '16 at 18:54

Okay, so if you want to do this with CSS3 and HTML5 you have to create a modal for each folder and this is not supported by Safari, Firefox, Edge and IE. So if you can use ajax instead of this method.

<div id="project_display">

<?php
$i = 0;
$img_title_display = mysqli_query($db, "SELECT DISTINCT title, description, category FROM images WHERE user_id='$user_id' ORDER BY title");
while($row = $img_title_display->fetch_assoc())
{   
?>
<a href="#openModal<?php echo $i; ?>" id="Modal">
    <p><?php echo ($row['title']);?></p>
</a>

<?php  $i++; 
}
?>
</div>

Modals:

<?php
$i = 0;
$img_details = mysqli_query($db, "SELECT DISTINCT title, description, category FROM images WHERE user_id='$user_id' ORDER BY title");
while($row = $img_details->fetch_assoc())
{   
?>
<div id="openModal<?php echo $i; ?>" class="modalDialog">
    <div>
        <a href="#close" title="Close" class="close">X</a>

        <h2><?php echo ($row['title']); ?></h2><br/>
        <p><?php echo($row['description']); ?></p>
        <p><?php echo($row['category']); ?></p>

    </div>
</div>

<?php  $i++; 
}
?>

score 0 · Accepted Answer · answered Mar 24 '16 at 18:45

In order to display folder contents that you clicked, you have to filter the query in modal e.g:

$img_desc_display = mysqli_query($db, "SELECT DISTINCT title, description, category FROM images WHERE user_id='$user_id' AND category='$category' ORDER BY title");

This query will require you to store whatever identifies your category in $category variable.

I suspect that you have a 'static' modal, which is populated only on first page load. So you will need to move all that logic to separate page and display that page from an iframe (passing category that you clicked via GET parameter) in your modal.

It is hard to say what you need to do exactly to make everything working without seeing core parts of your code (e.g how you handling modals), but I can give you example how it could work without modals.

So in page where you see all your categories:

<div id="project_display">

<?php
$img_title_display = mysqli_query($db, "SELECT DISTINCT title, description, category FROM images WHERE user_id='$user_id' ORDER BY title");
while($row = $img_title_display->fetch_assoc())
{   
?>

<a href="viewCategory.php?category=<?php echo ($row['category']);?>"><p><?php echo ($row['title']);?></p></a>

<?php   
}
?>
</div>

So you just need to pass category via GET parameter and then in new page that you will have to create (which can be used in iframe if your modal) viewCategory.php:

<?php
$category = mysql_real_escape_string( $_GET["category"] )
$img_desc_display = mysqli_query($db, "SELECT DISTINCT title, description, category FROM images WHERE user_id='$user_id' AND category='$category' ORDER BY title");

while($img_details = $img_desc_display->fetch_assoc())
{   
?>

<h2><?php echo ($img_details['title']); ?></h2><br/>
<p><?php echo($img_details['description']); ?></p>
<p><?php echo($img_details['category']); ?></p>

<?php   
}
?>

Display specific content according to the link clicked

2 Answers2