I've created a modal box that will open when the user clicks the button but after a second it closes automatically and refreshes the webpage. I don't know what it causes but I think it is because the button is inside the while loop:
Here's my code snippet in PHP:
while{
echo "<tr>
<td align = 'center'>$Reporter_Fname $Reporter_Lname</td>
<td align = 'center'>$Report_Location</td>
<td align = 'center'>$Report_Latitude</td>
<td align = 'center'>$Report_Longitude</td>
<td align = 'center'>$Report_Date</td>
<td align = 'center'>$Report_Time</td>
<td align = 'center'>$Report_Note</td>
<td align = 'center'><button id='myBtn'>View Images</button> //THE BUTTON THAT WILL BE CLICKED TO OPEN MODAL BOX
</td>
<td><a href = 'Report_Status.php?positive=$Report_ID' role = 'button'> Positive </a><br><a href = 'Report_Status.php?negative=$Report_ID' role = 'button'> Negative </a></td></tr></thead>";
Snipper code HTML (When the button was clicked)
<div id='myModal' class='modal'>
<div class='modal-content'>
<div class='modal-header'>
<span class='close'>×</span>
<h2>Images</h2>
</div>
<div class='modal-body'>
<p>Images</p>
</div>
</div>
</div>
This HTML snipper code is now on the outside of the while loop in PHP
Here's the full code that I got from W3schools for more information: Modal Box using HTML, CSS & Javascript
How do I prevent the modal box from closing automatically and what causes the webage to refresh after clicking the button?
You have, inside your loop, a repetition of the id myBtn which could cause a malfunction in your script. You should have id's that are unique but I would just use a class instead:
while(true): ?>
<tr>
<td align = 'center'><?php echo $Reporter_Fname.' '.$Reporter_Lname ?></td>
<td align = 'center'><?php echo $Report_Location ?></td>
<td align = 'center'><?php echo $Report_Latitude ?></td>
<td align = 'center'><?php echo $Report_Longitude ?></td>
<td align = 'center'><?php echo $Report_Date ?></td>
<td align = 'center'><?php echo $Report_Time ?></td>
<td align = 'center'><?php echo $Report_Note ?></td>
<!-- Use class="myBtn" instead of id="myBtn" -->
<td align='center'><button class='myBtn'>View Images</button></td>
<td><a href='Report_Status.php?positive=<?php echo $Report_ID ?>' role = 'button'> Positive </a><br><a href='Report_Status.php?negative=<?php echo $Report_ID ?>' role = 'button'> Negative </a>
</td>
</tr>
<?php endwhile ?>
For the listener, I would just use jQuery but if not using that framework, you could do event listeners using basic javascript:
<script>
for(var i = 0; i < document.getElementsByClassName('myBtn').length; i++) {
document.getElementsByClassName('myBtn')[i].addEventListener('click', function(){
// If you are going to use only one modal, you should have a way to drop the
// images into the single modal, perhaps by using "innerHTML" and the use of "this"
document.getElementById('myModal').style.display = "block";
});
}
</script>
Related
I've been Trying to List Users in a 1 to 1 Chat Application in HTML Tables & uniquely Define Each Table cell data by the Name ID dynamically in PHP. The problem is I am Unable to retrieve the Same Table Cell Value after a Button Click for that Particular Record even after Passing the Name value in PHP.
<?php
include("functions.php");
$token = $user_details[5];
// Get all Users except the Logged user
$users_list = get_users_list($user_details[2]);
?>
<table class="table">
<thead class="thead-style">
<tr>
<td class="text-center">Users List</td>
<td class="text-center">Login Status</td>
<td class="text-center"></td>
</tr>
</thead>
<tbody>
<?php
while($fetch = mysqli_fetch_assoc($users_list))
{
?>
<tr class="table-row-users">
<td class="text-center" id="<?php echo $fetch['user_name']; ?>" value="<?php echo $fetch['user_name']; ?>">
<?php echo $fetch['user_name']; ?></td>
<td class="text-center"><?php echo $fetch['user_login_status']; ?></td>
<td class="text-center"><button class="btn btn-outline-primary receiver_email='<?php echo base64_encode($fetch["user_email"]);?>'" id="single_chat" onclick='setReceiver("<?php echo $fetch['user_name']; ?>")'>Chat</button></td>
</tr>
<?php
}
?>
</tbody>
</table>
JavaScript Code
function setReceiver(receiver_name)
{
var to_user_name = document.getElementById(receiver_name).value;//Unable to Retrieve the Value here
console.log(to_user_name);
//$('.receiver').append(to_user_name);
}
I am Facing the Error on the JS Side. Also this is my 1st Question on Stack Overflow.
I'm trying to create a table, and in each row there will be a picture, and when the picture is clicked a js function gets executed, each entry of a row in the table will create a js script for the picture of that row. And for that reason I'm using <?php echo ?> on the id of the image and on the getElementById in the script. And I have no problem using the echo on the id of the image, but if I put it inside getElementById the js code doesn't get executed. And if I write instead directly the number of the id let's say
getElementById("3") instead of getElementById("<?php echo $contact['id']; ?>") it works perfectly, but if use echo it doesn't, even when the source code of the loaded page shows that getElementById("<?php echo $contact['id']; ?>") successfully got printed as getElementById("3")
Here's the full table's code:
<table>
<thead>
<tr>
<th>#</th>
<th>Name</th>
<th>Status</th>
</tr>
</thead>
<tbody>
<?php $contacts = getContacts();
if($contacts->num_rows) {
foreach($contacts as $contact) { ?>
<tr>
<td>
<img id="<?php echo $contact['id']; ?>" src="img/arrow.png" onclick='removeImage("");'>
<script type="text/javascript">
function removeImage() {
document.getElementById("<?php echo $contact['id']; ?>").style.display = "none";
}
</script>
</td>
<td><?php echo $contact['Name']; ?></td>
<td><?php echo $contact['Status']; ?></td>
</tr>
<?php }} ?>
</tbody>
</table>
When looping, you are recreating the same function over and over again, but with a different ID in each. However, you can't create the same function over and over again with the same name.
On your img change removeImage('') to removeImage(this)
<img id="<?php echo $contact['id']; ?>" src="img/arrow.png" onclick='removeImage(this);'>
Then outside of the loop just have a single function that refers to the element passed to it
function removeImage(el) {
el.style.display = "none";
}
I have to generate some text boxes after each line of row sent from database, so I have this user who have 2 rows:
And of course each row belongs to an id:
<td><?php echo $counter--; ?></td>
<td><?php echo $installment['date_now'] ?></td>
<td><?php echo $installment['payment'] ?> $</td></tr>
</tr>
<?php } ?>
<tr><th colspan="10" style="text-align: right;">Remaining:</th>
<th><?php echo ($cash['project_cost'] - $sum) ?> $</th>
</tr>
<tr id="<?php echo $cash['infoid']; ?>"><td colspan="8" style="text-align: right;">Add Payment</td>
<td><input type="date" class="form-control" id="date_pay_now[]"/></td>
<td><input class="form-control" type="text" id="pay_now"/></td>
<td><button id="add_payment" class="btn btn-success glyphicon glyphicon-plus"></button>
</tr>
<tr><td></td></tr><tr><td></td></tr>
<?php $sumCash = $sumCash + $cash['project_cost']; } ?>
<tr>
<th colspan="10">Cash Total</th><th id="final_cash"><?php echo $sumCash ?> $</th>
</tr>
</table>
</div>
<?php } else { ?>
No Payments available
<?php } ?>
Now, when select a date and type an amount, I should send those values into AJAX and but first I need to get the id of the row so I can send it too.
$("#add_payment").click(function()
{
var date_of_pay = $("#date_pay_now").val();
var pay_now = $("#pay_now").val();
var id_pay = $(this).closest('tr').attr('id');
console.log(id_pay);
if(date_of_pay == "" || pay_now == "")
{
$("#date_pay_now").css('border-color', 'red');
$("#pay_now").css('border-color', 'red');
}
if(date_of_pay != "" && pay_now != "")
{
$.ajax
({
//Still not typed
});
}
});
If you see the image, when I click on the first button, I see the id correctly at the console and if they are empty I can see the red color, but when I refresh the page and click directly on the second row button, I can't see any value at the console and no css color due to empty text box shown.
And here when I click on the next button, no color and no id at the console:
I am trying to show a booking form when I click the button using jquery toggle.
HTML
foreach($result['apiAvailableBuses'] as $value){?>
<tr>
</td>
<td><?php echo $value['fare']; ?></td>
<td>
<?php echo $value['availableSeats'].' Seats'; ?>
<input type="button" id="<?php echo $i; ?>" class="btn btn-primary" value="Book" name="Book">
</td>
</tr>
<tr class="main">
<td colspan="5">
<div class="well" id="result<?php echo $i; ?>">Booking form here</div>
</td>
</tr>
<?php $i++; } ?>
Script
$(".main").hide();
$(".btn-primary").click(function(){
var id=$(this).attr('id');
$('#result'+id).toggle();
});
But when I click on the button I can't see the booking form div
In your script, you are hiding the parent tr using $(".main").hide(); and hence toggle of the child element is not working. To make it work you have to make visible the parent element and then toggle the div.
$(".main").hide();
$(".btn-primary").click(function(){
$(".main").show();
var id=$(this).attr('id');
$('#result'+id).toggle();
});
Now it should work.
Try using .on()
$(document).ready(function(){
$(document).on("click",".btn-primary",function(){
var id=$(this).attr('id');
$('#result'+id).toggle();
});
});
UPDATE
Another thing I want to explain.
You are clicking on a button and then getting its ID and then doing .toggle() with it.
I think you can do this way also.
$(document).ready(function(){
$(document).on("click",".btn-primary",function(){
//var id=$(this).attr('id');
//$('#result'+id).toggle();
$(this).closest("tr").next("tr").find(".well").toggle();
});
});
I am assuming that toggle() show() and hide turns a element into a block element therefore disabling the capabilities to use colspan. When I am not hiding the TR, colspan works perfectly. as soon as a toggle or do the show hide, it no longer works.
Is there a jquery method out there that will successfully show and hide a table row while mainting the table cell row.
I somewhat found the solution considering the following.
HTML
<h3 class="tac"><?php echo 'Communications';?></h3>
<br/><br/>
<table class="projects-table-style deposit-table communication" cellpadding="0" cellspacing="0">
<tr>
<th>Date</th>
<th>Consultant</th>
<th>Country</th>
<th>Rating</th>
<th>Communications</th>
<th>Last Bid</th>
<th>Memorandum</th>
</tr>
<?php
$i = 0;
foreach ($comments as $comment):
$class = null;
if ($i++ % 2 == 0) {
$class = ' class="altrow"';
}
?>
<tr<?php echo $class;?>>
<td>Date</td>
<td>
<?php echo $comment['User']['username']; ?>
</td>
<td><?php echo $comment['User']['Country']['name']; ?></td>
<td>Rating</td>
<td>
x communcations
Reply
</td>
<td>Last Bid</td>
<td>Memorandum</td>
</tr>
<tr style="display:none" class="reply-box">
<td style=" background: #fff" colspan="7">
<table width="100%">
<?php foreach($comment['Comment'] as $com): ?>
<tr>
<td width="20%">
<?php echo $com['From']['username']; ?>
</td>
<td>
<?php echo $com['comment']; ?>
</td>
<td width="15%">
<?php echo $com['created']; ?>
</td>
</tr>
<?php endforeach; ?>
</table>
<?php echo $this->Form->create('Project');?>
<?php echo $this->Form->input('message',array('type'=>'textarea','cols'=>'77','style'=>'margin-right:0px;padding:0px;'));?>
<?php echo $this->Form->end(__('Submit', true,array('attribute'=>'value')));?>
</td>
</tr>
<?php endforeach; ?>
</table>
JS
$(document).ready(function() {
$('.reply-to').click(function(){
$(this).parent().parent().next().toggle('slow');
return false;
});
});
So long as I toggle .reply-box which is appended to the TR. the TD element nested within will maintain its table-cell structure and will still keep the colspan attribute. just wanting to know if anyone else knows a better solution.
The jQuery API for .show() says this:
This is roughly equivalent to calling .css('display', 'block'), except that the display property is restored to whatever it was initially. If an element has a display value of inline, then is hidden and shown, it will once again be displayed inline.
However, I'm not sure how it will function if the element is originally hidden (using display: none in either a CSS declaration or inline style); though I couldn't get it to break in a jsFiddle so I think it should function correctly.