Ajax Reload keep the Child rows open but also writes data to another child,

Ajax Reload keep the Child rows open but also writes data to another child,

maniyamaniya Posts: 58Questions: 12Answers: 0

I somehow managed to make it working, but now i have a situation where i had opened two parents and adding the data in one parent and reloading, it shows in both now even after refresh it shows it been added in one, how can i fix that

$('body').on('click', '#add', function() {
 var id= $("#id").val();
$.ajax({url:page.cfm',type:post,data : {id: id},async:false,datatype:'json',success: function(data) {
if (data.status == 1) {
                            swal('', data.statusmsg, 'success');
                            table.ajax.reload(function () {
                            //Iterate through all the open rows and open them again 
                            table.rows(rowIds).every(function (row, index, array) {
                                table.row(row).child(Format(ID)).show(); - ID coming from post call
                                this.nodes().to$().children('td:first').html('<i class="fa fa-minus-square text-danger fa-2x" aria-hidden="true"></i>');
                            });
                            //Set to false if you don't want the paging to reset after ajax load,otherwise true
                        }, false);

}
});
});

now after the success call, the format Function will be called as many times as the parent row is opened and redrawn, but it is always sending the same ID

how can fix it

If you reload the page is it ok? - YES

When you say you have 2 parents you mean 2 different rows? - YES

The Issue is happening on table redraw of Datatables

Replies

  • kthorngrenkthorngren Posts: 20,302Questions: 26Answers: 4,769

    Format(ID)

    Where does the ID come from?

    I might be missing it but I don't see where this is being set.

    Kevin

  • maniyamaniya Posts: 58Questions: 12Answers: 0

    ID is coming the

    $('body').on('click', '#add', function() { - because its a button and inside a form, so i had added a hidden field which refers to this ID

  • kthorngrenkthorngren Posts: 20,302Questions: 26Answers: 4,769

    Are you expecting the ID in Format(ID) to be different for each child row that you are showing?

    Can you post a link to your page or a test case so we can see what's happening?

    Kevin

  • maniyamaniya Posts: 58Questions: 12Answers: 0

    yes, you are correct, but when it reloads, it passes same id for multiple open parents and ultimately they show up

  • kthorngrenkthorngren Posts: 20,302Questions: 26Answers: 4,769

    If doesn't look like you are changing the value of ID in this loop:

                                table.rows(rowIds).every(function (row, index, array) {
                                    table.row(row).child(Format(ID)).show(); - ID coming from post call
                                    this.nodes().to$().children('td:first').html('<i class="fa fa-minus-square text-danger fa-2x" aria-hidden="true"></i>');
                                });
    

    You probably need to add something to get the row ID for each row. Maybe something like this:

                                table.rows(rowIds).every(function (row, index, array) {
                                    var ID = table.row(row).ID // Or whatever references the row ID column
                                    table.row(row).child(Format(ID)).show(); - ID coming from post call
                                    this.nodes().to$().children('td:first').html('<i class="fa fa-minus-square text-danger fa-2x" aria-hidden="true"></i>');
                                });
    

    Kevin

  • maniyamaniya Posts: 58Questions: 12Answers: 0

    There is no specific id coming in tr, i am adding using rowId in datatables as/:

    rowId: function(a) {
                    var id = $('<div/>').append(a.action).find('.add').data('acid');
                    return id;
                }
    
  • kthorngrenkthorngren Posts: 20,302Questions: 26Answers: 4,769

    I'm confused about what you are doing. Maybe you can post a link to your page or a test case replicating the issue.

    You are using this:
    table.row(row).child(Format(ID)).show(); - ID coming from post call

    Presumably the the ID provides the format function with information about which child data to fetch? If so then it doesn't seem to change in your loop.

    Or maybe I'm missing the actual issue.

    Kevin

  • maniyamaniya Posts: 58Questions: 12Answers: 0

    its a long story, i have popup and that popup has a hidden field which is passed from the post call to this call, so its not actually datatables row but a row from the hidden field and the code you shared, i am not sure how can i get the id or value from that

  • kthorngrenkthorngren Posts: 20,302Questions: 26Answers: 4,769
                                table.rows(rowIds).every(function (row, index, array) {
                                    table.row(row).child(Format(ID)).show(); - ID coming from post call
                                    this.nodes().to$().children('td:first').html('<i class="fa fa-minus-square text-danger fa-2x" aria-hidden="true"></i>');
                                });
    

    In this loop instead of passing ID to format maybe you need to pass the data element in row that is the row ID. Not sure what you data structure but maybe something like Format( row.ID ).

    Kevin

This discussion has been closed.