Calling a basic JS function inside render to return true or false

WebCodex

Link to test case: https://vccalc.vapingcommunity.co.uk/dashboard/followers Its behind a login though...
Debugger code (debug.datatables.net): No errors
Error messages shown: None
Description of problem:

This is the code I am using in render, it's a simple function that has an ajax call to return true or false.

{ 'data': 'follow',
    "render": function ( data, type, row, meta ) {
        if(checkFollowing(usereid, row.follower_user_id) == false) {
            return '<button class="follow btn btn-primary">Follow this Mixer</button>';
        } else {
            return 'Following';
        }
    },
},

This is the function I'm calling it's pretty straightforward, I get a return of either true or false but it shows 9 returns?? There are only 2 entry's in the table, so I would expect only 2 returns.

function checkFollowing(usereid, followeruserid) {
    var following = true;

$.ajax({
    type: "POST",
    url: "https://vccalc.vapingcommunity.co.uk/controllers/followControl.php",
    data: { usertoken: usertoken, usereid: usereid, following: following, followeruserid: followeruserid },
    success: function(data){
        return data;
    },
});
    return false;
}

Also the if(checkFollowing(usereid, row.follower_user_id) == false) doesn't work for some reason

colin

columns.render is called several times, for each of the type options (the second parameter). It might be worth only calling your function for type === "display"

Colin

WebCodex

Thanks for your speedy reply Colin, appreciate it.

This is what I have just tried:

{ 'data': 'follow',
    "render": function ( data, type, row, meta ) {
        if(checkFollowing(usereid, row.follower_user_id) == 0) {
            return type === 'display',  
            '<button class="follow btn btn-primary">Follow this Mixer</button>';
        } else {
            return type === 'display', 
            'Following';
        }

    },
},

Unless I've done this wrong, this gives the same result

tangerine

I think Colin meant for you to use type === "display" as a conditional:

if (type === "display") {
    option 1
} else {
    option 2
}

WebCodex

Yeah I tried that too but I get this error:

DataTables warning: table id=datatable - Requested unknown parameter 'follow' for row 0, column 3. For more information about this error, please see http://datatables.net/tn/4

{ 'data': 'follow',
    "render": function ( data, type, row, meta ) {
        if( type === 'display') {
            if(checkFollowing(usereid, row.follower_user_id) == 0) {
                return
                '<button class="follow btn btn-primary">Follow this Mixer</button'; 
            } else {
                return
                'Following'; 
            }
        }
    }
},

tangerine

Did you follow the diagnostic process in the link provided?

kthorngren

You always need to return something using columns.render. Currently you are returning something if its type of display but not the other types like sorting and searching. Read more about this in the Orthogonal Data docs. For example:

{ 'data': 'follow',
    "render": function ( data, type, row, meta ) {
        if( type === 'display') {
            if(checkFollowing(usereid, row.follower_user_id) == 0) {
                return
                '<button class="follow btn btn-primary">Follow this Mixer</button';
            } else {
                return
                'Following';
            }
        }
        return data;
    }
},

allan

Just to add to what the others have said already, using Ajax inside a rendering function is something I would very strongly suggest you avoid - your checkFollowing makes an async ajax call and thus will always return false. Even it is way a synchronous call, only the success function returns the data, but the rendering function will never see that.

If you must make an Ajax call to get this information (rather than having it available up front), you should have your rendering function just return "Loading..." and then in a drawCallback get the ids for the rows on the current page (rows().ids() or rows().data() if you want to get the data objects to extra the data yourself or you don't use DT_RowId), and submit them together as a single Ajax request to the server to find out the results.

In the success function you would then update the data for those rows.

Optimisations would include only requesting data for rows which haven't yet been requested (when drawn).

Allan

WebCodex

Thanks Allan, I understand, I'll have a play and see what comes up, thanks again all

WebCodex

Ok, so in the end, I built a new array on the backend to pass to DataTables with the required information, works perfectly, I don't know why I was trying to over complicate things, I guess that's coding for you! Thanks all