I am using Zend Framework and have retrieved rows from database using Zend_Db. The HTML is as below. The aim is to toggle the 'Yes/No text in the Slideshow column when clicked. The ajax call works and returns the correct result. I however have not been able to select the cell and change the text.
<table class="table table-bordered table-striped">
<thead>
<tr>
<th>ID</th>
<th>title</th>
<th>Caption</th>
<th>Image</th>
<th></th>
<th></th>
<th>Slideshow</th>
</tr>
</thead>
<tbody>
<?php
foreach($this->sections as $section){
if($section['slide']==0){ $slideText='No'; }
if($section['slide']==1){ $slideText='Yes'; }
?>
<tr>
<td>
<span class="badge"><?php echo $section['id']; ?></span>
</td>
<td>
<?php echo $section['caption']; ?>
</td>
<td>
<?php echo $section['comment']; ?>
</td>
<td>
<img src="/images/uploads/<?php echo $section['image_url']; ?>" width="180" height="100">
</td>
<td>Edit</td>
<td>Delete</td>
<td class="imgajax"><?php echo $slideText; ?></td>
</tr>
<?php }?>
</tbody>
</table>
<?php } ?>
The javascripts follows;
$(".imgajax a").click(function(event){
event.preventDefault();
var url = $(this).url();
id = url.segment(4);
$.ajax({
type: 'GET',
url:"/admin/ajax",
data:"id="+id,
success: function(data) {
console.log(data);
if(data==1){
$('.slide').text('Yes');
}
if(data==0)
{
$('.slide').text('No');
}
}
});
});
You should use
$('.slide').html('Yes');
instead of
$('.slide').text('Yes');
Related
I am looking to insert rows to the table but
The rows are echoed but not displayed inside the table.
The HTML code of the project is:
<div class="container">
<table class="table table-hover table-bordered">
<thead>
<tr>
<th>SN</th>
<th>Category</th>
<th>Parent</th>
<th>Status</th>
<th>Action</th>
</tr>
</thead>
<tbody id="displayCategory">
</tbody>
</table>
</div>
The main.js file of the project is:
It fetches data from the PHP file below:
$(document).ready(function () {
manageCategory();
function manageCategory(){
$.ajax({
url: DOMAIN + "/includes/process.php",
method: "POST",
data: { manageCategory: 1 },
success: function (data) {
$("#displayCategory").html(data);
alert(data);
console.log(data);
}
})
};
}
PHP code of the project is:
<?PHP
if (isset($_POST["manageCategory"])) {
$m = new Manage();
$result = $m->manageTableWithPagination('pdcts_categories', 1);
$rows = $result['rows'];
$pagination = $result['pagination'];
if (count($rows) > 0) {
foreach ($rows as $row) {
$n = 0;
?>
<tr>
<td><?php echo ++$n; ?></td>
<td><?php echo $row["Category"]; ?></td>
<td><?php echo $row["Parent"]; ?></td>
<td>
Active
</td>
<td>
Edit
Delete
</td>
</tr>
<?php
}?>
<!-- <tr><td colspan="5"><?php echo $pagination; ?></td></tr> -->
<?php exit(); }
}?>
Try appending data (insted of html) like so:
$("#displayCategory").append(data);
note: check in the console that your php code is returning valid html (<tr> data)
<table id="example1" class="table table-bordered table-striped">
<thead>
<tr>
<th>Email</th>
<th>Name</th>
<th>Subject</th>
<th>Message</th>
</tr>
</thead>
<tbody>
<?php
foreach($fetchContactData as $value)
{
?>
<tr>
<td><?php echo $value['email'] ?></td>
<td><?php echo $value['name']?></td>
<td><?php echo $value['subject'] ?></td>
<td><button type="button" class="btn btn-warning" value="<?php echo $value['message'] ?>">Show</button></td>
<?php
}?>
</tbody>
<tfoot>
<tr>
<th>Email</th>
<th>Name</th>
<th>Subject</th>
<th>Message</th>
</tr>
</tfoot>
</table>
Js code:
<script type="text/javascript">
$(document).ready(function(){
$("#example1 button").click(function(){
var id=$(this).attr('value');
});
});
</script>
here at each row there is unique id to button. so onclick of that button i want that id in jquery. I tried many searches from stackoverflow but its not working so anyone can help me with jquery part with this exact same code
Here is my js now i want that long message so that i could show it in modal class div.
[Violation] Forced reflow while executing JavaScript took 73ms ---> This is the error i got
An "id" is always used to identify something and therefore should be unique. So you have to make it unique in the first place. Something like this should work.
<table id="example1" class="table table-bordered table-striped">
<thead>
<tr>
<th>Email</th>
<th>Name</th>
<th>Subject</th>
<th>Message</th>
</tr>
</thead>
<tbody>
<?php
$i = 0;
foreach($fetchContactData as $value)
{
?>
<tr>
<td><?php echo $value['email'] ?></td>
<td><?php echo $value['name']?></td>
<td><?php echo $value['subject'] ?></td>
<td><button type="button" class="btn btn-warning" id="show-<?= $i; ?>" value="<?php echo $value['id'] ?>">Show</button></td>
<?php
$i++;
}?>
</tbody>
<tfoot>
<tr>
<th>Email</th>
<th>Name</th>
<th>Subject</th>
<th>Message</th>
</tr>
</tfoot>
</table>
In this code, there will be the variable "$i" that is set to 0 in the beginning and just appended to the id "show-". Last step of the foreach-loop, this 0 is just counted up by one.
This will generate and id in the format of "show-0", "show-1" (you could set $i to 1 in the beginning to make it start counting from 1). In jQuery, you then could use the "starts with"-selector to select all buttons and set an onclick event on it. (just one example) https://api.jquery.com/attribute-starts-with-selector/
<script>
$( "button[id^='show-']" ).on('click', clickhandler);
</script>
So for every button that has an id starting with "show-" you can make it do the action "clickhandler".
your id=button is into loop, so is not unique.
I advise you do not use id, better you can use something like class and in your js script listen click to this, like:
<td><button type="button" class="btn btn-warning button_msg" value="<?php echo $value['message'] ?>">Show</button></td>
Js (jquery)
$(".button_msg').click(function(){
//Do anything
})
I have a table query from DB. This table has few info from the DB. The rest of the info I want is to be shown when I click the collapsible. So for that I want the collapsible row just after each of the queried row. Below is my code.
It is creating as many collapsible as queried rows but all rows are together and all collapsible are together. Also The collapsible are coming before the queried rows though it should be under the queried rows.
<table class="blueTable">
<thead>
<tr>
<th>Broadband ID</th>
<th>Name</th>
<th>Email</th>
<th>Phone</th>
<th>Circle</th>
<th>SSA</th>
<th>SDCA</th>
<th>Action</th>
</tr>
</thead>
<tbody>
<?php while($row = mysqli_fetch_array($searchqry)):?>
<tr>
<td><?php echo $row['bb_id'];?></td>
<td><?php echo $row['name'];?></td>
<td><?php echo $row['email'];?></td>
<td><?php echo $row['phone'];?></td>
<td><?php echo $row['circle'];?></td>
<td><?php echo $row['ssa'];?></td>
<td><?php echo $row['sdca'];?></td>
</tr>
<tr><button class="collapsible">Open Section 3</button>
<div class="content">
<p>Lorem ipsum</p>
</div>
</tr>
<?php endwhile;?>
</tbody>
</table>
<script>
var coll = document.getElementsByClassName("collapsible");
var i;
for (i = 0; i < coll.length; i++)
{
coll[i].addEventListener("click", function()
{
this.classList.toggle("active");
var content = this.nextElementSibling;
if (content.style.maxHeight)
{
content.style.maxHeight = null;
}
else
{
content.style.maxHeight = content.scrollHeight + "px";
}
});
}
</script>
<tr>
<td colspan="8">
<button class="collapsible">Open Section 3</button>
<div class="content">
<p>Lorem ipsum</p>
</div>
</td>
</tr>
Needed to put a cell inside the row.
You are missing a <td> inside of the second <tr>.
Update, seems it is also happening when i go onto the next page (fullscreen this time).
I'm hoping someone could possible help me as this has been driving me crazy. I have a table full off orders which each row has a button. This button when submitted will show an alert.
I am using data-tables (Responsive), and when the table is all on the screen, the button works as intended. However, when the screen is resized and the button goes within the + icon to expand the row. The button is not running the jquery and is submitting the page.
I have no idea how to fix this and was wondering if there is a workaround. Here is a sample of the code if it helps.
<table id="datatable-buttons" class="table table-striped table-bordered dt-responsive nowrap" cellspacing="0" width="100%">
<thead>
<tr>
<th>Order Number</th>
<th>Button</th>
</tr>
</thead>
<tbody>
<?php foreach ($orders as $order): ?>
<tr>
<th scope="row">
<?php echo $order['OrderNumber']; ?>
</th>
<td>
<form id="<?php echo $order['OrderNumber']; ?>">
<input type="submit" value="Submit">
</form>
</td>
</tr>
<?php endforeach; ?>
</tbody>
</table>
At the bottom of the page:
<?php foreach ($orders as $order): ?>
<script>
$('#<?php echo $order['OrderNumber']; ?>').on('submit', function () {
alert('Form submitted!');
return false;
});
</script>
<?php endforeach; ?>
Any help would be appreciated! I have no idea why it isn't working when the table is resized.
Use a delegated event handler instead :
$('#datatable-buttons').on('submit', '#<?php echo $order['OrderNumber'];?>', function() {
alert('Form submitted!');
return false;
});
Your event handler does not work because the form not exists in dom at the time of declaration.
But all those dedicated #id based event handlers is completely unnecessary. A single (delegated) handler is sufficient :
$('#datatable-buttons').on('submit', 'form', function () {
alert('Form ' + $(this).attr('id') + ' submitted!');
return false;
});
Hey mate you could try something like this for the alert
<table id="datatable-buttons" class="table table-striped table- bordered dt-responsive nowrap" cellspacing="0" width="100%">
<thead>
<tr>
<th>Order Number</th>
<th>Button</th>
</tr>
</thead>
<tbody>
<?php foreach ($orders as $order): ?>
<tr>
<th scope="row">
<?php echo $order['OrderNumber']; ?>
</th>
<td>
<button type="button" class="btnPress" id="<?php echo $order['OrderNumber']; ?>">Submit</button>
</td>
</tr>
<?php endforeach; ?>
</tbody>
</table>
Bottom
<script>
$('.btnPress').on('click', function () {
alert('Form submitted!');
alert(this.id);
});
</script>
On manual page refresh the modals are working fine. But when reloading the datatable with Ajax the popups stop working.
Below is my HTML and JavaScript code:
<table class="table table-bordered table-striped table-hover mb-none" id="IVRFilesTable">
<thead>
<tr class="primary">
<th>IVR Name</th>
<th>Actions</th>
</tr>
</thead>
<tbody id="tablediv">
<?php foreach($records as $row) {?>
<tr>
<td><?php echo $row['ivrname']?></td>
<td width="10%" class="actions text-center">
<i class="fa fa-trash-o fa-lg text-primary"></i>
</td>
</tr>
<?php }?>
</tbody>
var request = $.ajax({
url: "<?php echo base_url();?>index.php/admin/manageivrs/removeivr",
type: "POST",
data: "ivrid="+ivrid,
success: function (msg)
{
if(msg=='true')
{
var oTable = $('#IVRFilesTable').dataTable();
oTable.fnClearTable();
$("#IVRFilesTable").load(location.href+" #IVRFilesTable>*","");
oTable.fnDraw();
}
}
});