Deleting values from MySQL database with AJAX without page reload (edited)

Question

I am using delete by ID system. The user enters the id of the record he/she wishes to remove and is done so through PHP. This is all working and when successfully removed a little alert box confirms this and is brought back to the original page, which shows the record is no longer there. However, I would like to use AJAX in a way that does not refresh the page and keeps the table on screen.

<head>
<title>ajax_test</title>
<script language="javascript" type="text/javascript" src="prototype.js"></script>
<script>
function updateDIV(myDiv)
{
var url='delete.php';
var params = 'id';
var myAjax = new Ajax.Updater(myDiv, url, {method: 'get', parameters: params});
}
</script>
</head>




<body>
    <form action="delete.php" method="get">
        <input type="text" name="id" placeholder="ID" />
        <input type="submit" value="Delete" onclick="updateDIV(targetDiv)" />
        <div id="targetDiv"></div>
    </form>
</body>

As you can probably see, this is not working. Is there any blatant problems that I should be researching further?

NOthing you're doing in your client-side html is ajax-capable. Ajax requires Javascript code. The php side of things couldn't care less if it's a normal form submission or an ajax request - they're both just http requests. — Marc B, Jul 15 '12 at 23:40
This question demonstrates a fundamental misunderstanding of what AJAX is. Perhaps you should read up on "AJAX" first. Then look at the Prototype docs to see how to implement AJAX using it. — Lèse majesté, Jul 15 '12 at 23:50
Ok thanks. Still slightly lost though. I gather from what you are saying that I shouldn't worry about the php file for now and focus on the Javascript. Will I need to worry at any stage what is in my delete.php? Sorry for the stupid questions. New to this. The Javascript file I am to create will Ajax.Updater be what I am spending my time on? — user1525004, Jul 15 '12 at 23:53
@ Lèse majesté - No problem. I will go back and research more thoroughly AJAX. Apologies for wasting your time. Thanks anyway :) — user1525004, Jul 15 '12 at 23:57
@user1525004: What your script does on the backend doesn't matter, only the communication it has with the front-end. I.e. if your JS front-end expects XML, then your delete.php needs to return XML. Once you read a little more about AJAX and look at some simple examples, it should all become clear to you. — Lèse majesté, Jul 16 '12 at 00:17

score 0 · Accepted Answer · answered Jul 30 '12 at 08:48

0

Change the updateDIV function to this :

<script type="text/javascript">
function updateDIV(myDiv)
{
   var url='delete.php';
   var id = $F($('id'));
   var myAjax = new Ajax.Updater(myDiv, url, {method: 'get', parameters: 'id='+id});
}
</script>

and add an id value to your input :

<body>
    <form action="delete.php" method="get">
        <input type="text" id="id" name="id" placeholder="ID" />
        <input type="submit" value="Delete" onclick="updateDIV(targetDiv)" />
        <div id="targetDiv"></div>
    </form>
</body>

$F is a prototype function which get the value of an element. Then on your php code, you can get the id with $_GET['id'].

answered Jul 30 '12 at 08:48

Usman Tiono

224
1
6

Thank you very much for your reply Usman. This is a good help, however it still is not working. When 'delete' is clicked I am presented with a blank page but the record is still deleted. I would like it so the record is deleted but no page refresh. I think the problem lies in the delete.php if ((isset($_GET['id'])) && ($_GET['id'] != "")) { $deleteSQL = sprintf("DELETE FROM orders WHERE id=%s", GetSQLValueString($_GET['id'], "int")); – user1525004 Jul 30 '12 at 16:02
Glad to help you. Yeah, make sure delete.php return some HTML elements to be updated when you are using Ajax.Updater. Here is the example : `Testing";` `?>` And myDiv element will be updated with
Testing
– Usman Tiono Jul 31 '12 at 02:37

score 0 · Answer 2 · answered Jul 11 '13 at 01:53

Here is the Complete Source Code for Delete Record without Refreshing the Page.

Follow the Steps:

Step1:

DBConnect.php

  class DBConnect
  {
    function DBConnect()
    {
       $link= mysql_connect("localhost","root","")or die("Local Host Error".mysql_error());
       mysql_select_db("test");
    }

    function viewData()
    {
      $query = "SELECT * FROM test_mysql";
      $resultset = mysql_query($query);
      return $resultset;
    }

    function DeleteData($userID)
    {
      $query = "DELETE FROM test_mysql WHERE id=".$userID;
      $resultset=mysql_query($query) ;
    }
  }

Step2:

 delete.php

   include_once'DBConnect.php';    
   if(isset($_REQUEST['userid']) && $_REQUEST['userid'])    
   {    
     $delObj= new DBConnect();    
     $delObj->DeleteData($_REQUEST['userid']);    
   }

Step 3:
 index.php

    <html>
    <head>
    <title></title>
    <script type="text/javascript">
    function deletedata(id)
    {
      var xmlhttp;    
      if (id=="")
        {
            document.getElementById("Display").innerHTML="";
            return;
        }
      if (window.XMLHttpRequest)
        {// code for IE7+, Firefox, Chrome, Opera, Safari
            xmlhttp=new XMLHttpRequest();
        }
      else
      {// code for IE6, IE5
            xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
      }
      xmlhttp.onreadystatechange=function()
      {
            if (xmlhttp.readyState==4 && xmlhttp.status==200)
            {
              window.location.reload()

            }
      }
          xmlhttp.open("GET","delete.php?userid="+id,true);
          xmlhttp.send();

    }
    </script>
    </head>
    <body>
    <?php 
    include 'DBConnect.php';
    $ViewObj= new DBConnect();
    $ResultSet=$ViewObj->viewData();
    ?>
    <span id ="Display">
    <table align="center" border="1" width="50%" cellpadding="4" cellspacing="4">
    <tr>
      <th>ID</th>
      <th>Name</th>
      <th>operation</th>
      <th align="center">Action</th>
    </tr>
    <?php
    while($row= mysql_fetch_array($ResultSet))
    {
    ?>
    <tr>
      <td><?php echo $row[0];?></td>
      <td><input type="text" name="txt"></td>
      <td><?php echo $row[1];?></td>
      <td align="center"><a href="#" onClick="deletedata('<?php echo $row[0];?>')" style="color:#00F"><b>Delete</b></a></td>
    </tr>
    <?php
    }
    ?>
    </table>
    </span>
    </body>
    </html>

if You Feel any problem then please let me know.hope it will help you. Thank you.

Deleting values from MySQL database with AJAX without page reload (edited)

2 Answers2

Linked