Paul Posted October 30, 2012 Share Posted October 30, 2012 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 More sharing options...
Edward Posted October 30, 2012 Share Posted October 30, 2012 Its because you need to insert the while loop in one of those model divs. I don't have the actual model window code on me now but my guess is model content div. 1 Link to comment Share on other sites More sharing options...
Paul Posted November 26, 2012 Author Share Posted November 26, 2012 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 More sharing options...
Larry Posted November 26, 2012 Share Posted November 26, 2012 Your code ends up reusing the same ID value over and over. IDs must be unique within the DOM. 1 Link to comment Share on other sites More sharing options...
Paul Posted November 26, 2012 Author Share Posted November 26, 2012 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 More sharing options...
Larry Posted November 26, 2012 Share Posted November 26, 2012 Yes, yes, and yes! Link to comment Share on other sites More sharing options...
Recommended Posts