Adding button to json when populate a table [duplicate] - javascript

This question already has answers here:
Uncaught ReferenceError: $ is not defined?
(40 answers)
Closed 2 years ago.
I am trying to insert a button when I am populate a table dynamically. I have the data that loads correctly the table and I am able to insert the button. When I click the button it displays the alert box just to check it's working. However when I try to get the data of the first cell of that row it gets the error that $ is not defined.
This is my code:
<?php
$file = 'data.json';
$data = file_get_contents($file);
$json = json_decode($data);
echo"<pre>";
print_r($json);
echo"</pre>";
?>
<form method="POST" action="">
<center><button class="btn btn-primary" name="display">Populate</button></center>
</form>
</div>
<table class="table table-bordered table-example">
<thead class="alert-info">
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
</tr>
</thead>
<tbody>
<?php
$url = 'data.json';
$data = file_get_contents($url);
$json = json_decode($data);
foreach($json as $member){
?>
<tr>
<td><?php echo $member->firstname?></td>
<td><?php echo $member->lastname?></td>
<td><?php echo $member->gender?></td>
<td><button class="btn btn-info button-details" onclick="myFunction()">>detalhes</button>
</td>
</tr>
<?php
}
?>
</tbody>
</table>
<div class="col-md-6">
<?php include 'populate_json.php';?>
</div>
</div>
<script type="text/javascript">
function myFunction() {
alert("botao funciona");
$(".table-example").find("tr td:first"); *this is not working
}

include this in your html head:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

Related

Popup content dependent on AJAX result

I am not that experienced in web developing, so sorry for rookie mistakes;)
In HTML, I want to create a dynamic popup window(div hidden by CSS). On the click of a button I am performing an AJAX post request. The result of the request is a string, which is stored in a hidden input field on the HTML page.
The popup contains a table with the content submitted by the string.
However now I want to retrieve the string via a PHP $_GET or $_POST request.
This is not working at the moment and I don't understand why.
Opening the popup window I am getting these errors:
Notice: Undefined index: popupcontenthidden in ...
Warning: Invalid argument supplied for foreach() in
The HTML:
<div class="popupcontent">
<span class="helper"></span>
<div>
<div class="popupclose">X</div>
<h3>UPDATE DATABASE ENTRY</h3>
<h4>Enter values:</h4>
<table id="popupresult">
<form name='form' action="" method='post'>
<input type='text' name='popupcontenthidden' id='popupcontenthidden'>
</form>
<tr>
<th>Field</th>
<th>Type</th>
<th>Null</th>
<th>Key</th>
<th>Default</th>
<th>Extra</th>
<th>Value</th>
</tr>
<?php
$rows = json_decode($_POST['popupcontenthidden']);
foreach ( $rows as $print ) {
?>
<tr>
<td><?php echo $print->Field; ?></td>
<td><?php echo $print->Type; ?></td>
<td><?php echo $print->Null; ?></td>
<td><?php echo $print->Key; ?></td>
<td><?php echo $print->Default; ?></td>
<td><?php echo $print->Extra; ?></td>
</tr>
<?php } ?>
</table>
</div>
The JS:
$.ajax({
type:'POST',
url: '../wp-content/plugins/ars-management/admin/ars-management-admin-ajax.php',
data: {function: "update", entries: entries},
success: function(response) {
var rows = response;
//hand data to html hidden input
document.getElementById("popupcontenthidden").value = rows;
//open popup on click
$(".popupcontent").show();
}
});
I understand that the second error is happening because $rows is empty.
But how can I fix the issue and retrieve the string from the input field? I can confirm that the string is correctly stored in the input field so all the AJAX stuff works.
Thank you so much!
A kind of solution here:
HTML:
<div class="popupcontent">
<span class="helper"></span>
<div class="popupclose">X</div>
<h3>UPDATE DATABASE ENTRY</h3>
<h4>Enter values:</h4>
<table id="popupresult">
<thead>
<tr>
<th>Field</th>
<th>Type</th>
<th>Null</th>
<th>Key</th>
<th>Default</th>
<th>Extra</th>
<th>Value</th>
</tr>
</thead>
<tbody id="myPopupContentTableBody"></tbody>
</table>
</div>
Javascript:
$.ajax({
type:'POST',
url: '../wp-content/plugins/ars-management/admin/ars-management-admin-ajax.php',
data: {function: "update", entries: entries},
success: function(response) {
$('#myPopupContentTableBody').html(response);
//open popup on click
$(".popupcontent").show();
}
});
PHP:
<?php
...
$rows = myPHPCalculation;
foreach ($rows as $print){
echo '
<tr>
<td>'.$print['Field'].'</td>
<td>'.$print['Type'].'</td>
<td>'.$print['Null'].'</td>
<td>'.$print['Key'].'</td>
<td>'.$print['Default'].'</td>
<td>'.$print['Extra'].'</td>
</tr>
';
}
...

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
}

PHP - Notice: Undefined index: and not displaying data

this is code of search.php. i want to take search by date from the input box as below.
<form action="visitor-print.php">
<div class="col-sm-3 text-center"><h3>Date</h3>
<input type="text" class="form-control" name="dat" placeholder="Enter Date">
<p class="help-block">Month Format 1,2,3,....29,30..</p>
<button class="btn btn-default"><span>Submit</span></button>
</div>
</form>
this is my visitor-print.php code where i get undefined index error on dat (which is from the other page)
<?php
$dbhost = 'localhost';
$dbuser = 'root';
$dbpass = '';
$conn = mysql_connect($dbhost, $dbuser, $dbpass);
mysql_select_db('visitor_list');
if(! $conn )
{
die('Could not connect: ' . mysql_error());
}
$sql = "SELECT * FROM list1 WHERE d1 = '". $_POST["dat"] . "' ";
$retval = mysql_query( $sql,$conn ) or die("Error: ".mysql_error($conn));
?>
<div class="container">
<h3 class="text-center">User Feed-Back Details</h3><br />
<div class="table-responsive" id="employee_table">
<table class="table table-bordered">
<tr>
<th width="10%">Visitor Name</th>
<th width="10%">Address</th>
<th width="10%">Area to Visit</th>
<th width="10%">Phone No.</th>
<th width="20%">Want to meet with </th>
<th width="50%">Purpose of meeting</th>
</tr>
<?php
while($row = mysql_fetch_array($retval,MYSQLI_BOTH))
{
?>
<tr>
<td><?php echo $row['nm']; ?></td>
<td><?php echo $row['add1']; ?></td>
<td><?php echo $row['area_vis']; ?></td>
<td><?php echo $row['y1']; ?></td>
<td><?php echo $row['app_ty']; ?></td>
<td><?php echo $row['no_per']; ?></td>
</tr>
<?php
}
?>
</table>
</div>
<div align="center">
<button name="create_excel" id="create_excel" class="btn btn-success">Create Excel File</button>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script>
$(document).ready(function(){
$('#create_excel').click(function(){
var excel_data = $('#employee_table').html();
var page = "excel.php?data=" + excel_data;
window.location = page;
});
});
</script>
Problem:
Notice: Undefined index: dat in D:\wamp\www\radissun visitor\visitor-print.php on line 12
and is not showing data from mysql
The answer you are looking for: You are using $_POST - which is just for forms which have method="post". Default method is GET - so your variables are $_GET[]. You can either set the method parameter in the html to POST, or you change your PHP code to GET.
But I must point out, that your code is not usable for productive environments, as it is vulnerable to SQL Injection. See http://www.w3schools.com/sql/sql_injection.asp
MISSING METHOD ON FORM METHOD="POST"
NOTE: IF YOU USE METHOD="POST" YOU CAN GET VALUE BY $_POST['dat']; IF YOUR NOT USING METHOD ATTRIBUTE .FORM JUST SUBMITED AS GET METHOD YOU CAN GET BY $_GET['dat'];
<form action="visitor-print.php" METHOD="POST" >
MISSING FORM SUBMIT
<INPUT TYPE="SUBMIT" NAME="SUBMIT" VALUE="SUBMIT" >
(OR)
ADD TYPE="SUBMIT" TO BUTTON
<button TYPE="SUBMIT" class="btn btn-default"><span>Submit</span></button>

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){..});

How to get value table row value using jquery/ajax

<?php
include "config.php";
// Fetch the data
$con = mysql_query("select * from product");
?>
<div style=" height:250px; overflow:auto;">
<table class="table table-striped table-bordered dTableR" id="ajxtable">
<tr>
<th>Jobno</th>
<th>Product</th>
<th>Qty</th>
<th>Designed by</th>
<th>Action</th>
</tr>
<?php
while ($row = mysql_fetch_array($con)) {
$id = $row['id'];
$pcode = $row['pcode'];
$lproduct = $row['lproduct'];
$mrprate = $row['mrprate'];
?>
<tr>
<td><?php echo $id; ?></td>
<td><?php echo $lproduct; ?></td>
<td><?php echo $mrprate; ?></td>
<td><?php echo "admin"; ?></td>
<td><input type="button" id="addmorePOIbutton1" style="width:25px;" value="+" onClick=""/>
<input type="button" id="delPOIbutton1" style="width:25px;" value="-" onClick=""/></td>
</tr>
<?php
}
?>
</table>
</div>
This is ajax page. Below table is auto refreshed every 5 seconds.
My doubt is how to get that particular row value.
When i click table row + button, get these particular row values, and place to index page text box and this '+' button also hide.
Kindly suggest any jquery or ajax code for adding below code.
I am new to jquery ,,anybody help me with sample code..that would help me greately. Thanks in advance
$(document).ready(function () {
$('#yourtablename tr').click(function (event) {
alert($(this).attr('id')); //trying to alert id of the clicked row
});
});
Above code may be help you and another solution is:
$('td').click(function(){
var row_index = $(this).parent().index();
var col_index = $(this).index();
});

Categories