Question

I am trying to delete the data against the remove (Ajax) option.When i click the remove button it deletes the data from the database and the page should automatically disappear the data.But it does not happen,it deletes the data but not disappeared from the screen.When i refreshed the page then in the page the data is disappeared……Please help me

The html code…

<table><tr><td><a href="javascript:remove()">Remove</a></td>
                 <td id="resId"></td></tr></table>

The ajax function is….

function remove(){
       var http = GetXmlHttpObject();
        http.onreadystatechange = function()
        {
            if(http.readyState==4)
            {
                document.getElementById("resId").innerHTML = http.responseText;
                //alert(http.responseText);
            }
        }
        var name1 = document.getElementById("bn").innerHTML;
        //alert(name);

        var url = "index.php?menu=remove_cart&ajax=ajax&q="+name1;
        http.open('POST',url,true);
        http.send(null);
    }

And the PHP function is….

function remove_cart($name1){
    global $template;

    $sql = "DELETE FROM tbl_buy WHERE b_name = '$name1'";
        $this->db->executeQuery($sql);

      $template->main_content = $template->fetch(TEMPLATE_DIR . 'my_cart.htm');
}

Answer 1

By using AJAX to modify your database, you have disabled the browser’s default refresh mechanism: the page reload. Therefore, you have to provide your own page refresh mechanism with JavaScript. You’ll want to add some custom success messaging in your PHP that tells your JS that everything is good.

if(http.readyState==4)
{
    document.getElementById("resId").innerHTML = http.responseText;
    //alert(http.responseText);
    if (http.status==200){ //on successful server response
        //check responsetext for successful DB delete
        if ('successful DB delete'){ //pseudo-code condition
            //javascript to remove element representing the DB row from the HTML DOM
            //ie. element.parentNode.removeChild(element);
        }
    }

}

For the ‘element’ JS variable to mean the element that was clicked, modify your remove() function and the way it’s called:

function remove(element){
    //...
}

and

<table><tr><td><a href="javascript:remove(this.parentNode.parentNode)">Remove</a></td>
                 <td id="resId"></td></tr></table>

where this.parentNode.parentNode references the <tr> above the <a>.

Hope that helps.