0

I'm trying to have a javascript modal window pop up on a php page within an Angular single page application. This page is loaded in after the initial index.html. The html tags are written as:

<html ng-app="myApp" class="ng-scope">

...and the content from pages that are loaded in are stored within:

<div ng-view="" class="ng-scope">

There is javascript within a particular php page that is throwing an error. Here is the full php page, including the javascript at bottom:

<!DOCTYPE html>
<html>
<head>
</head>
<body>
    <div id="myModal" class="modal">

    <!-- Modal content -->
        <div class="modal-content">
        <span class="close">&times;</span>
        <img id="popup_img" src="#">
         </div>

    </div>
    <div id="screenings">
        <?php
            $db = mysqli_connect("localhost", "root", "", "database");
            $sql = "SELECT * FROM screenings";
            $result = mysqli_query($db, $sql);
            while ($row = mysqli_fetch_array($result)){
                echo "<div id='img_div' onClick='btn()'>";
                    echo "<img id='img_screenings' class='modal_img' src='images/".$row['image']."' >";;
                    echo "<p id='screenings_p' align='center'>" .$row['venue']."</p>";
                    echo "<p id='location_p' align='center'>" .$row['location']."</p>";
                    echo "<p id='date_p' align='center'>".date('F j, Y',strtotime($row['date']))."</p>";
                echo "</div>";
            }
        ?>
    </div>
<script>

$document.ready(function(){
// Get the modal
var modal = document.getElementById('myModal');

// Get the button that opens the modal
//var btn = document.getElementsByClassName("modal_img");

// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")[0];

$("img").on("click", function() {
var source = ( $(this).attr("src") );
//alert(source);
//$('#modal_popup').text(source);
$('#popup_img').prop('src', this.src);
});

// When the user clicks the button, open the modal 
function btn() {
modal.style.display = "block";
}


// When the user clicks on <span> (x), close the modal
span.onclick = function() {
modal.style.display = "none";
}

// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
if (event.target == modal) {
    modal.style.display = "none";
}
}
})
</script>
</body>

Specifically, I'm getting this error in the Chrome console: "Uncaught ReferenceError: btn is not defined at HTMLDivElement.onclick"

rpivovar
  • 3,150
  • 13
  • 41
  • 79
  • That is because the `btn` function is defined inside the anonymous function passed to `$document.ready`. Try to define it like this `window.btn = function(){....}` – Titus May 09 '17 at 01:41
  • I've changed the code within the script tags to `window.btn = function btn() { modal.style.display = "block"; }` - this still seems to be throwing the error, unfortunately. – rpivovar May 09 '17 at 01:50
  • change this line `$document.ready(function(){` to `$(document).ready(function(){` – Demonyowh May 09 '17 at 02:01
  • Changed to `$(document).ready(function(){` - stills seems to be throwing the error. – rpivovar May 09 '17 at 02:04
  • dont mix angular with jquery . If you want manipulate the DOM use directive – Akashii May 09 '17 at 04:11
  • Thanks, I'll see about implementing this some other way. – rpivovar May 09 '17 at 17:38
  • @ThanhTùng should I be using angular controllers for my functions? I'm not too familiar with Angular. – rpivovar May 09 '17 at 20:41
  • @ThanhTùng Or, why should I use a directive in this case rather than a controller? – rpivovar May 09 '17 at 21:43
  • take a look in here http://stackoverflow.com/questions/37480150/manipulating-dom-in-angularjs-best-practice – Akashii May 09 '17 at 22:28
  • Thanks, @ThanhTùng, that was helpful. I think I need to use ng-click on an img. – rpivovar May 10 '17 at 01:03

0 Answers0