Jquery Get ID on Each loop - php

html code
<?php
while($row = mysqli_fetch_assoc($WltQRslt)){
$Ldate = $row['LastDate'];
$Bdate = $row['DateBought'];
$id=sprintf('%s_%s',$Ldate,$Bdate);echo "<tr ><td class='center'><i class='fa fa-database fa-3x' aria-hidden='true'></i> {$row['Server']}</td><td id ='".$row['SNo']."' ><i class='fa fa-line-chart fa-3x'></i> {$row['Profit']}</td><td><i class='fa fa-refresh fa-spin fa-3x fa-fw'></i> <span class='date' date-start='$Bdate' date-end='$Ldate'></span></td>";
}
?>
jquery code
$('table td[id]').each(function (index, element) {
var id = $(element).attr('id');
$.ajax({
url:"get_server.php",
method:"POST",
data:{id:id},
success:function(data) {
var no=data.count;
for(i=0; i<=no;i++) {
var price = data;
console.log(price);
}
}
});
});
this jquery function get all the ID`s of each row contaning ID value. i want that on each iteration it get id from proccess it then move on to another iteration?

You can get the id of each td element directly as element.id and change selector to 'table td'.
$('table td').each(function (index, element) {
var id = element.id;
$.ajax({
url:"get_server.php",
method:"POST",
...
And a sample snippet to see how it works..
$('table td').each(function (index, element) {
console.log(element.id);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<table>
<tr><td id='2' class='center'></td></tr>
<tr><td id='1' class='center'></td></tr>
</table>

Related

Ajax Search Table Not Working / Cannot Fetch Data - Codeigniter

I cannot simply fetch any data on my table, I tried to clean my code but still not working here is my code
Controller - I am not sure if this is correct or am i still missing something
function fetch()
{
$data = $this->level_model->fetch_data();
echo $this->load->view('levels', ['data' => $data], TRUE );
}
View
<select class='form-input input-lg col-md-6' name="search_text" id="search_text">
<?php
foreach ($courses as $row) {
echo '<option value="'.$row->course.'">'.$row->course.'</option>';
}
?>
</select>
Table
<table class="table table-striped table-bordered" style="width:100%;">
<thead>
<tr>
<th scope="col">Course</th>
<th scope="col">Action</th>
</tr>
</thead>
<tbody id="showdata">
</tbody>
</table>
Model - so here where I query so i can match the data and fetch it.
function fetch_data($query)
{
$this->db->select("*");
$this->db->from("levels");
if($query != '')
{
$this->db->like('course_year', $query);
}
$this->db->order_by('id', 'ASC');
return $this->db->get();
}
AJAX / JAVASCRIPT I am not quite sure if my ajax is right please kindy check
<script>
$(document).ready(function(){
load_data();
function load_data(query)
{
$.ajax({
url:"<?php echo base_url(); ?>levels/fetch",
method:"POST",
data:{query:query},
success:function(data){
var html = '';
var i;
for(i=0; i<data.length; i++){
html += '<tr>'+
'<td>'+data[i].course_year+'</td>'+
'<td>'+
'<a class="btn btn-primary item-edit" data="'+data[i].id+'"" href="javascript:;"><i class="fa fa-edit"></i> Edit </a> | '+
'<a class="btn btn-danger item-delete" data="'+data[i].id+'"" href="javascript:;"><i class="fa fa-remove"></i> Delete</a></td>'+
'</tr>';
}
$('#showdata').html(html);
}
})
}
$('#search_text').change(function(){
var search = $(this).val();
if(search != '')
{
load_data(search);
}
else
{
load_data();
}
});
});
</script>
Try changing your controller fetch method as below:
function fetch()
{
$data = $this->level_model->fetch_data(
$this->input->post('query');
);
echo $this->load->view('levels', ['data' => $data], TRUE );
}
When the document is loading you are calling the load_data function without passing value to the query parameter here.
<script>
$(document).ready(function(){
load_data();
You should give it a default value here like this
<script>
$(document).ready(function(){
load_data();
function load_data(query='')
{
$.ajax({
url:"<?php echo base_url(); ?>levels/fetch",
method:"POST",
data:{query:query},
success:function(data){
var html = '';
var i;
for(i=0; i<data.length; i++){
html += '<tr>'+
'<td>'+data[i].course_year+'</td>'+
'<td>'+
'<a class="btn btn-primary item-edit" data="'+data[i].id+'"" href="javascript:;"><i class="fa fa-edit"></i> Edit </a> | '+
'<a class="btn btn-danger item-delete" data="'+data[i].id+'"" href="javascript:;"><i class="fa fa-remove"></i> Delete</a></td>'+
'</tr>';
}
$('#showdata').html(html);
}
})
}
$('#search_text').change(function(){
var search = $(this).val();
if(search != '')
{
load_data(search);
}
else
{
load_data();
}
});
});
</script>
Also you are not passing any data to your model .
function fetch()
{
$data = $this->level_model->fetch_data(
$_POST['query'];
);
echo $this->load->view('levels', ['data' => $data], TRUE );
}

Display AJAX success response in Table

How to display the value in table..I am not able to display the value.In ajax i've sent all the value and after retrieving the records from database. I've to display the result in table
Output is
[{"ID":"15","patient_name":"Sangeeta","patient_email":"sangeetha#gmail.com","gender":"Female","age":"26","address":"Jayanagar","city":"Bangalore","laboratory_name":"Anand","laboratory_address":"bsk","laboratory_place":"bengaluru","referral_pat_id":"18","active":"1","created_on":"2017-06-13"}]
How to retrieve each value
AJAX Script
$(document).ready(function(){
$('#myModal').on('show.bs.modal', function (e) {
var rowid = $(e.relatedTarget).data('id');
alert(rowid);
console.log(rowid);
$.ajax({
type : 'post',
url : 'url', //Here you will fetch records
data : 'id='+ rowid, //Pass $id
success : function(resp){
alert(resp);
var trHTML = '';
$.each(resp, function (i, userData) {
for (i = 0; i < resp.UserData.length; i++) {
alert(trHTML);
trHTML +=
'<tr><td>'
+ resp.userData[i].ID
+ '</td><td>'
+ resp.userData[i].patient_name
+ '</td><td>'
+ resp.userData[i].patient_email
+ '</td></tr>';
}
});
$('#tBody').append(trHTML);
}
});
});
});
Controller
public function fetch_records()
{
print_r($_POST);
$this->load->model('Physician_confirm_m');
$id = $_POST['id']; //escape string
print_r($id);
$result=$this->Physician_confirm_m->fetch_history_records($id);
echo json_encode($result);
}
Model
public function fetch_history_records($id)
{
$this->db->where('referral_pat_id',$id);
$this->db->from('referral_confirmation_details');
$q = $this->db->get();
return $q->result();
}
HTML
<button type="button" class="btn btn-info disablebtn" style="text-align: center;" data-toggle="modal" data-target="#myModal" data-id="<?php echo $post->referral_patient_id;?>"><i class="fa fa-history" aria-hidden="true"></i><strong> HISTORY</strong></button>
<div class="modal-body">
<table>
<tbody id="tBody"></tbody>
</table>
</div>
</div>
You can do in another way to achieve this.
$(document).ready(function(){
$('#myModal').on('show.bs.modal', function (e) {
var rowid = $(e.relatedTarget).data('id');
console.log(rowid);
$.ajax({
type : 'post',
url : 'url', //Here you will fetch records
data : 'id='+ rowid, //Pass $id
success : function(resp){
var obj = jQuery.parseJSON(resp);
$('#tBody').append(obj.ajaxPage);
}
});
});
});
In Your Controller should be like
public function fetch_records()
{
$this->load->model('Physician_confirm_m');
$id = $_POST['id']; //escape string
$data['result']=$this->Physician_confirm_m->fetch_history_records($id);
$result['ajaxPage'] = $this->load->view('pages/result_table', $data, true);
echo json_encode($result);
}
result_table view page should be
<?php if($result){ foreach($result as $row){ ?>
<tr>
<td><?=$row['ID']?></td>
<td><?=$row['patient_name'];?></td>
<td><?=$row['patient_email'];?></td>;
</tr>
<?php
}
}?>

how to get id from table which is generated dynamically using by using jquery and ajax?

In the below code I got all data from database properly. but next I want to delete particular data by using delete link which is generated dynamically beloow.. but I can't get particular Id for to send it on delete.php page. I always get undefined Id which is I check it in alert.please help me how to get Id in myId variable send it to next page.
<script>
$(document).ready(function(){
var myId=$(this).data('Id');
alert(myId);
$(".delete").click(function(){
$.ajax({
type:"Post",
url:"delete.php",
data:{
Id:myId,
},
sucess:function(data){
}
});
});
});
</script>
<?php
$localhost="localhost";
$username="root";
$password="dheeraj";
$dbname="mydatabase";
$con = mysqli_connect('localhost','root','dheeraj','mydatabase');
if(!$con){
echo mysqli_error($con);
}
$action=$_POST['action'];
if($action=='showComment'){
$sql="select * from employee order by Id";
$result=mysqli_query($con,$sql);
if(mysqli_num_rows($result)>0){
echo "<table border=1px solid red><tr><th>Id</th><th>FirstName</th><th>LastName</th><th>Email</th><th>Contact Number<th>Delete</th></th></tr>";
while($row=mysqli_fetch_array($result)){
echo '<tr><td>'.$row["Id"].'</td><td>'.$row["Fname"].'</td><td>'.$row["Lname"].'</td><td>'.$row["email"].'</td><td>'.$row["contact"].'</td><td><a class="delete" href="?id="'.$row["Id"].'>Delete</a></td></tr>';
}
echo "</table>";
}
}
?>
No data attribute defined in your delete link element, put this :
<a class="delete" href="?id="'.$row["Id"].' data-Id="'.$row["Id"].'">Delete</a>
And your js should be :
$(document).ready(function(){
// replace document below with top level parent that already existed on page
$(document).on('click', '.delete', function(){
var myId =$(this).data('Id');
alert(myId);
$.ajax({
type:"Post",
url:"delete.php",
data:{
Id:myId,
},
sucess:function(data){
}
});
});
});
Try to rewrite the PHP code as follows:
if(mysqli_num_rows($result)>0){
echo "<table border=1px solid red><tr><th>Id</th><th>FirstName</th><th>LastName</th><th>Email</th><th>Contact Number<th>Delete</th></th></tr>";
while($row=mysqli_fetch_array($result)){
echo '<tr><td>'.$row["Id"].'</td><td>'.$row["Fname"].'</td><td>'.$row["Lname"].'</td><td>'.$row["email"].'</td><td>'.$row["contact"].'</td><td><a data-id="'.$row["Id"].'" class="delete" href="?id="'.$row["Id"].'>Delete</a></td></tr>';
}
echo "</table>";
And the JS to be like
<script>
$(document).ready(function(){
$(".delete").click(function(){
var myId=$(this).data('Id');
alert(myId);
$.ajax({
type:"Post",
url:"delete.php",
data:{
Id:myId,
},
sucess:function(data){
}
});
});
});
</script>

Pass user_id from mysql to bootstrap modal via ajax

I want to pass user id from my table to modal via ajax but only think i get is "undefined".
When i replace var dataString = 'id=' + recipient;
with var dataString = 'id=' + 1; it working fine so for some reason i cant get value on click to variable. What i'm missing??
PHP:
<?php
$query = mysql_query("select * from users");
$i=0;
while($fetch = mysql_fetch_array($query)):
echo '<tr>';
echo'<td> '.$fetch['user_id'].'</td>';
echo'<td> '.$fetch['user_name'].'</td>';
echo'<td> '.$fetch['user_email'].'</td>';
echo'<td> '.$fetch['user_imie'].'</td>';
echo'<td> '.$fetch['user_nazwisko'].'</td>';
echo'<td> '.$fetch['user_telefon'].'</td>';
echo'<td> '.$fetch['user_konto_akty'].'</td>';
echo'<td> '.$fetch['user_uprawnienia'].'</td>';
echo'<td>' .date("d.m.Y, H:i", $fetch['user_regdate']). '</td>';
echo'<td> <a class="btn btn-primary btn-sm" href="Kasuj_tab.php?user_id='.$fetch['user_id'].'">Usuń</a></td>';
?>
<td>
<a class="btn btn-small btn-primary" data-toggle="modal" data-target="#exampleModal_user" data-whatever1="<?php echo $fetch['user_id']; ?>">Edit</a></td>
<?php
echo '</tr>';
endwhile;
?>
Ajax:
$('#exampleModal_user').on('show.bs.modal', function (event) {
var button = $(event.relatedTarget) // Button that triggered the modal
var recipient = button.data('whatever1') // Extract info from data-* attributes
var modal = $(this);
var dataString = 'id=' + recipient;
$.ajax({
type: "GET",
url: "Modal_user.php",
data: dataString,
cache: false,
success: function (data) {
console.log(data);
modal.find('.ct').html(data);
},
error: function(err) {
console.log(err);
}
});
})
PHP:
<?php
include 'Panel_Logowanie/config.php';
db_connect();
$id = $_GET['id'];
echo"$id";
?>

Deleting a list item <li> with jquery?

I'm trying to delete a li item using jquery, but its not working. Here's my code:
the html file:
<li>
<img class="avatar" src="images/$picture" width="48" height="48" alt="avatar" />
<div class="tweetTxt">
<strong>$username</strong> $auto
<div class="date">$rel</div>
$reply_info
<div class="date"></div>
<a class ="delbutton" href="#" id = $id> Delete </a>
</div>
<div class="clear"></div>
</li>
The jquery file:
$(function () {
$(".delbutton").click(function () {
var del_id = element.attr("id");
var info = 'id=' + del_id;
if (confirm("Sure you want to delete this update? There is NO undo!")) {
$.ajax({
type: "POST",
url: "delete.php",
data: info,
success: function () {}
});
$(this).parents(".record").animate({
backgroundColor: "#fbc7c7"
}, "fast")
.animate({
opacity: "hide"
}, "slow");
}
return false;
});
});
the delete.php file:
<?php
include("includes/connect.php");
if($_POST['id'])
{
$id=$_POST['id'];
$sql = "delete from {$prefix}notes where id='$id'";
mysql_query( $sql);
}
?>
There is no element in your HTML with a class of record. I would try something like this:
<li class="record">
<!-- a bunch of other stuff -->
<a class="delbutton" href="#">Delete</a>
</li>
then in the JS:
$(function ()
{
$(".delbutton").click(function ()
{
if (confirm("..."))
{
$.ajax({ /* ... */});
$(this).closest(".record").fadeOut();
}
return false;
});
});
If your div look like this:
<ul>
<li>One | <a href='#' class='delete'>Delete</a></li>
<li>Two | <a href='#' class='delete'>Delete</a></li>
<li>Three | <a href='#' class='delete'>Delete</a></li>
<li>Four | <a href='#' class='delete'>Delete</a></li>
</ul>
jQuery:
jQuery(document).ready(function(){
jQuery('.delete').live('click', function(event) {
$(this).parent().fadeOut()
});
});​
Check: http://jsfiddle.net/9ekyP/
EDIT:
You can remove your li after getting response in success function something like this:
jQuery(document).ready(function(){
jQuery('.delbutton').live('click', function(event) {
$.ajax({
type: "POST",
url: "delete.php",
data: info,
success: function(){
$(this).parent().parent().fadeOut();
}
});
});
});​
There are several issues with your code...
element.attr("id") references undeclared element but this should probably be $(this).attr("id")
The <li> block has no class ".record" either
EDIT: You only fade your <li> but do not actually remove it from the DOM (don't know if this was deliberate though)
The <a>'s ID is not quoted (and not escaped either... as are the other strings you insert in PHP (EDIT) and the ID you use in your delete script - this is very dangerous as it allows cross-site scripting / XSS and SQL injection as TokIk already pointed out)
PHP:
echo '<li class="record">
<img class="avatar" src="images/'.htmlentities($picture).'" width="48" height="48" alt="avatar" />
<div class="tweetTxt">
<strong>'.htmlentities($username).'</strong> '.htmlentities($auto).'
<div class="date">'.htmlentities($rel).'</div>'.htmlentities($reply_info).'<div class="date"></div> <a class="delbutton" href="#" id="'.htmlentities($id).'"> Delete </a>
</div>
<div class="clear"></div>
</li>';
JavaScript:
$(document).ready(function() {
$(".delbutton").click(function(){
var del_id = $(this).attr("id");
var info = 'id=' + del_id;
if(confirm("Sure you want to delete this update? There is NO undo!")) {
$.ajax({
type: "POST",
url: "delete.php",
data: info,
success: function(){
alert('success');
},
error: function(){
alert('error');
}
});
$(this).parents(".record").animate({ backgroundColor: "#fbc7c7" }, "fast")
.animate({ opacity: "hide" }, "slow");
}
return false;
});
});
EDIT: Delete script (note the additional error check that $_POST['id'] exists and the pseudo-function for quoting the ID):
<?php
include("includes/connect.php");
if( isset($_POST['id']) ) {
$id = quote($_POST['id']);
$sql = "delete from {$prefix}notes where id='$id'";
mysql_query( $sql);
}
?>
I am assuming that '.records' is the container.
You can pass through your ID value to make <li> unique, result being:
<li id='record_12'>
//CONTENT
</li>
<li id='record_13'>
//CONTENT
</li>
And change your SUCCESS script to the following:
$(".delbutton").click(function(){
var del_id = element.attr("id");
var info = 'id=' + del_id;
if(confirm("Sure you want to delete this update? There is NO undo!"))
{
$.ajax({
type: "POST",
url: "delete.php",
data: info,
success: function(){
//Getting the unique LI and fading it out
$('#record_' + del_id).fadeOut();
}
});
Your code works fine well.I was trying to code a form that has multiple textbox, then after each textbox threre will be link called add which POST call the other php called addnew.php.
In addnew.php data will we added to database(postgres). But I am geting problem while getting the post variable itself.
this is my code for form (I will chage for multiple textbox once it works fine)
script:
<script type='text/javascript'>
$(window).load(function() {
jQuery(document).ready(function() {
jQuery('.add').live('click', function(event) {
var da = $('form#myform').serialize();
alert(da);
$.ajax({
type: "POST",
url: "addnew.php",
data:da,
success: function(data) {
if (data === "ok") {
$(this).parent().fadeOut();
$('#results').html(data);
}
else {
alert(data);
}
}
});
});
});
});
Form
<form name='myform' id='myform'>
<input name='da' type='text' id='da' value='none'>
<a href='#' class='add'>Add</a>
</form>
addnew.php code here
<? php
if( isset($_POST['da']) )
{
echo (da);
}
?>

Categories