Skip to content

Instantly share code, notes, and snippets.

@a-bishop
Last active October 23, 2018 06:07
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save a-bishop/01608bbe9da12248e1416cbbe0b2b11c to your computer and use it in GitHub Desktop.
Save a-bishop/01608bbe9da12248e1416cbbe0b2b11c to your computer and use it in GitHub Desktop.
modal window generation
<!--- php/SQL to get our record and genre info from the database --->
<?php
if (isset($_GET['genre'])) {
$genre = $_GET['genre'];
$query = "select * from RECORD where itemNumber IN
(SELECT RECORD_itemNumber from RECORD_CATEGORY where GENRE_genreID IN
(SELECT genreID from GENRE where genre = '$genre'))";
$result = mysqli_query($link, $query) or die("Error: ".mysqli_error($link));
} else {
$query = "select * from RECORD";
$result = mysqli_query($link, $query) or die("Error: ".mysqli_error($link));
}
while ($row = mysqli_fetch_array($result)) {
echo " ...
<!-- button to send info to modal window -->
<button link='" . $row['spotifyLink'] . "' description='" . htmlspecialchars(($row['description']), ENT_QUOTES) . "' releaseDate='" . $row['RELEASEDATE'] .
"' title='" . htmlspecialchars(($row['albumTitle']), ENT_QUOTES) . "' artist='" . htmlspecialchars(($row['artist']), ENT_QUOTES) . "' class='more-info btn btn-info'
data-toggle='modal' data-target='#myModal'>"
?>
<!-- start of modal window (placed at the end of the page, just above the footer -->
<div class='modal fade' id='myModal'>
<div class='modal-dialog' style='max-width:400px;'>
<div class='modal-content'>
<div class='modal-header'>
<button type='button' class='close' data-dismiss='modal'>&times;</button>
<h4 class='modal-title' id='titleArtist'>Info</h4>
</div>
<div class='modal-body'>
<span><strong>Release Date: </strong></span><p id='releaseDate'></p>
<span><strong>Description: </strong></span><p id='description'></p>
<span><strong>Listen On Spotify: </strong></span>
<iframe id='link' src='' width='250' height='80' frameborder='0' allowtransparency='true' allow='encrypted-media'></iframe>
</div>
<div class='modal-footer'>
<button type='button' class='btn btn-default' data-dismiss='modal'>Close</button>
</div>
</div>
</div>
</div>
<!-- JQuery to make the magic happen -->
<script>
$('.more-info').click(function(){
var record = "https://embed.spotify.com/?uri=";
record += $(this).attr('link');
var description = $(this).attr('description');
var title = $(this).attr('title');
var artist = $(this).attr('artist');
var titleArtist = title + " - " + artist;
var releaseDate = $(this).attr('releaseDate');
$('#titleArtist').html(titleArtist);
$('#link').attr('src', record);
$('#description').html(description);
$('#releaseDate').html(releaseDate);
});
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment