I have a PHP code, which is in a table tag.It shows a text from database. I want to refresh this table, to load updated text from database in every - let's say - 1 minute without refreshing the whole page. I've found several solutions to reload table without refreshing a page and it seems it can be done with AJAX or JS, but they only refresh it with a specific content or a specific file, however, I can't figure out how to refreshed.
<table class="table table-striped">
<thead>
<tr>
<th>Department</th>
<th class="col_small col_center">Employees</th>
<th class="col_small col_center">% Percentage</th>
</tr>
</thead>
<tbody>
<?php $employeeslist=$emp_departmentObj->selectorgall();
foreach($employeeslist as $list)
{
$total=$emp_regObj->selectorgall();
$totalemp=count($total);
$deptemp=$emp_regObj->selectemployee($list->id);
$totaldeptemp=count($deptemp);
$percentage=($totaldeptemp/$totalemp)*100;
?>
<tr>
<td><?php echo $list->department ?></td>
<td class="col_center">
<?php echo $totaldeptemp; ?>
</td>
<td class="col_center">
<?php echo number_format($percentage,1).'%'; ?>
</td>
</tr>
<?php } ?>
</tbody>
</table>
You can define a function in document ready like this
$(document).ready(function() {
setInterval(function() { rebindTable() }, 3000);
function rebindTable() {
$.ajax({
url: "http://localhost:80/data.php",
success: function(result) {
var data = result;
$('#td-1-data').html(data.param1);
$('#td-2-data').html(data.param2);
}
});
}
})
this way you can use an setInterval method and re-bind the data in the table using ajax , in this i assume your http://localhost:80/data.php is returning some data which your are binding to the td of the table you have defined
Related
In my web, when hovering over a row, I show a popup table with data.
What I want to be able to do is to get these data from the database.
Currently it looks like this :
<td id="popupContent" data-trigger='hover' data-container="body"
data-toggle="popover"
data-content="
<div class='table-responsive'>
<table class='sastable table-striped table-bordered' data-toggle='table' data-height='150' data-classes='table table-striped table-bordered'>
<thead id='head'>
<tr>
<th class='col-md-6'>Value</th>
<th class='col-md-6'>Score</th>
</tr>
</thead>
<tbody>
<tr>
<td class='col-md-6'>0</td>
<td class='col-md-6'>1</td>
</tr>
<tr>
<td class='col-md-6'>10</td>
<td class='col-md-6'>2</td>
</tr>
<tr>
<td class='col-md-6'>20</td>
<td class='col-md-6'>3</td>
</tr>
</tbody>
</table>
</div>"
data-html="true"></td>
</tr>
And the js function :
$(function() {
$('#popupContent')
.popover({
container : 'body'
});
});
In my database I have a table like this :
Type Value Score
type1 0 1
type1 10 2
....
type2 0 1
based on the Id of the td I want to be able to call a certain type and all of the values and scores to put them on the popup table.
How do I achieve this ?
In a Spring Controller I have a RestController that returns a JSON file with the tables
#RequestMapping(path="/scores", method=RequestMethod.GET)
public List<Scores> getAllScores(){
return scoreService.getAllScores();
}
Maybe I could have a function like :
function getClientResults(type) {
// if type=="popupContent"
var url "/scores/"+type1 or something ?
$.getJSON(url, function(data) {
\\change table values ??
}
Am I on the right track ? or is there a better way to do this ? Any help would be appreciated ! Thank you
Way 1 You will be injecting a php into top of your page where You will connect to your database and do a query to get the data and write it into that popup table like <? echo $query['whatever']; ?>.
Way 2 You will create autonomus query page and when you hover the row it will send ajax request to that page receive data and will load it into the popup.
I'm populating a table from my database and it looks like this :
<form name = "Form" role="form" action ="php/teilnehmen.php" method="POST">
<fieldset>
<table width="100%" class="table table-striped table-bordered table-hover" id="dataTables-example">
<thead>
<tr>
<th>ID</th>
<th>Studienfach</th>
<th>Teilnehmer/in</th>
<th>Teilnehmen</th>
</tr>
</thead>
<tbody>
//<?php php code.....
$i =0;
$sizeofstudienfaecherseperate =
count($studienfaecherseperate);
for ($i; $i < $sizeofstudienfaecherseperate; $i++) {
?>
<tr class="odd gradeX">
<td ><?php echo($i+1);?></td>
<td class="studienfach"><?php echo($studienfaecherseperate[$i]);?>
<input type="hidden" name="PARAM_STUDIENFACH" id="PARAM_STUDIENFACH"
value="<?php echo($studienfaecherseperate[$i]);?>"> </input>
</td>
<td ><?php echo($teilnehmer[$i]);?></td>
<td width="10%">
<?php if ($teilnahmestatus[$i] =="0"){ ?>
<button type="submit" class="btn btn-success use-address"
name="teilnehmern"id="teilnehmen">Teilnehmen</button>
<?php }else{?>
<button type="submit" class="btn btn-danger use-address" name="teilnahme-beenden"
id="teilnahme-beenden">Teilnahme beenden</button>
<?php }?>
</td>
</tr>
<?php } ?>
</tbody>
</table>
</fieldset> <!-- /.table-responsive -->
the table is shown great, and my problem is when i try to submit my second column value "PARAM_STUDIENFACH" of a specific row to my php webservice. It always gives me back the last value. I know that because I'm using the same id in every row so it will be overwritten. I tried using JavaScript to return the value of the clicked row from other questions in the forum but it didn't work for me. I'm using a bootstrap table if that helps.
EDIT 1 :
Thanks to #Taplar answer I managed to find a solution to my problem. I used this JavaScript to retrieve the data and ajax to send a post request. This is the code I used :
$(".use-address").click(function() {
var item = $(this).closest("tr") // Finds the closest row <tr>
.find(".studienfach") // Gets a descendent with class="nr"
.text(); // Retrieves the text within <td>
$.ajax({
type: "POST",
dataType: "json",
url: "php/teilnehmen.php",
data: {PARAM_STUDIENFACH:item},
success: function(data){
alert(item);
},
error: function(e){
console.log(e.message);
}
});
});
my problem now is in the alert the "item" shows correctly but in my database it is saved as the following example :
item = a (shows in alert a)
item = a \n (it's saved like that in the database with spaces afeter \n)
i tried to trim the item before sending it but i got the same result
to get the item sent by ajax i'm using this line of code in :
$studienfach = null;
if(isset($_POST['PARAM_STUDIENFACH']))
$studienfach = $mysqli->real_escape_string($_POST['PARAM_STUDIENFACH']);
EDIT 2:
i managed to solve my second problem by doing this :
$pos= strpos($studienfach, "\\");
$studienfachtemp = substr($studienfach, 0,$pos);
trim($studienfachtemp);
if there is more elegent or correct way to do it ! please post it ! thank you all.
<elem1>
<elem2 class="getMe"></elem2>
<elem3></elem3>
</elem1>
Quick contextual lookup reference. Say you have a click event bound on all 'elem3' on your page. When you click it you want to get the associated 'elem2', not all of them. With the class you can contextually look this element up by doing...
//'this' being the elem3 that was clicked
$(this).closest('elem1').find('.getMe');
From the element you clicked, it will find the shared 'elem1' parent of both 'elem2' and 'elem3' and then find only the '.getMe' that belongs to that parent.
More reading material: http://learn.jquery.com/using-jquery-core/working-with-selections/
How to apply jquery after Ajax Calling in codeigniter
my code of ajax calling
function load_data_ajax(type){
$.ajax({
'url' : '/index.php?compose/get_list',
'type' : 'POST', //the way you want to send data to your URL
'data' : {'type' : type.value},
'success' : function(data){ //probably this request will return anything, it'll be put in var "data"
var container = $('#container'); //jquery selector (get element by id)
if(data){
$('#container').html(data);
}
}
});
}
My Html
<table align="center">
<tr>
<td>
<font class="formpromp">Select Category: </font>
<SELECT name="crs" onchange='load_data_ajax(this)'>
<?php
foreach($query as $rowcrs):
echo "<OPTION value='".$rowcrs['CD']."'>".$rowcrs['TITLE1']."</OPTION>\n";
endforeach;
?>
</SELECT>
</td>
</tr>
</table>
<div id="container">
<table id='table1' border='1' cellspacing='0' cellpadding='0'><thead><tr>
<th align='left'><input type='checkbox' value='' />Code</th>
<th>Name</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>huzefa</td>
</tr>
<tr>
<td>2</td>
<td>husain</td>
</tr>
</tbody>
</table>
</div>
I am using Table filtergrid for table
<script type="text/javascript" language="javascript" id="t3">
var tf = setFilterGrid('table1', props);
</script>
ITS properly load First time, but i cant understand how to load java script after Ajax Data load.
Please any one help me.
Thanks
This is my form :
<div class="mutiple-array-form">
<?php $form = ActiveForm::begin(); ?>
<table id="sampleTbl", class="table table-striped table-bordered">
<thead>
<tr id="myRow">
<th>Name</th>
<th>Age</th>
</tr>
</thead>
<tbody>
<tr>
<td>william</td>
<td>32</td>
</tr>
<tr>
<td>Muli</td>
<td>25</td>
</tr>
<tr>
<td>Sukoco</td>
<td>29</td>
</tr>
</tbody>
</table>
<div class="form-group">
<?= Html::button('Create',['class' => 'btn btn-success _addNew', 'onclick' => 'myfunction()']) ?>
</div>
<?php ActiveForm::end(); ?>
</div>
Below is my Javascript code :
<?php
$script = <<< JS
function myfunction() {
alert(document.getElementById("sampleTbl").rows.namedItem("myRow").innerHTML);
}
JS;
$this->registerJs($script);
?>
My code does not work. When I click button, nothing happens. For example, I want to show table value using array in alert. Please help!
What you are trying won't work because somehow declaring the function in inline script in yii2 doesnt work,i dont know proper reason of it and i am trying to find the reason.
Now your code will work if you write your script like this
<?php
$script = <<< JS
$('#idOfButton').click(function(){
alert(document.getElementById("sampleTbl").rows.namedItem("myRow").innerHTML);
});
JS;
$this->registerJs($script);
?>
And it will only print the value of your header
Now if you want the data of the table inside as an array and alert it, try this code
<?php
$script = <<< JS
$('#idOfButton').click(function(){
var myTableArray = [];
$("table#sampleTbl tr").each(function () {
var arrayOfThisRow = [];
var tableData = $(this).find('td');
if (tableData.length > 0) {
tableData.each(function () {
arrayOfThisRow.push($(this).text());
});
myTableArray.push(arrayOfThisRow);
}
});
alert(myTableArray);
});
JS;
$this->registerJs($script);
?>
And i would suggest that you use AppBundle to use script that way you will be able to debug the code via browser and figure out the problem yourself,which will help you find the answer.
I have a table displaying the list of online and offline users in my dashboard page. I'm trying to automatically refresh the entire table every 5 seconds to show if there are other users who just logged in or out without refreshing the whole page. I have searched through different threads and pages regarding this which is telling me to use AJAX or JSP. But I can't seem to make it work.
This is my table:
<div class="col-md-2">
<table class="table table-striped">
<thead>
<tr>
<th>Status</th>
<th> </th>
</tr>
</thead>
<tbody>
<?php
$online = DB::table('users')->where('group_id', $user->group_id)->orderBy('online', 'desc')->get();
foreach($online as $val=>$key)
{ ?>
<tr>
<td><?php if ($key->online == 1) { echo '<span class="label label-success">Online</span>'; } else { echo '<span class="label label-warning">Offline</span>'; } ?></td>
<td><?=$key->first_name." ".$key->last_name?></td>
</tr>
<?php } ?>
</tbody>
</table>
I found this code on a different thread, but when I tried to use it on my project, it wasn't loading the data in my table. I'm not very familiar working with javascripts or AJAX, so I'm hoping you can help me out. It'll be very much appreciated.
<script>
$(document).ready(function(){
$("#refresh").click(function()
{
$("#Container").load("content-that-needs-to-refresh.php");
return false;
});
});
</script>
<div id="Container">
<?php include('content-that-needs-to-refresh.php'); ?>
</div>
Refresh
In your case perfectly working for you.
setInterval(function()
{
//call ajax here..for your table result
}
}, 3000);
and then ajax will giving you result every 3 second.
I hope it will work for you.
Make sure you loaded jQuery. You can use Google CDN or save it and load it on your own server.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
Use setInterval
<script>
$(document).ready(function(){
var refreshUsers = setInterval(function() {
$("#Container").load("content-that-needs-to-refresh.php");
}, 5000); // 5000 ms = 5 sec
});
</script>
<div id="Container">
<?php include('content-that-needs-to-refresh.php'); ?>
</div>
If you should want to stop refreshing, use
clearInterval(refreshUsers);