Jump to content
Larry Ullman's Book Forums

Modal Window And Php Issue


Recommended Posts

Hi all,

Hope you're all well. Please take a look at the following code:

 

if (mysqli_num_rows($r) >= 1)

{

echo'

<h2>Snippet info</h2>

<table width="780px">

';

 

while($row = mysqli_fetch_array($r, MYSQLI_ASSOC))

{

echo'

<div class="each_snippet">

<img src="images/snippets/' . $row['image'].'.jpg" width="180px" height="180px" ><br/>

<a href="#" id="openModal">View larger image....</a>

<div id="modal">

<div id="modalMask">

</div>

<div id="modalContent">

<img src="images/snippets/' . $row['image'].'.jpg" width="500px" height="500px" >

<input type="button" id="closeModal" value="Close">

</div>

</div>

<p>'. $row['price'] . '</p>

<p>'. $row['name'] . '</p>

<p>'. $row['description'] . '</p>

</div>

';

}

 

echo'

</table>

<br />';

 

mysqli_free_result($r);

}

 

(I tried using the 'Special BBCode' button to post this but it interpreted the code instead of showing it, if that makes sense. So I had to just cut and paste).

 

I have a database of information which I have queried and styled so that the results appear as a grid, as opposed to a list. That worked fine, it displayed 6 rows of data displayed as a grid.

 

I have then added Larry's 'modal window' example from his book modifying it so that when the link is clicked it shows a larger picture than the thumbnail being displayed by default. Much to my surprise, given my understanding of JS, it worked. However it only worked for the first row of data returned from the while loop. The link in subsequent 'rows' doesn't do anything. I can copy in the JS and CSS code if anyone needs it but it's straight out of Larry's book.

 

I'm struggling to understand why it would work once only as the while loop is returning the same code. As always any help is much appreciated.

 

Cheers

Paul

Link to comment
Share on other sites

  • 4 weeks later...

Edward,

Thanks for the response but I got sidetracked and have just now returned to this problem.

 

If I use Firebug to check the HTML that has been generated by my foreach loop above then each iteration has the correct image within the modal content div. If I use a while loop then for what am I using it? If the foreach loop was only creating a single modal content div in the first iteration then I would understand why only the first one is working but that's not the case.

 

The CSS and the JS are both external files so when the link is clicked the 'openModal' function should run (as it does with the first row of data) and display it's relevant model content.

 

If you have 2 minutes would you walk me through the logic of what's not working.

 

Cheers

Paul

Link to comment
Share on other sites

Larry,

Thanks for the response.

 

So I would need, somehow, to create 12 unique 'modalContent' id's per page. I assume that the id needs to be unique to a page, not a whole site? I would then need to change the js functions to use each of the unique id's.

 

That'll keep me quiet for a while!

 

Cheers

Paul

Link to comment
Share on other sites

 Share

×
×
  • Create New...