I am fetching a problem though I know it's not a big issue, but something is different to me as I new. I have a page which has a list of records, fetching from a database. Now one button is there , after clicking the records, one pop up will be opened up along with some data. Inside that pop up one another link is there called "restore", whenever , that linked will be clicked out the database has been updated. Now up to this its okay for me. But whenever, I close the pop up, my list of records should automatically changed as some records have been restored. But I am not getting the result until and unless I do not refresh the page. so how can I do this, please help me ....
$(function() {
$(".delete").click(function() {
$('#load').fadeIn();
var commentContainer = $(this).parent();
var id = $(this).attr("id");
var string = 'id='+ id ;
$.ajax({
type: "POST",
url: "restore-request-process.php",
data: string,
cache: false,
success: function(){
commentContainer.slideUp('slow', function() {$(this).remove();});
$('#load').fadeOut();
}
});
//return false;
});
});
in the restore-request-process.php page I just update the database and echo the id.
After the database update, call a function to update the front end or simply reload page using location.reload()
you need to have declared global function in parent window
function Update(){
//global function in parent, update div
}
on popup window call function
window.opener.Update();
that will automatic reload your div, and not all page, If it's not necessary
Suppose this is your listing format
<table>
<?php
foreach($results as $result) { ?>
<tr id="my_div">
<td><?php echo $result->name?></td>
<td class="delete" id="<?php echo $result->id?>"><img src="delete.png"/></td>
</tr>
<?php } ?>
</table>
In restore-request-process.php write a query which fetch all the result from database and just echo the result like this
$result = mysql_query("SELECT * FROM my_table");
while($row = mysql_fetch_array($result))
{
echo '<td>'. echo $row["name"].'</td>
<td class="delete" id="'. echo $row["id"].'"><img src="delete.png"/></td>' ;
}
and onsuccess replaced all the content inside the my_div with response text
CODE IS NOT TESTED
for more references you can go through this link
Related
I have fetched the values(card details) from an array and put them in an html table, I have also added the delete button for deleting the particular card.
I am deleting this through ajax. When i click on the delete button of the first row, it works perfect but when i click on the other delete buttons from 2nd or 3rd row, there is no action.
Please suggest the correct path to sort out this problem.
Thanks in advance
Here is my code
<tr>
<td><?php echo $val['last4'];?></td>
<td><?php echo $val['exp_month'];?></td>
<td><?php echo $val['exp_year'];?></td>
<td><button id = "del">Delete</button></td>
</tr>
Ajax part
<script src="//code.jquery.com/jquery-1.12.0.min.js"></script>
<script>
$('#del').click(function() {
//var a=document.getElementById("").value;
var val0 = $('#id').val();
var val01 = $('#cust').val();
var fade = document.getElementById("fade");
var show = function(){
fade.style.display = "block";
}
show();
$.ajax({
type: 'POST',
url: 'mywebsite.com/deleting.php',
data: { card_id: val0,cust_id: val01 },
success: function(response) {
fade.style.display = "none";
// alert(response);
mystring = response.replace(/^\s+|\s+$/g, "");
$('#result11').html(mystring);
}
});
});
</script>
You have the same id on your buttons. Id's must be unique within the html document and can not be shared between multiple elements. Read more about the html id attribute
Change the button to use a class instead:
<td><button class="del">Delete</button></td>
Then change your jQuery to bind to that class instead:
$('.del').click(function(e) {
// Since we're using ajax for this, stop the default behaviour of the button
e.preventDefault();
// Get the value from the clicked button
var val0 = $(this).val();
I also added the event e in the function call, and stopped the default behaviour of the button (which is to submit the form) when it's clicked.
You need to give delete buttons a class and bind event on that class not with id. Then on bind function select values from that row elements and then pass them to Ajax.
Here goes my problem: this is the table
I want to click on delete column of a particular row say row no2 then I should select the value OFFICED-Id of that particular row row no.2
The problem is that table is being generated dynamically by the following code
<tbody>
<?php for($i=0;$i<count($detail1);$i++):?>
<tr>
<td><?=$detail1[$i]['id'];?></td>
<td><?=$detail1[$i]['officer_id'];?></td>
<td><button onclick='alert("<?=$detail1[$i]['password']?>")' > change</button></td>
<td><i class=" del glyphicon glyphicon-minus"></i></td>
</tr>
<?php endfor; ?>
</tbody>
I am trying to select that particular cell of a row by applying this jQuery function but I am getting error in the console and it's not working too
the variable id is going to save that particular cell value
$(document).ready(function(){
$(".del").click(function(){
var answer = confirm ("Are you sure you want to delete from the database?");
var id= <?php echo $detail1[$i]['id'];?>;
if (answer)
{
// your ajax code
$.ajax({
type: 'POST',
url: '<?php echo base_url(); ?>Admin/del', //We are going to make the request to the method "list_dropdown" in the match controller
data: {'id':id}, //POST parameter to be sent with the tournament id
//With the ".html()" method we include the html code returned by AJAX into the matches list
success: function(resp) {
alert('you have successfully deleted');
},
error: function(resp) {
console.log('error');
console.log(arguments);
}
});
}
});
});
The error in the console is
SyntaxError: expected expression, got '<'
What I figured out that this line var id= <?php echo $detail1[$i]['id'];?> is causing error and making my jQuery call not functioning
Is there alternative to select that particular cell OFFICED OF A ROW from a dynamic table by any event?
var id= <?php echo $detail1[$i]['id'];?>
Looks like $i is not defined, so id should be null. And so the issue.
Select id something like this. Please test, might need extra work:
var id= $(this).closest('tr').find('td.id').html();
And HTML <td> of id line should look something like:
<td class="id"><?=$detail1[$i]['id'];?></td>
The code below is a php code where i have retrieved data from a database,the code is executing well .My main problem is,on click this link 'send offer' in the following reference link (send offer),i need to get only the id of the particular data without loading to another page and loop it with jquery.For instance on click the id='buyerRequest',i need to insert data of that user into the database without loading the page and in addtion to disable the other links.
The code below is a php code where i have retrieved data from a database,the code is executing well .My main problem is,on click this link 'send offer' in the following reference link (send offer),i need to get only the id of the particular data without loading to another page and loop it with jquery.For instance on click the id='buyerRequest',i need to insert data of that user into the database without loading the page and in addtion to disable the other links.
<?php
require'php/connection.php';
$user_name=getUserField('user_name');
$query="SELECT * FROM `place_order` where `buyer_name` != '$user_name' order by `order_id` DESC";
if($query_run=mysql_query($query)){
echo"<table id='table_request'>";
echo"<tr id='tr_request'>";
echo"<td>Date</td>";
echo"<td>Order Description</td>";
echo"<td>Bid</td>";
echo"<td>Order By</td>";
echo"<td>Send Offer</td>";
echo"<br></tr>";
while($fetch_num=mysql_fetch_array($query_run)){
echo"<tr id='fetch_request'>";
echo"<td>".$fetch_num['current_date'].'</td>';
echo"<td>". $fetch_num['desc_order'].'</td>';
echo"<td>". $fetch_num['order_id'].'</td>';
echo"<td>". $fetch_num['buyer_name']."</td>";
echo"<td id='td_request'><a id='buyerRequest' href='SendingOffer.php?id=".$fetch_num['order_id']." ' >send offer</a></td>";
echo"</tr>";
}
echo"</table>";
}
?>
**Jquery code**
$('#buyerRequest').click(function(){
$('#id').each(function()
{
var id=$(this).attr('id');
alert(id);
});
});
<a class='buyerRequest' data-id='".$fetch_num['order_id']."' href='SendingOffer.php?id=".$fetch_num['order_id']." ' >send offer</a>
Adding data attribute to element makes thing easier ( data-id )
$('.buyerRequest').click(function(){
var order_id = $(this).data('id');
alert("Order_id: " + order_id);
});
<a id='buyerRequest' data-id='".$fetch_num['order_id']."' href='SendingOffer.php?id=".$fetch_num['order_id']." ' >offer sent</a>
jQuery(document).ready(function(){
jQuery("#table_request tbody").on('click', '#buyerRequest', function(event) {
var id=jQuery(this).data("id");
alert(id);
});
});
Please Use tbody in your table.I think it will help you.
Try This,
<a id='id_".$fetch_num['order_id']."' class="buyerRequest" href='#'>send offer</a>
$('.buyerRequest').click(function(){
var id=$(this).attr('id').replace('id_','');
alert(id);
var data1 = {id: id};
jQuery.ajax({
data:data1,
type:'POST',
url: 'SendingOffer.php',//set full url
success:function(strHTML)
{
$(this).attr('disabled','disabled');//this is disable a link you want to clicked
}
});
});
This is a tough one to explain...
I'm developing a restaurant system where the user add the dishes available to sell, but the user has to have an option to edit/delete AFTER the dish was registered.
So what i thought was: k, gonna make a table fetching the data from the DB and in the last column put some options like edit/delete... Here is the code for better understanding:
foreach ($result as $row){
echo '<tr>';
echo '<td>'.$row['name'].'</td>';
echo '<td>'.$row['price'].'</td>';
echo '<td>'.$row['description'].'</td>';
echo '<td>'.'<img src="img/icons/16/delete.png" alt="delete" height="16" width="16">'.'</td>';
echo '</tr>';
}
Like you've saw the delete option has already there (with no function/action yet) Here is the thing... I could put a link to a file in href="delete.php? but when a user clicks on this link will lead them to the delete.php page, leaving the administration page... I would like that when the user clicks the delete img, worked as/similar AJAX. I don't want the user exit the page....
Sorry for bad english (not my mothertongue), if you guys want more details just ask.
Ps: New PHP Programmer
Thanks in advance.
use javascript or jQuery to do an ajax request to delete.php with the id of the row you want to delete. I often put the id in the <tr> like echo "<tr data-id='{$row['id']}'>" and my jQuery would look something like this
$(".delete").on('click', function() {
var id= $(this).parents('tr').data('id');
$.ajax({
url:"delete.php",
type:"POST",
data:{id:id},
success:function(data, textStatus, jqXHR) {
// do something with the data returned. I usually output "success" from my
// delete.php and then check for data.indexOf('success') != -1
$("tr[data-id="+id+"]").remove();
},
error:function(jqXHR, textStatus, errorThrown) {
alert("Error: "+jqXHR+" "+textStatus+" "+errorThrown);
}
});
});
on my delete.php page i check that $_POST['id'] is not empty before continuing. If you use $_REQUEST['id'] it will also work with a direct link to delete.php?id=999
You can call Delete.php using AJAX, so the request is executed without leaving the page.
The advantage of making an actual link to the delete page, is that it also works without Ajax/Javascript. So you can start by building a plain delete page, and add the Ajax later.
First, you should also print a record_id because just deleting based on the name is a very bad idea where encoding will hunt you down.
Having said that, here is what I would do using jQuery:
//PHP
foreach ($result as $row){
echo '<tr>';
echo '<td>'.$row['name'].'</td>';
echo '<td>'.$row['price'].'</td>';
echo '<td>'.$row['description'].'</td>';
echo '<td>'.'<img class="delete-btn" src="img/icons/16/delete.png" alt="delete" height="16" width="16" data-order-id="$row['id']">'.'</td>';
echo '</tr>';
}
//JQUERY
$(document).ready(function(){
$(".delete-btn").click(function(){
$.post("/delete.php", {order_id: $(this).attr("data-order-id")}, function(){
$(this).closest("tr").remove();
});
});
});
I am doing an AJAX request with Jquery and PHP what I am doing is looping through an array and producing a table, each loop a new is created and an id is given to it, when they click the read me link the ajax and some more content is returned, on clicking read more I want the associated table row to be removed from the table is this possible, you can see my attempt so far below.
<div id="new" class="tabdiv">
<table>
<?php
$colours = array("#f9f9f9", "#f3f3f3"); $count = 0;
if(isset($newSuggestions)) {
foreach($newSuggestions as $row) {
if($row['commentRead'] == 0) {
?>
<tr id="<?=$row['thoughtId'];?>" bgcolor="<?php echo $colours[$count++ % count($colours)];?>">
<?php
echo "<td>".substr($row['thought'], 0,50)."...</td>";
echo "<td class='read'><a href='".base_url()."thought/readSuggestion/".$row['thoughtId']."' class='readMore'>Read More</a>";
echo "</tr>";
}
}
} else {
echo "You have no new suggestions";
}
?>
</table>
$('a.readMore').click(function(){
$('#readMore').fadeIn(500);
var url = $('a.readMore').attr('href');
$.ajax({
url : url,
type : "POST",
success : function(html) {
$('#readMore').html(html)
},
complete : function() {
$('tr').remove()
}
});
return false;
});
You can get the id of the row like this:
$(this).parent().parent().attr("id")
$(this) wraps the a element, the first parent gets the td and the next one the tr. Call this inside the click callback. Make sure that the id starts with a letter; it is not allowed to start a number. To delete it, define a variable:
var row = $(this).parent().parent();
You can then delete it at the callbacks:
row.delete();
As kgiannakakis points out you'll need a reference to the element that was clicked.
To find out what went wrong, consider the following lines of your code:
$('a.readMore').click(function(){
var url = $('a.readMore').attr('href');
...
return false;
});
What you do here is add an event handler to all a elements with a readMore class.
When the link is clicked you again select all a elements with a readMore class and retreive the href attribute from the first matched element.
What you want to do is get the attribute from the element that was clicked.
$('a.readMore').click(function(){
var url = $(this).attr('href');
...
return false;
});
The same problem occurs in the success and complete handlers of your ajax request, note that you can't use this in the success/complete handlers because it will probably point to another object so you need to store it in a var before calling the ajax function.