delete table row using jQuery and Ajax

Question

Hi Friends I am new in jquery and want to learn Ajax I developed a simple code in which i am deleting rows of table and the length of the row will updating in one div you can check fiddle here or you can see me code below

SCRIPT

var len = $('table tr').length;

$('.shopItems').text('items in your cart '+len);

$('.del').click(function(){

    var len = $('table tr').length;
    var len = len - 1;
    $('.shopItems').text('items in your cart '+len);
    //alert(len)




if(len == 0)
{
$('table').remove();
    $('.empty').show();
}
    else{
    $(this).parent('tr').remove();
        len--;
    }


})

HTML

<div class="shopItems"></div>

<div class="empty" >Your Cart is empty</div>

<table width="100%">
    <tr>
        <td>Image</td>
        <td>Discription</td>
        <td class="del">X</td>        
    </tr>
        <tr>
        <td>Image</td>
        <td>Discription</td>
        <td class="del">X</td>        
    </tr>
        <tr>
        <td>Image</td>
        <td>Discription</td>
        <td class="del">X</td>        
    </tr>
</table>

CSS

.empty{display:none;}

My question is can i do this same thing using with Ajax and how please help me.

Thanks in advance....

Answer 1

you can put this function in your code:

ajaxService = (function () {
var ajaxGetJson = function (callback,  isAsyncCall) {

    //by default is an asyncrounous call
    isAsync = (typeof isAsyncCall === "undefined") ? true : isAsyncCall;

    $.ajax({
        url: "http://yourserviceorserversideapphere",
        type: "GET",
        data: request,
        dataType: "json",
        contentType: "application/json; charset=utf-8",
        async: isAsync,
        success: function (result, statusMsg, status) //3 parameters always come from ajax
        {
            callback(result, statusMsg, status, request);
        },
        error: function (result, statusMsg, status) //3 parameters always come from ajax
        {
            ServiceFailed(result, statusMsg, status, getSvcUrl(service, method));
        } // When Service call fails
    });
};

then in your del button:

$('.del').click(function(){
    ajaxService.ajaxGetJson(successAjaxCall, true);
}

and then you will have the function that you pass in your callback (successAjaxCall) to do what the .del button is doing in your code.

function successAjaxCall(result, statusMsg, status) {

   //you can use the result object to do anything you want here

}