PHP and ajax no update taking place

Question

Hi There,

I have an an ajax request that looks like this,

$('input.fakecheck').click(function(){
alert("deleteing....");
$.ajax({
    url:"/search",
    type:"POST",
    data: $(this).attr('name')+"="+$(this).attr('value')+"&remove=Remove",
    success:function() {
        alert(data);
    }
})

})

This calls a php function which looks like this,

private function _remove_from_short_list($cv_array)
    {
        if (is_array($cv_array))
        {
            $short_list = $this->session->userdata('short_list');
            $new_list = array_diff_key($short_list, $cv_array);
            $this->session->set_userdata('short_list', $new_list);

        }
    }

Essentiallty what happens is that on my page I have a list which is essentially a list of id's taken out of the session, the user can then by click and input(this will change) delete the id from their session. However once the deletion has taken place I want to be able to refresh the list to show that it has taken place, currently nothing happens, until I manually refresh.

Answer 1

Well, you're going to have to send back an updated version of the list, and then do something with that in your "success" function. You could have the client-side code (the Javascript) take the appropriate action, but it's probably better for the server to send back the update because the server is where "reality" lives.

Answer 2

You will usually want to fire something in the success function to modify the list.

Say if you had a structure like this

<ul>
    <li>
        <input id="1" type="checkbox" class="fakecheck" />
    </li>
    <li>
        <input id="2" type="checkbox" class="fakecheck" />
    </li>
</ul>

In the success function, you could remove the li after you've done the deletion

$(this).parent().remove()

This obviously doesn't take into account any error handling in the AJAX request. If you could post the HTML for your list I could also get a better feel for the structure you're trying to change.

As Pointy mentions, you will have to be sure that you've server request has actually deleted the item if you're going to modify the list in place, instead of fetching an updated list.

Answer 3

If it's acceptable then you can just do a page refresh within the javascript success function.

Answer 4

rather than a page refresh, you could call a second function in JS to update the HTML in the browser. send the target ID and the HTML that the PHP outputs to a function like this:

function  HandleResponse(response, target)
{
  document.getElementById(target).innerHTML = response;
}

Answer 5

However once the deletion has taken place I want to be able to refresh the list to show that it has taken place, currently nothing happens, until I manually refresh.

It sounds like you are building the page with PHP, i.e. PHP generates HTML, which has a behavioural layer added via JavaScript. If you are implementing your own version of a checkbox that is supposed to be updated, make sure that you take care of UI updates in the JavaScript (ajax.success function callback) when the HTTP Request is finished.

My personal suggestion: move the page-building out of PHP and let the JavaScript do it instead, whether on page load or on a response from an Ajax request, and let the PHP do something more simple such as return a list of current session id's that should be checked.