Shane Shane - 4 months ago 6
PHP Question

PHP For Loop, Modal, and MySQL Data

I am creating an editable calendar, very similar to the one in Gmail. It is a grid of div boxes, and each div box can be clicked and a Modal will pop up where the user can edit/add data to that specific entry.

I am having one slight issue with my Modal within my For Loop. I understand the IDs used for the Divs must be unique, but my variable $i will echo accurately within div id="myBtn' . $i . '" but not accurate within div id="myModal' . $i . '" and the same applies to retrieving data from my database. Accurate within the "myBtn" div but not the "myModal" div.

Additionally, I can't close out of the Modal once I open it when I have the code set to "Div id="myModal' . $i . '"" but when it is just "Div id="myModal"" it functions fine, but the data is wrong.

I read the other posts similar to my issue, but couldn't seem to find a working solution. What am I doing wrong?

<?php

for($i = 0; $i <= 365; $i++){
$d=strtotime($i . " Day");

$day = date("l (m/d)", $d);

$end_month = date("l (m/01)", $d);

$str = strcmp($day, $end_month);

$query_date = date("m/d/Y l", $d);


$sql = "SELECT * FROM XXXXXXXX WHERE date = '$query_date' AND user_id = 1 ORDER BY start_time ASC";

$result = mysqli_query($connection, $sql);

while($row = mysqli_fetch_array($result)){

$entry_id = $row['entry_id'];

$schedule_date = date("l (m/d)", strtotime($row['date']));

$location_name .= "<strong>" . $row['location_name'] . "</strong><br/>(" . $row['start_time'] . " - " . $row['end_time'] . ")<br/><br/>";

}

$test = strcmp($day, $schedule_date);

if($str == 0){
echo '<div id="myBtn' . $i . '" class="menu2" style="width: 100%;">' . date("F", $d) . '</div>';
}

echo '
<!-- The Modal -->
<form action="" name="add-location" method="POST">
<div id="myModal' . $i . '" class="modal">

<!-- Modal content -->
<div class="modal-content">
<span class="close">×</span>

<p style="color: black;">' . $i . '</p>

<input type="text" name="" class="booking_input" style="width: 100%;" placeholder="' . $i . '"/>
<input type="submit" name="submit" class="button" style="vertical-align: middle; line-height: 15px;" />

</div>

</div>
</form>';

echo '<div id="myBtn' . $i . '" class="menu2" style="text-align: center;"><span style="font-size: 16px; color: #c11414;"><strong><u>' . $day . $i . '</u></strong></span></br/><br/>';
if($test == 0){
echo $location_name . "<br/>";
}

echo "</div>";

?>

<script>
// Get the modal
var modal = document.getElementById('myModal<?php echo $i; ?>');

// Get the button that opens the modal
var btn = document.getElementById("myBtn<?php echo $i; ?>");

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

// When the user clicks the button, open the modal
btn.onclick = function() {
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>

<?php

unset($location_name);
unset($address);
unset($start_time);
unset($end_time);

}

?>


Not very relevant, but here is the style tags to go with the above code:

<style>
* {
box-sizing: border-box;
}
.header {
border: .5px solid #2f363e;
padding: 15px;
}
.menu2 {
width: 14.28%;
float: left;
padding: 15px;
border: .5px solid #2f363e;
height: 150px;
color: #2f363e;
}
.main {
width: 75%;
float: left;
padding: 15px;
border: .5px solid #2f363e;
}
</style>


<style>
/* The Modal (background) */
.modal {
display: none; /* Hidden by default */
position: fixed; /* Stay in place */
z-index: 1; /* Sit on top */
padding-top: 100px; /* Location of the box */
left: 0;
top: 0;
width: 100%; /* Full width */
height: 100%; /* Full height */
overflow: auto; /* Enable scroll if needed */
background-color: rgb(0,0,0); /* Fallback color */
background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}

/* Modal Content */
.modal-content {
background-color: #fefefe;
margin: auto;
padding: 20px;
border: 1px solid #888;
width: 80%;
}

/* The Close Button */
.close {
color: #aaaaaa;
float: right;
font-size: 28px;
font-weight: bold;
z-index: 1;
}

.close:hover,
.close:focus {
color: #000;
text-decoration: none;
cursor: pointer;
z-index: 1;
}
</style>

Answer

Why don't simply add the function calls direct to the buttons and use a general function to show/hide modal dialog? like this:

<?php

for($i = 0; $i <= 365; $i++){
$d=strtotime($i . " Day");

$day = date("l (m/d)", $d);

$end_month = date("l (m/01)", $d);

$str = strcmp($day, $end_month);

$query_date = date("m/d/Y l", $d);


$sql = "SELECT * FROM XXXXXXXX WHERE date = '$query_date' AND user_id = 1 ORDER BY start_time ASC";

$result = mysqli_query($connection, $sql);

    while($row = mysqli_fetch_array($result)){  

    $entry_id = $row['entry_id'];

    $schedule_date = date("l (m/d)", strtotime($row['date']));

    $location_name .= "<strong>" . $row['location_name'] . "</strong><br/>(" . $row['start_time'] . " - " . $row['end_time'] . ")<br/><br/>";

    }

$test = strcmp($day, $schedule_date);

    if($str == 0){
    echo '<div id="myBtn' . $i . '" class="menu2" style="width: 100%;">' . date("F", $d) . '</div>';        
    }   

        echo '
    <!-- The Modal -->
    <form action="" name="add-location" method="POST">
    <div id="myModal' . $i . '" class="modal">

     <!-- Modal content -->
    <div class="modal-content">
      <span class="close" onclick="closeModal('.$i.')">×</span>

      <p style="color: black;">' . $i . '</p>

     <input type="text" name="" class="booking_input" style="width: 100%;" placeholder="' . $i . '"/>
     <input type="submit" name="submit" class="button" style="vertical-align: middle; line-height: 15px;" />

    </div>

    </div>
    </form>';

echo '<div id="myBtn' . $i . '" class="menu2" onclick="showModal('.$i.')" style="text-align: center;"><span style="font-size: 16px; color: #c11414;"><strong><u>' . $day . $i . '</u></strong></span></br/><br/>'; 
    if($test == 0){ 
    echo $location_name . "<br/>";  
    }

echo "</div>";

?>

<?php

unset($location_name);
unset($address);
unset($start_time);
unset($end_time);

}

?>
<script>
function closeModal(id){
    // Get the modal
    var modal = document.getElementById('myModal'+id);
    modal.style.display = "none";
}

function showModal(id){
    // Get the modal
    var modal = document.getElementById('myModal'+id);
    modal.style.display = "block";
}
</script>