I'm building a laravel application where I want to show if there is any update data in database after two seconds.So in this scenario I have given the table a 'id' and then I have laod the table after certain time interval. But the problem is after every javascript call it creates an empty row in table even if the table retrieve the value also. How do I avoid the problem..any suggestion please?
<div class="container">
<h3> List Of Courses </h3></br>
<table class="table table-striped table-bordered dataTable" id="example">
<thead>
<tr>
<td>Serial No</td>
<td>Title</td>
<td>Description</td>
<td>Action</td>
</tr>
</thead>
<tbody>
<?php $i=1; ?>
#foreach($items as $row)
<tr>
<td>{{$i}}</td>
<td class="title" data-id1="{{$row->id}}" contenteditable>{{$row->title}}</td>
<td class="description" data-id2="{{$row->id}}" contenteditable>{{$row->description}}</td>
<td>
<button type="button" onclick="deleteItem({{ $row->id }})" class="btn btn-danger">Delete</button>
</td>
</tr>
<?php $i++; ?>
#endforeach
</tbody>
</table>
</div>
Here is the javascript I have to use to load the table after 3 seconds:
<script type="text/javascript">
setInterval(function() {
$("#example").load("list #example");
}, 30000);
</script>
You need to give load a callback and check if you returned any data.
Without knowing the return data structure my best guess would be
$("#example").load("list #example", function (data) {
// hopefully you are returning json. if not, return json. It's the artisan way :D
let parsed = JSON.parse(data);
if (parsed) {
// build html and inject in dom
}
});
See this is how I actually solved the problem,
I put the table inside a new div and I called the jquery .load() on that div.
Like this :
<div class="reloadTable">
<table class="table table-striped table-bordered dataTable" id="example">
// table data
</table>
</div>
javaScript :
<script type="text/javascript">
setInterval(function() {
$(".reloadTable").load("list #example");
}, 3000);
</script>
Related
I have a page where I set the dataTable content in the div using the following code:
$('#' + divid + '-data')[0].innerHTML = data.TableContent;
I get the table content from a different method. Here is my TableContent:
<table class="table-responsive dataTable table-striped" id="51">
<tr>
<td class="details-control"></td>
<td>Hi</td>
</tr>
</table>
On the page, when I tried to display an alert message on click on table-responsive column, nothing happens.
$("td.details-control").on("click", function(e) {
alert("hi");
});
I also tried:
document.getElementById("#table-51").on("click", "tr td.details-control", function () {
alert("hi");
});
Please help and thanks in advance.
Try this :
$("td.details-control").click(function(){
alert("Hi");
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table class="table-responsive dataTable table-striped" id="51">
<tr>
<td class="details-control">Show alert</td>
<td>Hi</td>
</tr>
</table>
try this
<table class="table-responsive dataTable table-striped" id="51">
<tr>
<td class="details-control"></td>
<td onclick="alert('hi')">Hi</td>
</tr>
</table>
You seem to overcomplicate this issue; keep it simple! You miss something to click on (empty <td>) and the use of a native DOM method along with a jQuery delegated event handler will never work.
var data = { TableContent: `<table class="table-responsive dataTable table-striped" id="51">
<tr>
<td class="details-control">click me</td>
<td>Hi</td>
</tr>
</table>`
}
$('#sample')[0].innerHTML = data.TableContent;
$('#sample').on('click', 'td.details-control', function(e) {
alert("hi");
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="sample"></div>
I am new to Angularjs and I am trying to figure out how it's different modules work. So, I am working on a project on which I wanna achieve an accordion-like style for a page, in which a table is shown when I click a panel button. The HTML code that creates(dynamically from a database) the div elements I modify is posted below.The problem is that in this panel, any number of tables can be shown,while I need to only have one opened at a time,so when one opens,the one opened before it should close.Any ideas how I can achieve this functionality?(I assume the error is because the showDB variable is local to each table scope, but I don't know how to work around it.) Thanks!' `
<div ng-repeat="(key, value) in data.services">
<div ng-show="showSection(key)" class="top_panel-section">
<button class="btn top_btn btn-header" type="button" name="showDB"
ng-click="showDB=!showDB">{{key}}</button>
<table ng-show="showDB"
class="n-table toptable table-responsive n-table-standard n-table-striped n-table-hover">
<thead class="n-table-thead">
<tr>
<th width="70%">VM Name</th>
<th width="30%">Status</th>
</tr>
</thead>
<tbody class="n-table-body">
<tr ng-repeat="vm in value.vms">
<td width="76%">{{vm.vm}}</td>
<td width="24%" ng-style="getStatusStyle(vm.status)">
{{vm.status}}</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
Yes, you should remove that local showDB variable to achieve what you need.
You can easily replace it with a $scope.activeKey and evaluating it by the
<button ... name="showDB" ng-click="activateKey(key)">{{key}}</button>
And in your controller:
$scope.activeKey = null;
$scope.activateKey = function (keyToBeActivated) {
$scope.activeKey = keyToBeActivated;
}
Now you can reach that exclusivity by checking:
<table ng-show="activeKey === key" ... >
Using table $index as unique field: (available from ng-repeat)
<button ... name="showDB" ng-click="activateKey($index)">{{key}}</button>
And
<table ng-show="activeKey === $index" ... >
<div class="btn-group" >
<button type="submit" onclick="display">DISPLAY SCHEDULE</button>
<button type="submit" onclick="open" >OPEN SCHEDULE</button>
</div>
<table class="table table-striped responsive">
<!-- column headers -->
<% Result result = (Result)request.getAttribute("result");%>
<thead>
<tr>
<th id="change"> Transfer Switch </th>
</tr>
</thead>
<!-- column data -->
<tbody>
<c:forEach var="row" items="${result.rows}">
<tr>
<td>
<c:out value="${row.Schedule_ID}"/>
</td>
</tr>
</c:forEach>
</tbody>
</table>
I am trying to change my table header name with button click, so what i did was added a simple java script as follows.
<script>
function display(){
document.getElementById("change").innerHTML="display"
}
function open(){
document.getElementById("change").innerHTML="open"
}
</script>
but since my JSTL result row gets updated for every loop my header changed too thus ending myself with the same header Transfer switch.
Can i solve this using Jquery on load ??, not sure how to use it.
I heard of solutions to make 2 tables but that's not the solution i am looking for since the table is responsive uses bootstrap and also has some buttons in its rows .
Two things I have changed from your code, now it looks fine,
Don't use the JS reserved keyword(s) like open. Use openSchedule() instead.
For better practice, Use span tag for change the text instead of giving id to th.
Your HTML with rendered table rows (Assume I could not able to reproduce jsp values here.)
<div class="btn-group" >
<button type="button" onclick="displaySchedule()">DISPLAY SCHEDULE</button>
<button type="button" onclick="openSchedule()" >OPEN SCHEDULE</button>
</div>
<table class="table table-striped responsive">
<thead>
<tr>
<th><span id="change">Transfer Switch</span></th>
</tr>
</thead>
<tbody>
<!-- Here I assumed two rows, since It's JSP value I couldn't reproduce -->
<tr>
<td>Text1</td>
</tr>
<tr>
<td>Text2</td>
</tr>
</tbody>
</table>
Your Script,
window.displaySchedule = function(){
document.getElementById("change").innerHTML="display";
}
window.openSchedule = function(){
document.getElementById("change").innerHTML="open";
}
See fiddled demo here for live sample.
I have a datatable and buttons for delete and update. And these button are disabled. I also have some checkbox in the first column of every row. Whenever I click the checkbox, the edit and delete button will be enabled. It is working on the first page of my datatable but when I click a row from other pages of the datatable, it doesn't enabling the buttons. What is the problem with it? I have this code:
HTML Table:
<table class="table table-bordered table-hover table-striped" id="account_data" width="100%" style="margin-top: 0px"> <thead class="header">
<tr class="well"><th colspan="3" style="text-align:center">LIST OF USERS</th></tr>
<tr class="well">
<th style="width: 5px"><input type="checkbox" class="check"/></th>
<th style="font-size: 14px;padding-left: 20px;"> ID#</th>
<th style="font-size: 14px;padding-left: 20px;"> Name</th>
</tr>
</thead>
<tbody>
<?php if($users != NULL){?>
<?php foreach($users as $row){ ?>
<tr>
<td align="center"><input type="checkbox" class="accounts" name="accounts[]" value="<?php echo $row->user_id;?>"/></td>
<td style="font-size: 15px;padding-left: 20px;"><?php echo $row->user_id;?></td>
<td style="font-size: 15px;padding-left: 20px;"><?php echo $row->user_name;?></td>
</tr>
<?php }?>
<?php }?>
</tbody>
</table>
JQUERY:
<script>
$(document).ready(function(){
var count=0;
var chkId=new Array();
var checkedValue ='';
$('.check').click(function() {
$(" .check").each(function () {
if($(this).is(":checked"))
{
$(" .accounts").prop('checked',true);
// $('#edit_acc').prop('disabled',false);
var n = $( " .accounts:checked" ).length;
if(n==1){
$('#edit_acc').prop('disabled',false);
}
if(n>1){
$('#edit_acc').prop('disabled',true);
}
$('#delete_acc').prop('disabled',false);
return
}
$(" .accounts").prop('checked',false);
$('#edit_acc').prop('disabled',true);
$('#delete_acc').prop('disabled',true);
});
});
});
</script>
The problem is that the checkboxes on page #2 and forth not is part of the DOM when your $(document).ready() is fired. jQuery dataTables inject and remove rows in order to show different pages.
So you must use a delegated event handler instead of click(). By that, dynamically injected rows (i.e their checkboxes) also will be included :
$('#account_data').on('click', '.check', function() {
...
});
instead of $('.check').click(function() {
I have a single column table and each entry of the table is a text area. After user fills out the text area in multiple rows, I want to store the data of each text area in a collection on click of a button. How can I do this in Meteor? The HTML template looks like this:
<table id="myTable" class="table table-bordered">
<thead>
<tr>
<th>Notes</th>
</tr>
</thead>
<tbody>
{{#each items}}
<tr>
<td id="notes">
<textarea rows="4" cols="50">
</textarea>
</td>
</tr>
{{/each}
</tbody>
</table>
You could try to utilize the .each Method of JQuery.
Example:
Template.yourtemplate.events({
'click .button': function(e) {
$("textarea").each(function(i) {
YourCollection.insert($(this).val())
})
}
})