in ajax data is deleted from database but disappear from screen when refreshed

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');
}

We have no way of telling what the call to $template is doing. Does it echo the result back to the request by itself or do you need to echo out %template->main_content? — FlyingGuy, Nov 10 '11 at 05:54

score 2 · Accepted Answer · answered Nov 10 '11 at 06:01

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.

@AmarJyotyMalakar, this is you solution. – Imran Naqvi Nov 10 '11 at 06:19 — Imran Naqvi, Nov 10 '11 at 06:19

score 0 · Answer 2 · answered Nov 10 '11 at 05:49

0

As you are removing data using ajax call and must be getting success/failure response from server side.

I suggest you to refresh the or area where you are displaying data when you get success response from server

answered Nov 10 '11 at 05:49

Umesh Awasthi

23,407
37
132
204

Thanks for the suggestion.But how I refresh the area.The success result is displayed by a table.Do i need to refresh the whole table?If yes how? – Amar Jyoty Malakar Nov 10 '11 at 05:55
@AmarJyotyMalakar are you deleting a single result or complete table and you have either way like you can regenerate result dynamical.follow this post it might help you a bit http://stackoverflow.com/questions/868890/ajax-how-refresh-div-after-submit – Umesh Awasthi Nov 10 '11 at 05:59
I am deleting a single result.Only one row.The remove option is available in every row of the table. – Amar Jyoty Malakar Nov 10 '11 at 06:03
@AmarJyotyMalakar than you have to recreate the table since it will be at the browser cache and refresh and recreating it with Ajax call is best way.When you delete the result return the rest of results and create the table dynamically document.getElementById("resId").innerHTML = http.responseText; else you have to keep track of what has been deleted and some tedious DOM work has to be done so better let ajax call handle this all – Umesh Awasthi Nov 10 '11 at 06:08
You might want a PHP script that will generate an HTML for your records. You could then make a second AJAX call to that PHP script after delete success and replace the existing table with the new code.
– Jonathan Wilson Nov 10 '11 at 06:08
@JonathanWilson agree else one has to play around with DOM and than find out which node has been selected delete etc but even i am not sure will that work so always better to recreate it dynamically – Umesh Awasthi Nov 10 '11 at 06:09
@Jonathan Wilson then the whole page might be refreshed if i create another table after deletion. – Amar Jyoty Malakar Nov 10 '11 at 06:13
the whole page won't refresh. only the table will refresh because you are doing so with your AJAX – Jonathan Wilson Nov 10 '11 at 06:14
@AmarJyotyMalakar you need to create that with your php code and can use that content to show using JavaScript innetHTML technique. – Umesh Awasthi Nov 10 '11 at 06:15

score 0 · Answer 3 · answered Nov 10 '11 at 06:00

In the callback where you have the following code:

document.getElementById("resId").innerHTML = http.responseText;

Write some functionality that removes the item from the dom.

At the moment you are just writing the response to the innerHTML of some html element which is probably going to result in nothing.

I seriously recomend jQuery for dom manipulation and as an ajax library.

EDIT:

Noticing a comment above mentioning a "cart template" is used. You'll need to update the innerHTML of the element that contains your cart, with the responseText.

+1 for jQuery as DOM manipulator and AJAX library. jQuery AJAX syntax is simple and powerful: `$.ajax({url:'http://www.url.com',success: function(data, textStatus, jqXHR){alert(data)}});` Check out more http://api.jquery.com/jQuery.ajax/ — Jonathan Wilson, Nov 10 '11 at 06:04

GEMI · Answer 4 · 2011-11-10T06:27:43.863

0

One quick and dirty way to acomplish this would be to refresh the page on successfull ajax call, like this:

  if(http.readyState==4 && xmlhttp.status==200)
        {
            document.getElementById("resId").innerHTML = http.responseText;
            //alert(http.responseText);

            //refresh page 
            window.location.href=window.location.href;
        }

edited Nov 10 '11 at 06:27

answered Nov 10 '11 at 06:21

GEMI

2,239
3
20
28

doesn't this refresh your page? window.location.href=window.location.href; I tested and it refreshes mine... – GEMI Nov 10 '11 at 06:44

score 0 · Answer 5 · answered Nov 10 '11 at 06:23

0

I like to use:

http://api.jquery.com/remove/

To remove the DOM element. Or, if you want to keep the element, but make it's child elements and text delete, use:

http://api.jquery.com/empty/

Hope that helps...

answered Nov 10 '11 at 06:23

Homer6

15,034
11
61
81

in ajax data is deleted from database but disappear from screen when refreshed

5 Answers5