how to call functions broadcast_js file - javascript

i already have a php script. when I will call its function, the function is not running. how to call the function ? and this is the script
...........
<table class="table table-hover" width="100%">
<thead style="position: sticky;top: 0;">
<tr>
<th style="position: sticky;left:-5px;background-color: white">Level</th>
<th>Area</th>
<?php
while($row=mysql_fetch_array($max_date))
{ echo '<th>'.$row['date'].'</th>'; }
?>
<th>MOM</th>
<th>YOY</th>
<th>YTD</th>
<th>Con Check</th>
<th>Target</th>
<th>Achievement</th>
</tr>
</thead>
<tbody id="table-payload"></tbody>
</table>............
<?php
$modul_js = array();
$modul_js = [
"page/broadcast/broadcast_js.js"
];
?>
UPDATE
this is my js file for call query from mysql
$.getJSON("page/broadcast/query_broadcast.php?case=payload",function(data){
$.each(data.item, function(i, v) {
$('#table-payload').append(
'<tr class="pointer">'+
'<td>'+v.level+'</td>'+
'<td>'+v.area+'</td>'+
'<td>'+v.mtd+'</td>'+
'<td>'+v.mom+'%</td>'+
'<td>'+v.yoy+'%</td>'+
'<td>'+v.ytd+'%</td>'+
'<td>'+v.dev+'</td>'+
'<td>'+v.pt+'</td>'+
'<td>'+v.achiev+'%</td>'+
'</tr>'
);
})
});

replace
<?php
$modul_js = array();
$modul_js = [
"page/broadcast/broadcast_js.js"
];
?>
with
<script type="text/javascript" src="page/broadcast/broadcast_js.js"></script>

Related

How to pass an javascript array to an php script

I have a normal html table filled with database entries.
I got a plugin to select multiple rows in this table.
Now i want to click on a button and delete the database entry so I need to get the id out of the array and but it in my php script.
But I have not really an idea how to do it.
</div>
<table id="myTable" class="content-table">
<thead>
<tr>
<th>ID</th>
<th>Artikelnummer</th>
<th>Name</th>
<th>Preis</th>
</tr>
</thead>
<tbody>
<?php
$sql = "SELECT * FROM artikel;";
$result = mysqli_query($conn, $sql);
$resultCheck = mysqli_num_rows($result);
if ($resultCheck > 0) {
while ($row = mysqli_fetch_assoc($result)) {
?>
<tr>
<td> <?php echo $row["id"]?></td> <?php
?> <td> <?php echo $row["artikelnummer"]?></td> <?php
?> <td> <?php echo $row["name"]?></td> <?php
?> <td> <?php echo $row["preis"]?> €</td> </tr><?php
}
}
?>
</tbody>
</table>
</div>
var $rows = [];
$(function() {
console.log( "ready!" );
// start plugin
$('#myTable').TableSelection({
sort : true, // sort or not (true | false)
status : 'multiple', // single or multiple selection (default is 'single')
}, function(obj){ // callback function return selected rows array
$rows = obj.rows;
});
});
<?php
include_once 'dbh.inc.php';
$artid = ???;
$sql = "DELETE FROM artikel WHERE id= $artid;";
mysqli_query($conn, $sql);
header("Location: ../index.php?daten=success");
You can do it with html attributes. I make a example for you with html, css and javascript.
this is your html.
<table id="tableSelected" class="content-table">
<thead>
<tr>
<th>ID</th>
<th>Artikelnummer</th>
<th>Name</th>
<th>Preis</th>
</tr>
</thead>
<tbody>
<tr data-id="1">
<td>1</td>
<td>1-1</td>
<td>Test</td>
<td>1</td>
</tr>
<tr data-id="2">
<td>2</td>
<td>2-1</td>
<td>Foo</td>
<td>1</td>
</tr>
</tbody>
</table>
as you can see, every "tr" tag has "data-id" attribute.
var $rows = [];
$(function() {
$('#tableSelected').TableSelection({
sort : true,
status : 'multiple',
}, function(obj) {
$.each(obj.rows, function(i, row){
var id = $('#tableSelected').RowValue(row).attr('data-id') // You can get id with this code
});
});
});
Note: https://codepen.io/yusufilkeroguz/pen/vqPgzZ you can see live preview from here :)

'Copy to the clipboard' button works only on the first page of DataTables

I have a data table in which there are columns and rows and one of them is a copy button which onclick() initiates a copy function and copies a particular row to the clipboard, it works normally on the first page but when I use the search or the pagination it does not work and the button does not initiate the javascript function.
I searched and found in StackOverflow that I need to reinitiate the data table, which I tried but it gives an error
DataTables warning: table id=datatable - Cannot reinitialise DataTable. For more information about this error, please see http://datatables.net/tn/3
i have used the modified code that I tried after I searched StackOverflow after which it gives an error
DataTables warning: table id=datatable - Cannot reinitialise DataTable. For more information about this error, please see http://datatables.net/tn/3
('#datatable').dataTable({ "fnDrawCallback": function(oSettings) {
//code
}});
});
<table id="datatable" class="table table-striped table-bordered" class="dass">
<thead>
<tr>
<th>No.</th>
<th>Student ID</th>
<th>Reference</th>
<th>First Name</th>
<th>Last Name</th>
<th>Copy</th>
</tr>
</thead>
<tbody>
<?php
$numm=1;
$stmt = $DB_con->prepare("SELECT * FROM asd);
$stmt->execute();
while($row = $stmt->fetch(PDO::FETCH_ASSOC))
{ ?>
<tr>
<td>
<?php echo $row['id']; ?>
</td>
<td>
<?php echo strtoupper($row['stid']); ?>
</td>
<td>
<?php echo $row['ref']; ?>
</td>
<td>
<?php echo $row['fname']; ?>
</td>
<td>
<?php echo $row['lname']; ?>
</td>
<td>
<button onclick="textToClipboard<?php echo $numm;?>()">Copy</button>
</td>
<th>
<script>
function textToClipboard <?php echo $numm;?> () {
var space = " ";
var x = document.getElementById('datatable').rows[<?php echo $numm;>].cells[1].innerHTML;
var y = document.getElementById('datatable').rows[<?php echo $numm;?>].cells[2].innerHTML;
var z = document.getElementById('datatable').rows[<?php echo $numm;?>].cells[3].innerHTML;
var text = x.concat(space, y, space, z, space, q, space, w);
var dummy = document.createElement("textarea");
document.body.appendChild(dummy);
dummy.value = text;
dummy.select();
document.execCommand("copy");
document.body.removeChild(dummy);
}
</script>
</th>
</tr>
<?php $numm++;
} ?>
</tbody>
How can I bind it with the data table?
It's not really a good practice to redefine a function again and again in a loop like this - that is what's parameters are for. I can't test this code, but here's an approach i would recommend:
<script>
function textToClipboard(numm) {
var space = " ";
var x = document.getElementById('datatable').rows[numm].cells[1].innerHTML;
var y = document.getElementById('datatable').rows[numm].cells[2].innerHTML;
var z = document.getElementById('datatable').rows[numm].cells[3].innerHTML;
var text = x.concat(space,y,space, z,space, q,space, w);
var dummy = document.createElement("textarea");
document.body.appendChild(dummy);
dummy.value = text;
dummy.select();
document.execCommand("copy");
document.body.removeChild(dummy);
}
</script>
<table id="datatable" class="table table-striped table-bordered"
class="dass">
<thead>
<tr>
<th>No.</th>
<th>Student ID</th>
<th>Reference</th>
<th>First Name</th>
<th>Last Name</th>
<th>Copy</th>
</tr>
</thead>
<tbody>
<?php
$numm=1;
$stmt = $DB_con->prepare("SELECT * FROM asd");
$stmt->execute();
while($row=$stmt->fetch(PDO::FETCH_ASSOC))
{
?>
<tr><td><?php echo $row['id']; ?></td>
<td><?php echo strtoupper($row['stid']); ?>
</td>
<td><?php echo $row['ref']; ?></td>
<td><?php echo $row['fname']; ?></td>
<td><?php echo $row['lname']; ?></td>
<td><button onclick="textToClipboard(<?php echo $numm;?>)">>Copy</button></td>
</tr>
<?php
$numm++;
} ?></tbody>
So define one parametered function first, and then call that later.
Furthermore, I'm unsure on how datatables handles selecting .rows[numm] after you search or use the pagination function. Therefore an even safer solution would involve passing all your required parameters in the function call, something like this:
onClick="textToClipboard($row['ref'], $row['fname'], $row['lname'])"
But this relies entirely on what you're trying to achieve here.
To avoid Cannot reinitialise DataTable Warning, just add
"destroy": true,
while initialising it. That will reinitialise a datatable again when you call it second time.
Read more:
https://datatables.net/reference/option/destroy
https://datatables.net/reference/api/destroy() -- destroy method

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
}

change the column in csv using php

in the code i used csv file in which i want to edit the rows of 3rd coulmn as want to make them a http link by using tag but i cant do that. right now the code chowing only the link but i want to make them hyperlink
<html>
<head>
</head><body>
<table width="10%" cellpadding="1" cellspacing="0" border="1" ;">
<thead>
<tr>
<th>A</th>
<th>B</th>
<th>C</th>
<?php
$f = fopen("http://localhost/csv/cr.csv", "r");
while (($line = fgetcsv($f)) !== false) {
echo "<tr>";
$data = count($line);
foreach ($line as $cell) {
echo "<td>" . htmlspecialchars($cell) . "</td>";
}
echo "</tr>\n";
}
fclose($f);
?>
</tr>
</thead>
</table>
</body>
</head>
try:
<?php
$f = fopen("http://localhost/csv/cr.csv", "r");
while (($line = fgetcsv($f)) !== false) {
if (!isset($line[2])) {
continue;
}
echo "<tr><td><a href='url'>" . htmlspecialchars($line[2]) . "</a></td></tr>";
}
fclose($f);
?>

read selected variable and then send back from table to controller

I am having a table with data from database called through codeigniter controller.What I want to do is read the selected value from within the table send it back to the controller and use those values to retrieve new records from DB and then load them on again into the page.
My Controller:
<?php
if (!defined('BASEPATH'))
exit('No direct script access allowed');
class Dashboard1 extends CI_Controller {
public function __construct() {
parent::__construct();
$this->load->library('form_validation');
$this->load->model('dash_match_model');
$this->session->keep_flashdata('supplier_id');
$this->load->helper('url');
$this->load->database();
}
public function index() {
$arr['page']='dash1';
$arr['present_all_suppliers'] = $this->dash_match_model->dash_present_all_suppliers();
$arr['supplierCompany'] = "";
$this->load->view('clients/clDashboard',$arr);
}
public function select_supplier() {
$supplierCompany = $this->input ->post('supplierCompany');
$arr['present_all_suppliers'] = $this->dash_match_model->dash_present_all_suppliers();
$arr['supplierCompany'] = $supplierCompany;
$supplier_selected = $this->user_model->return_selected_supplier($supplierCompany);
foreach($supplier_selected->result() as $row)
{
$this->session->set_flashdata('supplier_id', $row->supplier_id);
}
$this->load->view('unspscSegment',$arr);
}
}
Specific lines of table of my view file:
<table id="suppliertable" class="table table-striped table-bordered bootstrap-datatable datatable">
<thead>
<tr>
<th>Supplier</th>
<th>Open Range</th>
<th>Fill Content</th>
<th>Total Match</th>
</tr>
</thead>
<tbody>
<?php foreach ($present_all_suppliers as $v): ?>
<tr>
<td onclick="window.location = 'http://example.com'" class="center" style="color:#0c595b;"> <?php echo $v->supplierCompany; ?> </td>
<td class="center"></td>
<td class="center"></td>
<td class="center"></td>
</tr>
<?php endforeach; ?>
</tbody>
</table>
How can I do that with javascript so when i select a supplier (value) to get the selected value and sent it to the controller? Then what should I modify to the controller in order to send the value to the model and collect it and reload them in the view?
You can use jQuery.ajax()
Implemented in your code:
Script:
<script>
$(".supplier_edit").click(function(){
var supplier_company = $(this).find('input').val()
$.ajax({
type: 'POST',
url: 'http://example.com/'+'Dashboard1/select_supplier',
data: {supplierCompany: supplier_company},
success: function(result) {
$("#content").html(result)
}
})
return false
})
</script>
HTML:
<tbody>
<?php foreach ($present_all_suppliers as $v): ?>
<tr>
<td class="supplier_edit" style="color:#0c595b;"><input type="hidden" value="<?php echo $v->supplierCompany; ?>" ></td>
<td class="center"></td>
<td class="center"></td>
<td class="center"></td>
</tr>
<?php endforeach; ?>
</tbody>
<div id="content">content from the controller</div>

Categories