I'm using jquery-confirm, and I need to capture the name of the element which i clicked to edit.
jQuery and jQuery-confirm
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-confirm/3.3.2/jquery-confirm.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js" integrity="sha512-bLT0Qm9VnAYZDflyKcBaQ2gg0hSYNQrJ8RilYldYQ1FxQYoCLtUjuuRuZo+fjqhx/qtq/1itJ0C2ejDxltZVFg==" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-confirm/3.3.2/jquery-confirm.min.js"></script>
</head>
PHP
<?php
$products = array(['name'=>'Balloon'],
['name'=>'Bike']);
?>
<table>
<thead>
<tr>
<th>Name</th>
<th>Edit</th>
</tr>
</thead>
<tbody>
<?php foreach($products as $prod) { ?>
<tr>
<td><?php echo $prod['name'] ?></td>
<td><a class="edit" href="#">Edit Product</a></td>
</tr>
<?php } ?>
</tbody>
</table>
SCRIPT
$('a.edit').confirm({
content: '<input type="text" value="$ Name of the product.">'
});
Obs: Where It's written "$ Name of the product", should appear the name of each product that I click.
You can use this.$target to get a tag which is clicked then using .closest('tr').find('td:eq(0)').text() get first td content.
Demo Code :
$('.edit').confirm({
content: function() {
//get closest tr and find get product name..
return '<input type="text" value="' + this.$target.closest('tr').find('td:eq(0)').text().trim() + '">'
}
});
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-confirm/3.3.2/jquery-confirm.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js" integrity="sha512-bLT0Qm9VnAYZDflyKcBaQ2gg0hSYNQrJ8RilYldYQ1FxQYoCLtUjuuRuZo+fjqhx/qtq/1itJ0C2ejDxltZVFg==" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-confirm/3.3.2/jquery-confirm.min.js"></script>
<table>
<thead>
<tr>
<th>Name</th>
<th>Edit</th>
</tr>
</thead>
<tbody>
<tr>
<td>
Abc
</td>
<td><a class="edit" href="#">Edit Product</a></td>
</tr>
<tr>
<td>
Abcd
</td>
<td><a class="edit" href="#">Edit Product</a></td>
</tr>
<tr>
<td>
Abce
</td>
<td><a class="edit" href="#">Edit Product</a></td>
</tr>
</tbody>
</table>
Related
Hi i want to implement DataTable in the table to populate data from my db in my php page, the below code i used, but its not working, not getting the data table, instead i am getting the normal table only -
<head>
<link rel="stylesheet" type="text/css" href="../DataTables-1.10.7/media/css/jquery.dataTables.min.css">
<script src="../DataTables-1.10.7/media/js/jquery.dataTables.min.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="../DataTables-1.10.7/extensions/Responsive/css/dataTables.responsive.css">
<script src="../DataTables-1.10.7/extensions/Responsive/js/dataTables.responsive.js" type="text/javascript"></script>
</head>
<div id="example_wrapper" class="dataTables_wrapper" role="grid">
<div class="fg-toolbar ui-toolbar ui-widget-header ui-corner-tl ui-corner-tr ui-helper-clearfix">
<?php
$sql="select product_id,product_name,original_price,offer_price,product_rating,image_main,stock_in_hand from niad_products order by product_id desc";
$result=$linkID1->query($sql);
$c=#mysqli_num_rows($result);
if($c>=1){?>
<script>
$(document).ready(function() {
$('#example').DataTable( {
responsive: true
} );
} );
</script>
<div id="printable">
<table id="example" class="display" cellspacing="0" width="100%" style="color:#FFF">
<thead>
<tr>
<th>Image</th>
<th>Product Name</th>
<th>Original Price</th>
<th>Offer Price</th>
<th>Rating</th>
<th>Stock</th>
</tr>
</thead>
<tbody>
<?php while($row=mysqli_fetch_array($result)){?>
<tr>
<td>
<?php echo "<img width='100' height='100' src=../product-images/".$row['image_main'] ." />"; ?></td>
<td>
<?php echo $row['product_name']; ?>
</td>
<td>
<?php echo $row['original_price']; ?>
</td>
<td>
<?php echo $row['offer_price']; ?>
</td>
<td>
<?php echo $row['product_rating']; ?>
</td>
<td>
<?php echo $row['stock_in_hand']; ?>
</td>
</tr>
<?php
}
?>
</tbody>
</table>
</div>
<?php } else {echo "No records";} ?>
</div>
</div>
Can anyone guide me with my mistake. It will be very helpful. Thanks
I make Jquery to read data from db and when I click the list it shown roe data on detail box.
But.... problem: I make div where I show content. I load page with Jquery to div.
but when I do this the row click dont work. I can not understan why. It is shild element but id i understan right when I use getElementById it should to take current row, but no.
<!DOCTYPE html>
<!--
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
-->
<?php include './config/init.php'; ?>
<html>
<head>
<meta charset="UTF-8">
<title>Biisilista</title>
<script src="./js/jquery-3.2.1.js"></script>
<link href="css/basic.css" rel="stylesheet" type="text/css">
</head>
<body>
<h1>KaraokeBiisit </h1>
<div id="edit" style="display:none">
<div>
<form name="formedit" method="post" action="">
<table id="edittable" border="1" cellspacing="2" cellpadding="1">
<tbody>
<tr>
<td>
<label>Nimi:</label>
</td>
<td>
<input id="nimi" name="nimi" placeholder="Kappaleen nimi" type="text">
</td>
<td>
<label>Levy:</label>
</td>
<td>
<input id="levy" name="levy" placeholder="Levyn tunnus" type="text" width="10px">
</td>
</tr>
<tr>
<td>
<label>Artisti:</label>
</td>
<td>
<input id="artisti" name="artisti" placeholder="Kappaleen esittäjä" type="text">
</td>
<td>
<label>Kieli:</label>
</td>
<td>
<input id="kieli" name="kieli" placeholder="Alkuperäiskieli" type="text" width="20">
</td>
</tr>
<tr>
<td>
<label>Numero:</label>
</td>
<td>
<input id="numero" name="numeron" placeholder="Numero" type="text">
</td>
</tr>
</tbody>
</table>
</form>
</div>
</div>
<div id="pageContent">
</div>
<script src="./js/jquery-3.2.1.js"></script>
<script src="./js/script.js"></script>
</body>
</html>
jQuery(document).ready(function ($) {
$("#pageContent").click(function () {
$('tr').removeClass('selected');
$(this).addClass('selected');
var selectedRow;
selectedRow = $(rivi);
var td = $(selectedRow).children('td');
$('#nimi').val(td[0].innerText);
$('#artisti').val(td[1].innerText);
$('#levy').val(td[2].innerText);
$('#kieli').val(td[3].innerText);
$('#numero').val(td[4].innerText);
console.log("test");
});
$(".clickable-row").on('click', () => {
$('#edit').show();
});
$('#pageContent').load('container.php');
// $('#pageContent').load('biisit.php');
});
function showBiisit() {
console.log("Näytetään sisältö");
$('#pageContent').load('container.php');
}
<?php include './config/init.php'; ?>
<?php
//luodaan tietokantaobjekti
$db = new DataBase();
// tehdään kysely
$db->query("SELECT * FROM kappaleet");
//query("SELECT `id`,`nimi`,`artisti`,`levy`,`kieli`,`numero` FROM `kappaleet`;");
//yhdistetään hakutulokseen
$kappaleet = $db->resultset();
?>
<table id="dataTable">
<tr>
<th>Nimi</th>
<th>Artisti</th>
<th width="100" align="left">Levy</th>
<th width="100" align="left">Kieli</th>
<th width="100" align="left">Numero</th>
</tr>
<?php foreach ($kappaleet as $biisi): ?>
<tr class='clickable-row' >
<td><?php echo $biisi->nimi ?></td>
<td><?php echo $biisi->artisti ?></td>
<td><?php echo $biisi->levy ?></td>
<td><?php echo $biisi->kieli ?></td>
<td><?php echo $biisi->numero ?></td>
</tr>
<?php endforeach; ?>
</table>
try this
...
$("body").on('click', '.clickable-row', function () { //i change this line
$('tr').removeClass('selected');
$(this).addClass('selected');
var selectedRow = $(this);
//selectedRow = $(rivi); idk what is this
var td = selectedRow.children('td');
$('#nimi').val(td[0].innerText);
$('#artisti').val(td[1].innerText);
$('#levy').val(td[2].innerText);
$('#kieli').val(td[3].innerText);
$('#numero').val(td[4].innerText);
console.log("test");
});
...
I generating a QR CODE with url as data content, but when i try to print a page where the qr is generated, the qr does not seem to appear yet other content displays. Here is my snippet
<?php
require_once("qrcode.php");
//---------------------------------------------------------
$qr = new QRCode();
// ƒGƒ‰[’ù³ƒŒƒxƒ‹‚ðÝ’è
// QR_ERROR_CORRECT_LEVEL_L : 7%
// QR_ERROR_CORRECT_LEVEL_M : 15%
// QR_ERROR_CORRECT_LEVEL_Q : 25%
// QR_ERROR_CORRECT_LEVEL_H : 30%
$qr->setErrorCorrectLevel(QR_ERROR_CORRECT_LEVEL_L);
$qr->setTypeNumber(4);
$qr->addData("http:/".$_SERVER['REQUEST_URI']."");
$qr->make();
//---------------------------------------------------------
?>
and below is the other content on the page
<div class="invoice-box" id="invoice-box">
<table cellpadding="0" cellspacing="0">
<tr class="top">
<td colspan="2">
<table>
<tr>
<td class="title">
<img src="images/logo.png" style="width:100%; max-width:200px; height:95px;">
</td>
<td>
Invoice #: <?php print $invoice_details->sub_code ?><br>
Created: <?php print date('Y/M/d', strtotime($invoice_details->paid_date)) ?><br>
Due: February 1, 2015
</td>
</tr>
</table>
</td>
</tr>
<tr class="information">
<td colspan="2">
<table>
<tr>
<td>
<br>
<br>
</td>
<td>
<?php print $invoice_details->org ?><br>
<?php print $invoice_details->lname ?> <?php print $invoice_details->fname ?><br>
<?php print $invoice_details->email ?>
</td>
<td>
<?php $qr->printHTML(); ?>
</td>
</tr>
</table>
</td>
</tr>
<tr class="heading">
<td>
Payment Method
</td>
<td>
</td>
</tr>
<tr class="details">
<td>
<?php print $invoice_details->method ?>
</td>
<td>
</td>
</tr>
<tr class="heading">
<td>
Item
</td>
<td>
Price(UGX)
</td>
</tr>
<tr class="item">
<td>
<?php print ucfirst($invoice_details->event) ?> - Summit
</td>
<td>
<?php print number_format($invoice_details->amount) ?>
</td>
</tr>
<tr class="total">
<td></td>
<td>
Total: UGX <?php print number_format($invoice_details->amount) ?>
</td>
</tr>
</table>
</div>
<input type="button" value="Print Div" onclick="PrintElem('#invoice-box')" />
and my printing script
<script type="text/javascript">
function PrintElem(elem)
{
Popup($(elem).html());
}
function Popup(data)
{
var mywindow = window.open('', 'invoice-box', 'height=400,width=600');
mywindow.document.write('<html><head><title>my div</title>');
/*optional stylesheet*/ //mywindow.document.write('<link rel="stylesheet" href="main.css" type="text/css" />');
mywindow.document.write('</head><body >');
mywindow.document.write(data);
mywindow.document.write('</body></html>');
mywindow.document.close(); // necessary for IE >= 10
mywindow.focus(); // necessary for IE >= 10
mywindow.print();
mywindow.close();
return true;
}
</script>
Assuming I found the correct library, it has an image creator. What you need to do is use an output buffer around the imagegif (or imagepng) call to capture the image's binary data into a string, then base64 encode the string, and echo that as part of a data URI directly in the src attribute of an img tag.
$img = $qr->createImage(4, 2);
ob_start();
imagegif($img);
imagedestroy($img);
$img = ob_get_clean();
In your HTML
<img src="data:image/gif;base64,<?php echo base64_encode($img);?>">
If you're concerned about support for data URLs, leave out the output buffering, add a unique, random filename as the second parameter to the imagegif call to save it, then echo that filename in the src.
It seems that you're trying to print a black background color which is removed by default from printing. Unfortunately there's no way to force it back programatically in browsers other than Safari and Chrome.
You can force this back for Safari and Chrome by doing:
<div class="invoice-box" id="invoice-box">
<style>
.invoice-box table td: {
-webkit-print-color-adjust: exact !important;
}
</style>
<table cellpadding="0" cellspacing="0">
<tr class="top">
<td colspan="2">
<table>
<tr>
<td class="title">
<img src="images/logo.png" style="width:100%; max-width:200px; height:95px;">
</td>
<td>
Invoice #: <?php print $invoice_details->sub_code ?><br>
Created: <?php print date('Y/M/d', strtotime($invoice_details->paid_date)) ?><br>
Due: February 1, 2015
</td>
</tr>
</table>
</td>
</tr>
<tr class="information">
<td colspan="2">
<table>
<tr>
<td>
<br>
<br>
</td>
<td>
<?php print $invoice_details->org ?><br>
<?php print $invoice_details->lname ?> <?php print $invoice_details->fname ?><br>
<?php print $invoice_details->email ?>
</td>
<td>
<?php $qr->printHTML(); ?>
</td>
</tr>
</table>
</td>
</tr>
<tr class="heading">
<td>
Payment Method
</td>
<td>
</td>
</tr>
<tr class="details">
<td>
<?php print $invoice_details->method ?>
</td>
<td>
</td>
</tr>
<tr class="heading">
<td>
Item
</td>
<td>
Price(UGX)
</td>
</tr>
<tr class="item">
<td>
<?php print ucfirst($invoice_details->event) ?> - Summit
</td>
<td>
<?php print number_format($invoice_details->amount) ?>
</td>
</tr>
<tr class="total">
<td></td>
<td>
Total: UGX <?php print number_format($invoice_details->amount) ?>
</td>
</tr>
</table>
</div>
<input type="button" value="Print Div" onclick="PrintElem('#invoice-box')" />
For browsers like IE and Firefox unfortunately this requires user interaction. See this question for more answers: Printing background-color in Firefox and IE
Finally, i got a way around this, here is my solution
<?php
require_once("qrcode.php");
$qr = QRCode::getMinimumQRCode("http:/".$_SERVER['REQUEST_URI']."", QR_ERROR_CORRECT_LEVEL_L);
$img = $qr->createImage(4, 2);
ob_start();
imagegif($img);
imagedestroy($img);
$img = ob_get_clean();
?>
Then output the qrcode as image with this;
<img src="data:image/gif;base64,<?php echo base64_encode($img);?>">
Thanks to #walf for his solution somehow, hope it helps someone else.
I want to create table like in this site:
https://www.avast.com/en-in/exploit-protection.php
I tried with below code but something is happening wrong , I am beginner of jquery.Reading data from mysql php to show.
HTML:
$(document).ready(function(){
$("#myTable tr:odd").addClass("odd");
$("#myTable tr:not(.odd)").hide();
$("#myTable tr:first-child").show();
});
$(document).ready(function(){
$("#myTable tr").click(function(){
$(this).next("tr").toggle();
$(this).find(".arrow").toggleClass("up");
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id ='myTable' class='tablesorter' style='table-layout:fixed;'>
<thead>
<tr>
<th class='header' width='4%'>Wild</th>
<th class='header ' width='12%'>Release Date</th>
<th class='header' width='12%'>Exploit Name1</th>
<th data-sorter='false' width='18%'>Name2</th>
<th data-sorter='false' width='53%'>Comments</th>
<th data-sorter='false' width='1%'></th>
</tr>
</thead>
<tbody>
<tr>
<td> <i hidden>1</i><img src='ex.png' alt='' border=3 height=25 width=25></img>
</td>
<td>03/11/2015</td>
<td><b> CVE-2015-1623</b></td>
<td style='word-wrap:break-word;'>
<ul>
<li>ABC</li>
<li>XYZ</li>
<li>PQR</li>
</ul>
</td>
<td style='word-wrap:break-word;'>
Microsoft Internet Explorer 11 allows remote attackers to execute arbitrary code or cause ...
</td>
<td>
<div class='arrow'></div>
</td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td>
<b>Link: </b>
<ul>
<li><a href =http://cve.mitre.org/cgi-bin/cvename.cgi?name=CVE-2015-1623 target ='_blank'>http://cve.mitre.org/cgi-bin/cvename.cgi?name=CVE-2015-1623<br></a></li>
</ul>
</td>
<td></td>
</tr>
<tr>
Please let me know what is wrong in jquery.
Heres my code: HTML with Server side to get data from the database. How do I get id from the datatables using checkbox option?
<div class="panel-body">
<div class="table-responsive">
<table class="table table-striped table-bordered table-hover" id="dataTables-example">
<thead>
<tr>
<h4>
<th></th> <!-- For checkbox column-->
<th>ID Number</th>
<th>Lastname</th>
<th>Firstname</th>
<th>Middlename</th>
<th>Gender</th>
<th>Course</th>
<th>Department</th>
<th>Address</th>
<th>Contact</th>
<th>Birthdate</th>
<th>View</th>
<th>Events</th>
</h4>
</tr>
</thead>
<tbody>
<?php
include 'pgconnect.php';
$mydata = mysqli_query($conn,"SELECT * FROM student") or die(mysql_error());
while($record = mysqli_fetch_assoc($mydata))
{
$id=$record['id'];
?>
<tr>
<td><input type="checkbox"></td>
<td class="id"><?php echo $record['id'] ?></td>
<td class="lname"><?php echo $record['last_name'] ?></td>
<td class="fname"><?php echo $record['first_name'] ?></td>
<td class="mname"><?php echo $record['mid_name'] ?></td>
<td class="sex"><?php echo $record['gender'] ?></td>
<td class="course"><?php echo $record['course'] ?></td>
<td class="dept"><?php echo $record['department'] ?></td>
<td class="add"><?php echo $record['home_address'] ?></td>
<td class="contact"><?php echo $record['contact'] ?></td>
<td class="bdate"><?php echo $record['birthdate'] ?></td>
<td> View Records </td>
<td> <a title='Click here to update record.'href='#edit' data-toggle='modal'><i class="fa fa-pencil fa-fw"></i></a>
<a title='Click here to add record.' href='#'><i class="fa fa-plus fa-fw"></i></a>
<a title='Click here to delete record.' href='delete.php?del=<?php echo $record['id'] ?>'><i class="fa fa-trash-o fa-fw"></i></a></td>
</tr>
<?php
}
?>
</tbody>
</table>
Here's my script:
$(document).ready(function(){
$('#dataTables-example').dataTable();
});
I tried to get the ID but still it didn't works. Hope you can help me.
In your work, you get the ID in table. your should grab it from the checkbox if you use jquery, as in;
<script>
$(document).ready(function(){
document.getElementByID("ckmyid").innerHTML;
});
</script>
Note:add Selector ID in your checkbox, first, say, "ckmyid" so the code will be like this:
<input id="ckmyid" type="checkbox" value="<?php echo $record['id'] ?>">
Based on your structure, you can grab it directly from the link in your view records link if you want to place the ID there,as in;
<td> View Records </td>