Last active
October 23, 2018 06:07
-
-
Save a-bishop/01608bbe9da12248e1416cbbe0b2b11c to your computer and use it in GitHub Desktop.
modal window generation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!--- 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'>×</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