Help with AJAX script to send data to PHP file

Discussion in 'JavaScript' started by jpinheiro, Mar 27, 2010.

  1. #1
    Hello,

    I am trying to make it so I can delete a row off of a html table and a row out of mysql all without reloading the page.

    here is my code so far

    
    <?php
    
    include('config.php');
    
    ?>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    	<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    	<title>Sortable table </title>
    	<link rel="stylesheet" type="text/css" href="./css/example.css"/>
    	<script type="text/javascript" src="./js/sortable.js"></script>
       <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js" type="text/javascript"></script>
    
    </head>
    
    <body>
    
    
       <script type="text/javascript">
    
    	function deleterow(id){
    		if (confirm('Are you sure want to delete?')) {
    
    var string = 'id='+ id ;
    $.ajax({
       type: 'GET',
       url: 'deletecnt.php',
       data: string,
       cache: false,
       success: function(){
    		$(+id).fadeOut("slow");
    		$(".message").fadeIn("slow");
    		$(".message").delay(2000).fadeOut(1000);
    		}
    });
    }};
    
       </script>
    
    
    <table class="sortable" id="anyid" cellpadding="0" cellspacing="0">
    <tr>
    					<th>ID</th>
    					<th>Name of Contact</th>
    					<th>Date of 1st Contact</th>
    					<th>Method of Contact</th>
    					<th>Primary Email</th>
    					<th>Secondary Email</th>
    					<th>Paypal Email</th>
    					<th>Contact Form</th>
    					<th>Phone</th>
    					<th>Skype</th>
    					<th>MSN</th>
    					<th>Yahoo</th>
    					<th>AOL</th>
    					<th>EDIT</th>
    					<th>DELETE</th>
    </tr>
    					<?php
    					$result = mysql_query("SELECT * FROM contacts") 
    or die(mysql_error());  
    
    while($row = mysql_fetch_array( $result )) {
    	echo "<tr id='". $row['id'] ."'> <td>"; 
    	echo $row['id'];
    	echo "</td><td>"; 
    	echo $row['nameofcontact'];
    		echo "</td><td>"; 
    	echo $row['dateof1stcontact'];
    		echo "</td><td>"; 
    	echo $row['methodofcontact'];
    		echo "</td><td>"; 
    	echo $row['primaryemail'];
    		echo "</td><td>"; 
    	echo $row['secondaryemail'];
    		echo "</td><td>"; 
    	echo $row['paypalemail'];
    		echo "</td><td>"; 
    	echo $row['contactform'];
    		echo "</td><td>"; 
    	echo $row['phone'];
    		echo "</td><td>"; 
    	echo $row['skype'];
    		echo "</td><td>"; 
    	echo $row['msn'];
    		echo "</td><td>"; 
    	echo $row['yahoo'];
    		echo "</td><td>"; 
    	echo $row['aol'];
    	echo "</td><td>"; 
    	echo "<a href='./editcontact.php?cid=". $row['id'] ."'>EDIT";
    		echo "</td><td>"; 
    	echo '<a href="#"><img src="del.gif" onclick="deleterow('. $row['id'] .')"/></a>';
    	echo "</td></tr>"; 
    } 
    ?>
    <tr class="sortbottom">
    	<td></td>
    	<td></td>
    	<td></td>
    	<td></td>
    	<td></td>
    	<td></td>
    	<td></td>
    	<td></td>
    	<td></td>
    	<td></td>
    	<td></td>
    	<td></td>
    	<td></td>
    	<td></td>
    	<td></td>
    </tr>
    </table>
    		
    </body>
    </html>
    
    
    PHP:
    What the code does at the moment is when i click the Delete Image it pop up the confirmation box and when I click ok nothing happens im not sure how to pass the data over to the PHP file either here is the deletecnt.php page:

    <?php
    include('config.php');
    
    $id = $_GET['id'];
    
    mysql_query("DELETE FROM contacts WHERE age='$id'") 
    or die(mysql_error());  
    
    echo "The row $id was deleted successfully";
    ?>
    
    PHP:
    If you have any expierence in this and undertand where my mistake is I am still a n00b to ajax.

    I will be very greatful for your help.
     
    jpinheiro, Mar 27, 2010 IP
  2. inegoita

    inegoita Member

    Messages:
    54
    Likes Received:
    4
    Best Answers:
    0
    Trophy Points:
    48
    #2
    Hi

    your code looks ok, but I think you have to pass the data parameter to the ajax jquery like this:

    $.ajax({
    type: 'GET',
    url: 'deletecnt.php',
    data: {'id':id},
    cache: false,
    success: function(){
    $(+id).fadeOut("slow");
    $(".message").fadeIn("slow");
    $(".message").delay(2000).fadeOut(1000);
    }
    });

    that is to say that the data member is a Javascript object not the query string

    let me know if it works
    John
     
    inegoita, Mar 28, 2010 IP