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();
});
});
Related
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>
Hi I have been trying to follow this tutorial about inline editing http://www.vandelaydesign.com/inline-edit-with-ajax/ . I want to apply it in my data table. When the user clicks the edit button the corresponding columns within its line becomes an input, but I do not know how to turn it that way. In the tutorial it uses .prev in jquery to get the value of the of the span but I do not know how to do that in my case. This is what my table looks like:
Category name and desc should become inputs when edit button is clicked. How do I do that?
<tbody>
<?php foreach ($categories as $category) { ?>
<tr>
<td> <span id="<?= $category->category_id ?>" class="datainfo"> <?= $category->category_name ?> </span> </td>
<td>
<?= $category->category_desc ?>
</td>
<td>
<?= $category->created_on ?>
</td>
<td>
<?= $category->updated_on ?>
</td>
<td>
<?= $category->status ?>
</td>
<td>
<button type="button" name="edit_cat" class="btn btn-light btn-sm edit_cat">
<!-- data-id="<?= $category->category_id ?>" -->
<i class="fa fa-pencil-square-o" aria-hidden="true"></i>
</button>
</td>
</tr>
<?php } ?>
</tbody>
Javascript:
$(document).on('click', '.edit_cat', function() {
console.log('edit category');
// console.log( $(this).data('id') );
var dataset = $(this).prev(".datainfo");
console.log(dataset);
var theid = dataset.attr("id");
console.log(theid);
var newid = theid+"-form";
var currval = dataset.text();
dataset.empty();
$('<input type="text" name="'+newid+'" id="'+newid+'" value="'+currval+'" class="hlite">').appendTo(dataset);
});
I also need help in future proofing after solving this problem, How would I go about saving it, maybe getting the span id and start from there?
Datatables have a build in implementation of inline editing.
It gets installed as an own extension
Inline editing in Editor is activated through the use of the inline() API method. Simply call the method and pass in the cell you want to edit as the first parameter.
Take a closer look here - https://editor.datatables.net/examples/inline-editing/simple
I have a list of records on a table which look like this..
PHP/HTML CODE:
<script src="js/jquery-3.2.1.js"></script>
<?php
while($resrecord=mysqli_fetch_array($resdata))
{ ?>
<tr>
<td> <?php echo $resrecord[0];?> </td>
<td> <?php echo $resrecord[2];?> </td>
<td> <?php echo $resrecord[3];?> </td>
<td> <a onclick="window.open('test.php?id='+'<?php echo $resrecord[0]; ?>','popup','width=600,height=600');">Tesing</a> </td>
//also checked with href of anchor tag
</tr>
<?php } ?>
Which means I can't access a php variable in javascript. I also tried these methods
<script type="text/javascript">
var x= '<?php echo $resrecord[0]; ?>';
//OR
var x= '<?php echo json_encode($resrecord[0]); ?>';
//here x won't populate with above php variables
</script>
I've also tested the above javascript methods on a simple PHP variable which didn't belong to any loop and still didn't work.
[UPDATED] You can pass the value using attribute in a class, Try this one.
<script src="js/jquery-3.2.1.js"></script>
<?php while($resrecord=mysqli_fetch_array($resdata)) { ?>
<tr>
<td> <?php echo $resrecord[0];?> </td>
<td> <?php echo $resrecord[2];?> </td>
<td> <?php echo $resrecord[3];?> </td>
<td> <a class="getAllData" data-id="<?php echo $resrecord[0];?>">Tesing</a> </td>
//also checked with href of anchor tag
</tr>
<?php } ?>
Then use jquery function:
you do this.
<script>
$(window).ready(function(){
$(".getAllData").on("click", function(){
var id = $(this).data('id'); //get the current data-id you the row
window.open('test.php?id='+id,'popup','width=600,height=600');
});
});
</script>
This should do it.
In order to access your variable value in JS, the best way is, keep you value in some element bonded with some selector (keep it hidden if not required to display). Then use that selector to access the value.
eg.
<script src="js/jquery-3.2.1.js"></script>
<?php
$i=0;
while($resrecord=mysqli_fetch_array($resdata))
{ $i++ ?>
<tr>
<td><div class="hidden selector_<?php echo $i ?>">
<?php echo $resrecord[0];?>
</div>
<?php echo $resrecord[0];?>
</td>
<td> <?php echo $resrecord[2];?> </td>
<td> <?php echo $resrecord[3];?> </td>
<td> <a onclick="window.open('test.php?id='+'<?php echo $resrecord[0]; ?>','popup','width=600,height=600');">Tesing</a> </td>
//also checked with href of anchor tag
</tr>
<?php } ?>
JAVASCRIPT
var x = $(".selector_1").val();
// you can iterate if required;
Hope you may get some idea with above example
I have a function that monitors a list of checkboxes to detect if some are selected. If some are selected the button shows, otherwise the button hides. The checkbox lies within of a foreach in PHP to transform into a list of checkboxes.
The problem is that only the first checkbox shows the delete button.
agenda.php:
<tbody>
<form id="delTask" name="delTask" method="POST" action="">
<?php foreach ($tasks as $value): ?>
<tr>
<td>
<div class="checkbox">
<label>
<input name="excluir[]" value="<?php echo $value[0] ?>" id="taskSelect" type="checkbox">
</label>
</div>
</td>
<td><?php echo $value[1] ?></td>
<td><span class="label label-success">+50</span></td>
</tr>
<?php endforeach; ?>
</form>
</tbody>
app.js:
// Hide/Show button of del
$("#taskSelect").click(function () {
if( $("#taskSelect").is(':checked') ) {
$("#writeTask").hide();
document.getElementById("deleteTask").style.display = 'block';
} else {
$("#writeTask").show();
document.getElementById("deleteTask").style.display = 'none';
};
});
The problem is that you have many checkbox inputs with the ID taskSelect. Element IDs must be unique throughout the whole document. Instead you will want to use a class name, as the same class can be attached to multiple elements:
<input name="excluir[]" value="<?php echo $value[0] ?>" class="taskSelect" type="checkbox">
You then use a selector like .classname rather than #id in your jQuery click handler:
$(".taskSelect").click(function () {
...
});
As an aside, rather than doing document.getElementById("id").style.display to show and hide things, as your are using jQuery you can just use $("#id").show() and $("#id").hide() throughout.
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.