child row problem with new search without page refresh

humbug

i know im just being stupid here but i just cant figure out my problem.

Im using child rows and everything works brilliantly on the first page load and do the first search. All the child rows appear as they should for each row...brilliant..im happy. however if i make a change to the search parameter and fire off the search again.. the table returns what it should so all is working on the ajax front but when clicking on the pic to view the child i get an error (detailed below.

here is part of my ajax that im working with (which works on first load/ page refresh)

aoColumns: [
                {
                className:      "details-control",
                 orderable:      false,
                data:           null,
                defaultContent: ''
                },
                { data: "destination_station" },
.....

here is the part of the code that has the issue on resubmitting the search without the refresh..

function format ( d ) {
    // `d` is the original data object for the row
    
    
    var fromString = d.destination_station.split("["); 
    var fromstationString = fromString[1].split("]");

var returninfo =    $.ajax({
        type:'GET',
        url: '/...../............php',
        async: false,
        data: {
                    cat : fromString[0],
                    subcat : fromstationString[0],
.....

You'll notice im using the d.destination_station.. which is fine on first page load but causes errors if the page isnt refreshed.. here's the error..

Uncaught TypeError: Cannot read property 'destination_station' of undefined

this is driving me crazy lol.

any help would really be appreciated

cheers

humbug

hoping this will help someone help me :)

I'll try and explain this the best i can... after adding some console.log's i started to track 'table'

var table =   $('#example').DataTable( {

I noticed that after submitting the search again without refreshing the page 'table' for some reason was undefined and yet the information from the ajax query was populated into it.

looking through various forum posts and examples again i noticed that on one of them the line

var table =   $('#example').DataTable();

was just before the

$('#example tbody').on('click', 'td.details-control', function () {

so i stuck var table = $('#example').DataTable(); within the above function and now if you run the search twice the child rows show as they should.

im not a coder as you can tell but i can normally figure it out with enough trial and error but this has me stumped.

humbug

okay kind of a hack and slash method to get it to at least work i used some logic on the submit button.

if(window.fixit == 1){
            window.fixit = 0;
            $("button").trigger('click');
        }
        else {
            window.fixit = 1;
}

I would still like to resolve this properly instead of having to resort to the above.

humbug

ok.. that doesnt work now for some reason.

going to have to reload the page which i dont really want to have to do