Auto refreshing div in Code Igniter - javascript

I'm having some problems with auto refreshing my div, using code igniter framework. What I'm trying to do in the code below is to auto refresh the particular div id="lot_info" every 1 second.
The div is not refreshing and I am getting an error at google chrome's console saying: jquery.js:5 GET http://mywebsite/Home/display_lot_table 404 (Not Found)
Controller:
public function index()
{
$data['title'] = 'Test System';
$view = 'view';
$this->load->view('templates/normal_header', $data);
$this->load_lot_table($view);
$this->load->view('templates/legend_footer', $data);
}
public function load_lot_table($type)
{
$config = array();
$config['base_url'] = base_url()."index.php/Home/index";
$config['total_rows'] = $this->home_model->record_count();
$config['per_page'] = 10;
$config['uri_segment'] = 3;
$config['next_link'] = 'Next';
$config['prev_link'] = 'Previous';
$this->pagination->initialize($config);
$page = ($this->uri->segment(3)) ? $this->uri->segment(3) : 0;
$results = $this->home_model->fetch_lots($config['per_page'], $page);
$data['disp_rows'] = $results;
$data['links'] = $this->pagination->create_links();
if($type == 'view')
{
return $this->load->view('home/index', $data);
}
elseif($type == 'refresh')
{
return $this->load->view('home/index', $data, true);
}
}
public function display_lot_table()
{
$refresh = 'refresh';
$this->load_lot_table($refresh);
}
View:
<script>
$(document).ready(function()
{
refresh();
});
function refresh()
{
setTimeout(function()
{
$('#lot_info').load('<?php echo base_url();?>Home/display_lot_table');
refresh();
}, 1000);
}
</script>
<div id="lot_info" class="container">
<table class="table table-responsive table-condensed table-bordered dispo-table">
<tr>
<th rowspan="2">AStatus</th>
<th rowspan="2">A</th>
<th rowspan="2">B</th>
<th rowspan="2">C</th>
<th rowspan="2">D</th>
<th rowspan="2">E</th>
<th rowspan="2">F</th>
<th colspan="3" scope"col">G</th>
<th rowspan="2">H</th>
</tr>
<tr>
<th>I</th>
<th>J</th>
<th>K</th>
</tr>
<?php foreach($disp_rows as $row):?>
<tr>
<td><?php echo $row->Astatus;?></td>
<td align="center"><?php echo $row->B;?></td>
<td align="center"><?php echo $row->C;?></td>
<td align="center"><?php echo $row->D;?></td>
<td align="center"><?php echo $row->E;?></td>
<td align="center"><?php echo $row->F;?></td>
<td align="center"><?php echo $row->G;?></td>
<td><?php echo $row->H;?></td>
<td align="center"><?php echo $row->I;?></td>
<td align="center">-</td>
<td align="center"><?php echo $row->J;?></td>
</tr>
<?php endforeach?>
</table>
</div>

You received error :
jquery.js:5 GET http://mywebsite/Home/display_lot_table 404 (Not Found)
Seems like the path url is not correct. Look closely, is that correct? cause i see you defined in controller method having code like $config['base_url'] = base_url()."index.php/Home/index";. Completely different with the code defined in jquery load as $('#lot_info').load('<?php echo base_url();?>Home/display_lot_table');. So why not adding index.php like below code :
$('#lot_info').load('<?php echo base_url();?>index.php/Home/display_lot_table');
You can remove those index.php from url anyway.

Related

display number in dashboard to start from 1 every year

I have a table that I wish to display in my .php file, as it will display every number of each row but when it comes to a brand new year, it will changes to begin at 1 once again.
.php file html code:
<table id="example">
<thead>
<tr>
<th style="width: 40px">Year</th>
<th style="width: 40px">Id</th>
</tr>
</thead>
<tbody>
<?php
include('include/config1.php');
$query = "SELECT * from table ORDER BY Id DESC";
$result = mysqli_query($db, $query);
while ($row = mysqli_fetch_assoc($result)) {
?>
<tr>
<td><?php
if($row['status']!=3){ //display the year from the date according to status
echo date("Y",strtotime($row['sdate'])); }
else{
echo date("Y",strtotime($row['ssdate']));
} ?>
//the years are the same for both columns in each row
</td>
<td>//The ID that auto starts from 1 every year with an increment of 1 to the newest (not the same as the unique id from the table </td>
<?php}?>
</tbody>
</table>
What kind of javascript functions I must implement to make this work?
NOTE: all the data inserted into the MySQL table will not be removed from the database, the status will only change to delete, that's all.
First of all, If you want your records to be sorted year after year, you also have to sort by the date field!
"SELECT * from table ORDER BY sdate,Id DESC";
And secondly you will have to remember your previous year in a loop, and compare it to the current. If it is different, then reset your ID to 1
<?php
include('include/config1.php');
$query = "SELECT * from table ORDER BY sdate, Id DESC";
$result = mysqli_query($db, $query);
$currentYear = null;
$data = [];
while ($row = mysqli_fetch_assoc($result)) {
$year = ($row['status'] == 3) ? date("Y", strtotime($row['ssdate'])) : date("Y", strtotime($row['sdate']));
$data[$year][] = $row;
}
?>
<table id="example">
<thead>
<tr>
<th style="width: 40px">Year</th>
<th style="width: 40px">Id</th>
<th style="width: 80px">Machine No</th>
<th style="width: 80px">Project Name</th>
<th style="width: 80px">PIC</th>
<th style="width: 80px">Purpose of Service</th>
</tr>
</thead>
<tbody>
<?php
foreach ($data as $year => $oneYear) {
for ($i = count($oneYear); $i >= 1; $i--) {
?>
<tr>
<td><?= $year ?></td>
<td><?= $i ?></td>
<td><?= $oneYear[$i]['Machine_No']; ?></td>
<td><?= $oneYear[$i]['projectName']; ?></td>
<td><?= $oneYear[$i]['pic']; ?></td>
<td><?= substr(str_replace('\r\n', "\r\n", $row['Purpose_of_Service']), 0, 50); ?></td>
</tr>
<?php
}
}
?>
</tbody>
</table>
Based on #Dmitriy Gritsenko's Help I've managed to did it, but the problem is that the other data from the columns of the table couldn't be display
<table id="example" >
<thead>
<tr>
<th style="width: 40px">Year</th>
<th style="width: 40px">Id</th>
<th style="width: 80px">Machine No</th>
<th style="width: 80px">Project Name</th>
<th style="width: 80px">PIC</th>
<th style="width: 80px">Purpose of Service</th>
</tr>
</thead>
<tbody>
<?php
include('include/config1.php');
$query = "SELECT * from table ORDER BY sdate DESC, Id DESC";
$result = mysqli_query($db, $query);
$currentYear = null;
$data = [];
while ($row = mysqli_fetch_assoc($result)) {
$year = ($row['status'] == 3) ? date("Y", strtotime($row['ssdate'])) : date("Y", strtotime($row['sdate']));
$data[$year][] = $row;
}
foreach ($data as $year => $oneYear) {
for ($i = count($oneYear); $i >= 1; $i--) {
?>
<tr>
<td><?= $year ?></td>
<td><?= $i ?></td>
<td><?php echo $row['Machine_No']; ?></td>
<td><?php echo $row['projectName']; ?></td>
<td><?php echo $row['pic']; ?></td>
<td><?php
$row['Purpose_of_Service'] =substr( $row['Purpose_of_Service'],0,50);
echo (str_replace('\r\n', "\r\n", $row['Purpose_of_Service']));
?>
</td>
<?php
}}
?>
</tbody>
</table>

trigger ajax event when clicked on HTML `<audio>` element

I'm working on a project when a user logs in he/she can listen to music. Till here its fine but i would like to store history of user regarding which song he has listened. I have tried using jquery alert but this on click event is not working. Kindly suggest me a way. Here is the image of my project...
Here is the HTML code: There music data is displayed
<?php
include('code/Confim_login.php'); //ITS FILE NAME
$login = new Confim_login(); // CREATED THE OBJECT
?>
<div class="table-responsive">
<table class="table table-hover table-bordered table-condensed" id="music_library">
<thead>
<tr>
<th width="8%">#</th>
<th title="added date">Date</th>
<th>Name</th>
<th>User Added</th>
<th>Music</th>
<th>Action</th>
</tr>
</thead>
<tbody>
<?php
$login->show_music();
?>
</tbody>
</table>
</div>
Here is the jquery event
<script>
$(document).ready(function(){
$(".musicid").click(function(){
alert('clicked');
});
});
</script>
Here is the PHP code
<?php
function show_music(){
$data = "";
if($_SESSION['user_logged'][0]['login_type'] == "Admin"){
$data .= 'del_single_btn';
}
else
{
$data .= '';
}
$sql = "SELECT * FROM music_library WHERE status=1";
$res = $this->link->query($sql);
$k=1;
if($res->num_rows > 0){
while($row = $res->fetch_assoc()){
?>
<tr>
<td><?php echo $k;?></td>
<td><?php echo $row['added_date'];?></td>
<td><?php echo $row['music_name'];?></td>
<td><?php echo $row['user_added'];?></td>
<td>
<audio class="musicid" id="<?php echo $row['id'];?>" controls>
<source src="code/<?php echo $row['file_path'];?>" type="audio/mpeg" >
Your browser does not support the audio element.
</audio>
</td>
<td><button class="btn btn-default <?php echo $data?>" style="border:1px solid #d9534f;color:#d9534f;" id="<?php echo $row['id'];?>">Delete</button></td>
</tr>
<?php
$k++;
}
}
else
{
?>
<tr>
<td colspan="6">No Music Files Found</td>
</tr>
<?php
}
}
?>
THANKS IN ADVANCE
<audio onplay="myFunction(this.data-music-id)">...</audio>
and inside
myfunction(id){
song_id = id;
get the id and send the ajax
}

Datatables Delete button is not working on other pages except first [duplicate]

This question already has answers here:
Event binding on dynamically created elements?
(23 answers)
Closed 5 years ago.
I am using datatables. I have action column in the table in which one delete button and i am using ajax post function to delete any row. But Delete button is only working on the first page. It is not working on other pages.
Here is my delete button.
<table id="example" class="table table-striped table-bordered" cellspacing="0" width="100%">
<thead>
<tr>
<th>#</th>
<th class="col-md-5">Resource Person</th>
<th class="col-md-4">Title/Topic</th>
<th> Date </th>
<th>Actions</th>
</tr>
</thead>
<tbody>
<?php
$sql = "SELECT * FROM seminar";
$result = $con->query($sql);
if ($result->num_rows > 0) {
// output data of each row
$count = 1;
while($row = $result->fetch_assoc()) { ?>
<tr>
<td><?= $count ?></td>
<td><?= $row['person'] ?></td>
<td><?= $row['topic'] ?></td>
<td><?= $row['date'] ?></td>
<td>
<button class="btn btn-danger delete_seminar" value="<?php echo $row['id'] ?>"> <span class="glyphicon glyphicon-trash" aria-hidden="true"></span></button>
<button class="btn btn-info" onclick="location.href = 'addRecord.php?id=<?php echo $row['id'] ?>';"><span class="glyphicon glyphicon-edit" aria-hidden="true"></span></button>
</td>
</tr>
<?php $count++; }
}else{
echo "<tr><td colspan='5'><center>No Record Found</center></td></tr>";
}
?>
</tbody>
And my jquery function.
$('#example').DataTable();
$(function() {
$(".delete_seminar").on('click', function(event) {
if (confirm("Are you sure?")) {
var data = $(this).val();
$.post('requests/seminars.php', {delete_sem: data}, function(data) {
if (data == "delete") {
location.reload();
}else{
alert(data);
};
});
}
});
})
I don't know how to resolve this problem. Please help me to come out from this problem.
You must edit your javascript like below
$(document).on('click', '.delete_seminar', function(e){..});

Render table values dynamically using Ajax after page load in php

My idea is to get connectivity status of available servers in database on a php page.
<tbody>
<?php foreach ($data['servers'] as $server) { ?>
<tr>
<td class=""><?php echo $server->server_name; ?></td>
<td class=""><?php echo $server->base_path; ?></td>
<td class="server_status"><?php if (is_dir($server->base_path)){ echo 'Pass';} else { echo 'Fail' } ?></td>
</tr>
<?php } ?>
</tbody>
I want to do this just after page load using ajax like this page screenshot
How do I call ajax to get each value of this dynamically generated table. So far, I have tried the following code
<?php foreach ($data['servers'] as $server) { ?>
<tr>
<td class=""><?php echo $server->server_name; ?></td>
<td class=""><?php echo $server->base_path; ?></td>
<td class="server_status"></td>
<td class="server_status_loading"></td>
</tr>
<?php } ?>
JS
$(function(){
$(".server_status").hide();
$(".server_status_loading").show();
$.ajax({
url: 'get-server-status'
})
.error(function(){
alert('Error!');
})
.done(function(response){
$(".server_status_loading").hide();
$(".server_status").show();
$(".server_status").html(response);
});
get-server-status function:
public function getStatus() {
$basep = $this->_serverModel->getBasePath(2);
if (is_dir($basep)) {
echo 'Pass'; exit;
}
else {
echo 'Fail'; exit;
}
}
Thanks in advance!
first add id to your <tr>.
<?php foreach ($data['servers'] as $server) { ?>
<tr id="echo database id here.">
<td class=""><?php echo $server->server_name; ?></td>
<td class=""><?php echo $server->base_path; ?></td>
<td class="server_status"></td>
<td class="server_status_loading"></td>
</tr>
then check this link to handle the ajax on page load and this link to handle the ajax on click.Rest everything is provided there.
In link you can replace status to server_status_loading
try like this
$(document).ready(function(){
var hTable = document.getElementById('table2');
var iRowCount = hTable.rows.length;
for(var i=1; i<iRowCount; i++){
basepath= hTable.rows[i].cells[2].childNodes[1].value;
$.ajax({
url: 'get-server-status',
data :basepath
})
.error(function(){
alert('Error!');
})
.done(function(response){
hTable.rows[i].cells[2].childNodes[3].value=response;
});
}
}

Javascript comparison for a table row to highlight a row in red (CakePHP)

How do I find the right approach to getting this comparison to work? I've tried all kinds of approaches. I even used ids, but they don't respond. If I do this "gumboots" string check though, it does work. "gumboots" was just a value for a product name that existed somewhere on the table. This is how I know I do not need PHP at all for this, despite the tables displayed in PHP in the Index view below. Any idea? I would appreciate it.
Here's the javascript
$('#example tbody tr td').each(function()
{
//var p_no_in_stock = parseInt($('#p_no_in_stock')).val();
//var p_reorder_quantity = parseInt($('#p_reorder_quantity')).val();
var p_no_in_stock = parseInt(document.getElementById('p_no_in_stock')).value;
var p_reorder_quantity = parseInt(document.getElementById('p_reorder_quantity')).value;
//if ($product['Product']['p_no_in_stock'].val() < $product['Product']['p_reorder_quantity'].val())
if ($(this).text() == "gumboots")
//if ($(this).p_no_in_stock < $(this).p_reorder_quantity)
{
//$("#row_" +" td").effect("highlight", {}, 1500);
$(this).closest('tr').attr('style','background-color:red');
$(this).parent().css('background-color','red');
$(this).parent().attr('style','background-color:red');
$(this).parent().addClass('highlight');
$(this).parent().css('font-weight','bold');
}
});
And this is the application in a View called Products.index
<div class="active">
<h2><?php echo __('Products'); ?></h2>
<table cellpadding="0" cellspacing="0" class="table table-striped table-bordered" id ="example">
<tr>
<th><?php echo $this->Paginator->sort('p_name', 'Name'); ?></th>
<th><?php echo $this->Paginator->sort('category_name', 'Category'); ?></th>
<th><?php echo $this->Paginator->sort('p_no_in_stock','No. in Stock'); ?></th>
<th><?php echo $this->Paginator->sort('p_reorder_quantity', 'Re-order Quantity'); ?></th>
<th class="actions"><?php echo __('Actions'); ?></th>
</tr>
<tbody>
<?php foreach ($products as $product): ?>
<tr>
<td><?php echo h($product['Product']['p_name']); ?></td>
<td> <?php echo $this->Html->link($product['Category']['category_name'],
array('controller' => 'categories', 'action' => 'view', $product['Category']['id'])); ?>
</td>
<td id = "p_no_in_stock" type ="number" ><?php echo h($product['Product']['p_no_in_stock']); ?> </td>
<td id ="p_reorder_quantity" type ="number" ><?php echo h($product['Product']['p_reorder_quantity']); ?> </td>
<td class="actions">
<?php echo $this->Html->link(__('View'), array('action' => 'view', $product['Product']['id']), array('class' => 'btn btn-mini')); ?>
<?php echo $this->Html->link(__('Edit'), array('action' => 'edit', $product['Product']['id']), array('class' => 'btn btn-mini')); ?>
<?php echo $this->Form->postLink(__('Delete'), array('action' => 'delete', $product['Product']['id']), array('class' => 'btn btn-mini'), __('Are you sure you want to delete # %s?', $product['Product']['id'])); ?>
</td>
</tr>
<?php endforeach; ?>
</tbody>
</table>
Thanks in advance.
Is this what you're asking?
http://jsfiddle.net/SinisterSystems/z9SE7/1/
HTML:
<table>
<tr>
<td>Test</td>
<td>Test</td>
<td>Test</td>
<td>Test</td>
<td>Test</td>
</tr>
<tr>
<td>Test</td>
<td>Test</td>
<td>Test</td>
<td>Test</td>
<td>Test</td>
</tr>
</table>
CSS:
tr:hover td {
background:#F00;
}
I am sending you mine code, please modify it accordingly....
The PHP Code is as -
<?php
if($num>0)
{
echo '<table width="100%" id="dep_table" style="margin-top:10px;" cellspacing="1" cellpadding="2" border="0">';
echo '<tr bgcolor="#4682B4">';
echo '<th>Editor</th>';
echo '<th>Department Id</th>';
echo '<th>Department Name</th>';
echo '</tr>';
$i=0;
while ($row = $stmt->fetch(PDO::FETCH_ASSOC))
{
$i++;
if($i % 2 == 0)
{
$bgcolor= "#6AA2C3";
}
else
{
$bgcolor= "#A2B5CD";
}
//extract row, this will make $row['firstname'] to just $firstname only
extract($row);
//creating new table row per record
echo "<tr bgcolor='$bgcolor' id='$DeptId' name='edit_tr'>";
echo '<td id="edit"><input id="edit" type="radio" name="deptid" value="DeptId" ?></td>';
echo "<td class='format'>{$row['DeptId']}</td>";
echo "<td class='format'>{$row['DeptName']}</td>";
echo "</tr>";
}
echo "</table>";
}
echo "</div>";
The JS for corresponding code is as -
$(document).ready(function() {
row_color();
$('#dep_table tr').click(function(e) {
$(this).find('td input:radio').prop('checked', true);
/* submit_fxn();
$('#form_ndesg').submit(function(e) {
return false;
});*/
});
});
//******* 1 Div Fade In/Out effect *******
function row_color(){
$('#dep_table tr').not(':first').hover(function(){
$(this).addClass('hover');
},function(){
$(this).removeClass('hover');
});
};
The corresponding CSS code is as -
tr.hover{
background-color:#E7ECB8;
color:#990000;
}
You will move your mouse on the table, it will change the row color as well as rwo text color and when you click on particular row, it will enable the row by selecting radio button..
If this answer is helpful for you then please like it for answer, so that others can use it for reference.... Thanks and best of luck

Categories