fnReloadAjax issue

vbextra

Hi, I couldn't make this work. What is wrong with fnReloadAjax call below? I want to refresh table in button click event. It loads data fine on document load. It says object doesn't support this method in IE 8 on button click.



var oTable;

$(document).ready(function() {

oTable = $('#neighbourhoods').dataTable( {
"bPaginate": false,
"bProcessing": true,
"bLengthChange": false,
"bFilter": false,
"bSort": true,
"bInfo": false,
"bAutoWidth": false,
"sAjaxSource": 'CCGetSitesByZipCode.ashx'
});

$('#btnSubmit').click(function(){
oTable.fnReloadAjax();
});
});

allan

Hi vbextra,

fnReloadAjax() is a plug-in API function. Have you included the code for the plug-in?

Thanks,
Allan

vbextra

No, I didn't include it.

I am very sorry newbie here.

I don't find code or link for fnReloadAjax.

Where can I download this plugin?

allan

The plug-in's page linked at the top of this one :-)
http://datatables.net/plug-ins#api_fnReloadAjax

Regards,
Allan

vbextra

Hi Allan,

I really appreciate your quick help.

IE 8 sucks. It doesn't show code block when I click Show Details link. I was able to get from Google chrome.

My code is working fine now.

Thanks for your great work. Very useful Jquery addin.

regards
VB

allan

Hi,

interesting! Thanks for pointing out the IE error - I'll get that fixed soon.

Regards,
Allan

tdktank59

Hey Allan,

Anyways just got this working for me as well.
However it seems its sending out 2 requests for each click I do.

Heres my js code for the table.

[code]

var oTable;
var giRedraw = false;

$(document).ready(function() {
oTable = $('#example').dataTable( {
"aoColumns": [
/* ID */ { "bVisible": false },
/* SID */ null,
/* Full Name */ null,
/* Status */ null,
/* Owner */ null,
/* Assigned To */ null
],
"sPaginationType": "full_numbers",
"bProcessing": true,
"bServerSide": true,
"sAjaxSource": "<?php echo base_url(); ?>problems/query",
"fnServerData": function ( sSource, aoData, fnCallback ) {
/* Add some extra data to the sender */
var work_category = document.getElementById('work_category');
var set = document.getElementById('set');
var employer = document.getElementById('employer');
var error_type = document.getElementById('error_type');
var status = document.getElementById('status');
var phase = document.getElementById('phase');
var extract = document.getElementById('extract');

aoData.push( { "name": "source", "value": "<?php echo $this->router->method; ?>"},
{ "name": "work_category", "value": work_category.value },
{ "name": "sets", "value": set.value },
{ "name": "employer", "value": employer.value },
{ "name": "error_type", "value": error_type.value },
{ "name": "status", "value": status.value },
{ "name": "phase", "value": phase.value },
{ "name": "extract", "value": extract.value }
);
$.getJSON( sSource, aoData, function (json) {
/* Do whatever additional processing you want on the callback, then tell DataTables */
fnCallback(json)
} );
}
}).fnSetFilteringDelay(1000);
});


[/code]

I think it has something to do with the fact that im attaching more data...

allan

Hi tdktank59,

Interesting... I don't see anything obviously wrong with the code that would cause two GETs to be sent out. Do you have an example you could link us to?

Thanks,
Allan

tdktank59

Yeah sure

[EDIT] Removed Authentication and Link info [/EDIT]

To see the fnReloadAjax thing hit the filter results button

allan

Hi tdktank59,

Thanks for the link - I think I can see what is going on. You are calling "oTable.fnReloadAjax" when the "Filter results" button is hit - but actually, I don't think you want to do this, as when you are using server-side processing, every draw updates the table from the server anyway. So I think you actually just want to call "oTable.fnDraw()". This will update the table on your latest filter, based on your custom 'get' function.

Regards,
Allan

tdktank59

Sweet that fixed it!

Guess I can unload fnReloadAjax.

Thanks for the help!