table refresh issue using ajax+JQuery+JSON

Question

I have a records which I have populated in HTML table format. I have an achor tag with trash-can image at the last column. Upon clicking on the Image I am trying to delete the row and populate the table again with the fresh data. I am using $.getJSON() call and iterating a list to form the rows of the table. The action is getting called and the respective record is getting deleted from the database table but the table in the jsp page is not getting refreshed. Please look at the below two Images to better understand my problem.

I have clicked on the 1st row trash-can to remove the 1st row of the table but the table is not getting refreshed, it is appending the whole records to the end of the table. If I refresh the page then it table is showing up correctly. below is my JQuery code. Some one please suggest me in resolving this issue.

JQuery Script:

 $(".deleteUserIncomesJson").click(function(e){
    e.preventDefault();
    var tempID = $(this).attr('data'); //Fetch income id        
    $.getJSON("deleteUserIncomesJson",{incomeID:tempID},function(data){
        $(this).closest('tr').remove();
         $.each(data.incomesList,function(index){
            $(".defaultTable").append("<tr><td>"+data.incomesList[index].catergory.userCodeName+"</td>"+
                    "<td>"+data.incomesList[index].payee.payeeName+"</td>"+
                    "<td>"+data.incomesList[index].description+"</td>"+
                    "<td>"+data.incomesList[index].transactionDate+"</td>"+
                    "<td>"+data.incomesList[index].amount+"</td>"+
                    "<td>&nbsp;&nbsp;</td>"+
                    +"</tr>");

        }); 

    }); 

});

HTML Code:

 <a style="text-decoration: none" class="deleteUserIncomesJson" href="#" id="{<tags:property value="incomeID"/>}" data="<tags:property value="incomeID"/>">
    <img width="20px" height="20px" src="<tags:url value="/image/Trash.png"/>" height="15"/>
 </a>

It is doing exactly what you asked it to in your code. Manually appending to the end of the table. Instead you need to *merge* the data into the existing rows (e.g. find the row and change the contents of each column). — iCollect.it Ltd, Dec 24 '15 at 13:57
but I hape the code $(this).closest('tr').remove(); should remove the 1st row? as you can all the rows are present in the table in both the images. If I refresh the data then it is populating with the correct number of records(5 records) — Ghost Rider, Dec 24 '15 at 14:01
`$(this)` in the callback function is not the element you clicked on, it's `window`. See the duplicate message for how to access `this` in the callback. — Barmar, Dec 24 '15 at 14:08
I have one more imp doubt. the CSS styles are not getting applied to the table if I populate using the above JQuery approach. There are so many css styles I need to apply to the table rows and also to the cells. Is there any way I can just refresh the table ? or simpler way to make the table to have all the css styles applied after performing the above repopulating operation? — Ghost Rider, Dec 24 '15 at 15:10
@Barmar: my issue is not just related to "$(this)". the post which you have mentioned saying this question is already answered is regarding the stopwatch. Can you please give more appropriate link or suggestions? — Ghost Rider, Dec 24 '15 at 15:46
The stopwatch is irrelevant, the critical thing is that `this` is not captured in closures. You need to bind a local variable, as shown in some of the answers. Use `var self = this;` before calling `$.getJSON`, and then use `$(self)` instead of `$(this)` in the callback function. — Barmar, Dec 24 '15 at 16:06
Why are you appending new rows to the table? All you need to do is remove the current row. The rows you're appending seem to be copies of the rows that are already in the table. If you want to refresh the table from scratch, you should empty the table completely first. — Barmar, Dec 24 '15 at 16:08
As for why you're not getting any style on the new rows, you don't have any classes in the HTML that you're adding. Can you show the HTML for the original table? You're also not adding the `edit` and `trash` icons. — Barmar, Dec 24 '15 at 16:11
@Barmar: I have followed your suggestion Now I was able to accomplish my requirement. Below is my final function.Thanks a lot once again — Ghost Rider, Dec 24 '15 at 17:04

score 1 · Accepted Answer · answered Dec 24 '15 at 17:02

@Barmar and others for your suggestion. I am able to accomplish my requirement now. Below is my final jquery function and it is working link a champ. I no need to work on css also. It is just deleting the required row from my table.

Thank you once again

$(".deleteUserIncomesJson").click(function(e){
    e.preventDefault();
    var self=this;
    var tempID = $(self).attr('data'); //Fetch income id        
    $.getJSON("deleteUserIncomesJson",{incomeID:tempID},function(data){
        $(self).parent('td').parent('tr').remove();
    });

});

table refresh issue using ajax+JQuery+JSON

1 Answers1