CODEWITHSUNDEEP
php
Elina
Elina

Reputation: 43

Display specific content according to the link clicked

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?

Upvotes: 0

Views: 67

Answers (2)

Nergal
Nergal

Reputation: 1015

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++; 
}
?>

Upvotes: 1

Vladimirs
Vladimirs

Reputation: 8599

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   
}
?>

Upvotes: 0

Related Questions