php in foundation modal - php

Question

I am trying to pull some information from my database and put it in a modal. I went to the foundations website and tried to figure it out from their docs section. I dont exactly understand it. So I have a section of my site that allows users to request to delete a song they uploaded. Now if they click the X a modal should pop up and ask to confirm.
<div class="row">
<div class="large-8 column musicup">
<p> <?php echo "No music uploaded..."; ?> </p>
</div>
</div>
<?php
}else{
?>
<h2 style="margin-top:1em;">Music uploaded</h2>
<hr style="opacity:.4;">
<?php
while($row_a = mysql_fetch_array($res))
{
?>
<div class="row">
<div class="large-4 column musicup">
<p><?php echo $row_a['title']; ?></p>
</div>
<div class="large-3 column musicup"><span data-tooltip class="has-tip tip-top" title="<?php echo $row_a['reason']; ?>">
<div class="button <?php echo $row_a['status'];?>"><?php echo $row_a['status'];?></div>
</span></div>
<div class="large-3 column musicup_date">
<p><?php echo date('F j Y',strtotime($row_a['uploaded'])); ?> </p>
</div>
<div class="large-2 column musicup">
<p>X</p>
</div>
</div>
<?php
}
}
}
?>
</div>
So now I have the modal and all the database queries on a new page called song_delete.php.
Here is the code for that:
<?php
include_once "functions.php";
$query = sprintf("SELECT * FROM songs WHERE user_id = %d AND song_id = %d",$_SESSION['user_id'], $_GET['id']);
$res = mysql_query($query) or die('Error: '.mysql_error ());
$row_a = mysql_fetch_assoc($res);
$totalRows_a = mysql_num_rows($res);
?>
<div id="deleteMusic" class="reveal-modal medium">
<h2>Request to delete<span style="color:#F7D745;"> <?php echo $row_a['title']; ?></h2>
<p class="lead">Are you sure you want to delete this song? Please allow 2 full business weeks for deletion.</p>
<span style="float:right;">Cancel
Submit </span>
<a class="close-reveal-modal">×</a>
</div>
Thanks for any help in advance. I appreciate it.
Please dont tell me about the mysql_query and how I should use PDO or MySQLi and OOP i know this, but this site is not currently coded with all that..

Answer 1

OK first things first - its often better to look at the compile source (HTML Source Code) in these cases. Can you do this? From the code you've given it looks fine but without the css/js linking and showing the placement of the reveal code there's no way to tell.
How Foundation Reveals Work
1 - The modal code is placed just before the ending </body>.
2 - It should look something like this:
<div id="myModal" class="reveal-modal">
<h2>Awesome. I have it.</h2>
<p class="lead">Your couch. It is mine.</p>
<p>Im a cool paragraph that lives inside of an even cooler modal. Wins</p>
<a class="close-reveal-modal">×</a>
</div>
3 - Depending on the size you want you can use an extra class of .small (for a reveal size of 30% browser width. Or one of these (taken directly from Foundation Docs)
.medium: Set the width to 40%.
.large: Set the width to 60%.
.xlarge: Set the width to 70%.
.expand: Set the width to 95%.
4 - At this point you can attach data-reveal-id="<id of modal here>" or call the modal via foundation. At this point your modal will popup in all Foundation 4 supported browsers. However you need the javascript files to close it.
5 - Now make sure you have the necessary scripts
<!-- If running version with default scripts -->
<script src="foundation.js"></script>
<script src="foundation.reveal.js"></script>
6 - Then call $(document).foundation() and then via the magical jQuery javascript library it should work as intended :-).
Extras
You can add extras attributes to reveal if you wish this way (List of all the attributes
):
$(document).foundation('reveal',<options here>,<callback>)
Lastly you might want to take the ajax tag off this (you aren't calling any content in asynchronously - it's all compiled at runtime via your server