Question

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

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.