DataTables logo DataTables

via Ad Packs
(solved) fnReloadAjax - oTable is undefined under dT 1.8.2
  • IanDMacIanDMac
    Posts: 6
    Hi,

    Apologies as this seems to have been discussed many many times before, but on looking through hundreds of posts pertaining to different versions, fixes and added features, the resolution does not appear very clear to me, so apologies if somewhere the straight answer is staring me in the face.

    I am trying out dataTables at the moment and it looks swell and I have examples working without issue locally and on a test domain. My requirement for moving forward with dT is for the selection of different Ajax data source files to keep the amount of data down to a minimum, so looked at the fnReloadAjax function.

    My problem is that when ever I action the function it always comes back with a browser error of oTable is undefined.

    I created a file called testreload.js that contains the following:

    $.fn.dataTableExt.oApi.fnReloadAjax = function ( oSettings, sNewSource, fnCallback, bStandingRedraw )
{
	if ( typeof sNewSource != 'undefined' && sNewSource != null )
	{
		oSettings.sAjaxSource = sNewSource;
	}
	this.oApi._fnProcessingDisplay( oSettings, true );
	var that = this;
	var iStart = oSettings._iDisplayStart;
	
	oSettings.fnServerData( oSettings.sAjaxSource, [], function(json) {
		/* Clear the old information from the table */
		that.oApi._fnClearTable( oSettings );
		
		/* Got the data - add it to the table */
		var aData =  (oSettings.sAjaxDataProp !== "") ?
			that.oApi._fnGetObjectDataFn( oSettings.sAjaxDataProp )( json ) : json;
		
		for ( var i=0 ; i<aData.length ; i++ )
		{
			that.oApi._fnAddData( oSettings, aData[i] );
		}
		
		oSettings.aiDisplay = oSettings.aiDisplayMaster.slice();
		that.fnDraw();
		
		if ( typeof bStandingRedraw != 'undefined' && bStandingRedraw === true )
		{
			oSettings._iDisplayStart = iStart;
			that.fnDraw( false );
		}
		
		that.oApi._fnProcessingDisplay( oSettings, false );
		
		/* Callback user function - for event handlers etc */
		if ( typeof fnCallback == 'function' && fnCallback != null )
		{
			fnCallback( oSettings );
		}
	}, oSettings );
}

    The order of the scripts loading is as follows:

    <script type="text/javascript" language="javascript" src="../../media/js/jquery.dataTables.js"></script>
    <script type="text/javascript" src="../../media/js/testreload.js"></script>

    The initial call (which works and loads the default arrays.txt) is:

    		<script type="text/javascript" charset="utf-8">
			$(document).ready(function() {
				var oTable = $('#example').dataTable( {
					"bProcessing": true,
					"bDeferRender": true,
					"sAjaxSource": "sources/arrays.txt"
				} );
			} );
		</script>

    and I then have a further function call within a drop down (select) onChange to initiate the reload of:

    oTable.fnReloadAjax( 'sources/arrays2.txt' );

    Even if I leave it as a null function call the result is always the same saying oTable is undefined.

    Am I missing something really obvious here and if so I expect to be shouted at appropriately whilst being directed to what I have done wrong, but be assured I have gone through the start to finish of the example and addition of the plug-in 20 times if not more, so maybe I am not seeing the wood for the trees, but would appreciated any ideas.

    Thanks, Ian
  • Taylor514ceTaylor514ce
    Posts: 41
    oTable needs to be defined as a global variable. You've scoped it locally. Make this change:

    <script type="text/javascript" charset="utf-8">
    var oTable;

    $(document).ready(function() {
        oTable = $('#example').dataTable( {
            "bProcessing": true,
            "bDeferRender": true,
            "sAjaxSource": "sources/arrays.txt"
        } );
    } );
</script>
  • allanallan
    Posts: 15,874
    Taylor514ce is bob on with this.

    The is an alternative that is worth knowing about though:

    $('#example').dataTable().fnReloadAjax();

    The first call to dataTable() will initialise it, the second will return the original reference.

    Allan
  • IanDMacIanDMac
    Posts: 6
    OMG - The wood for the trees! How I missed this I just don't know.

    Many thanks, Ian.
  • IanDMacIanDMac
    Posts: 6
    I have now connected up the:

    oTable.fnReloadAjax( 'sources/' + chosen + '.txt' )

    where 'chosen' is the selected option in my drop down select and am now experiencing differing results across the usual culprit of MSIE compared to 3 other browsers.

    I have 2 choices in my select options which calls arrays.txt which has the default 57 entries and then arrays2.txt that I have copied and pasted the original entries to create 1,824 entries.

    Under:

    Safari - works a charm and I can switch back and forth between the two sets of data and quite speedily.
    Firefox - again, works like a charm.
    Chrome - again, works like a charm.

    Although, it appears that with repeated switches back and forth the delay in loading the arrays2 set of data get longer and longer, as if the data has not been flushed / cleared fully.

    MSIE (v8 in this case) - will switch upon the 1st selection being made to says 'arrays2' and show the full 1,824 entries after a couple of seconds (when ran locally) and about 5 or 6 seconds when ran on the live site (which is at: http://www.i-cc.co.uk/dataTables/examples/ajax/ajax.html ), but on switching back to 'arrays' as the choice (which has 57 entries) it will hang for about a minute or 2 and then will show the 57 entries, but a couple more switches back and forth and it crashes with an out of memory warning as if the oTable is not being cleared from memory in MSIE.

    From all of my code above, this is the only different piece which is the call, taking into account that I have now changed it to the global variable as opposed to the local (doh!).

    <script type="text/javascript" charset="utf-8"> 
function GetSelectedItem() {

len = document.f1.s1.length;
i = 0;
chosen = "none";

for (i = 0; i < len; i++) {
if (document.f1.s1[i].selected) {
chosen = document.f1.s1[i].value;
} 
}
alert(chosen);
oTable.fnReloadAjax( 'sources/' + chosen + '.txt' );
}
</script>

    which is called from:

    <form name="f1">
<select name="s1" onChange = GetSelectedItem()>
<option value="none">Please select</option>
<option value="arrays">Arrays</option>
<option value="arrays2">Arrays2</option>
</select>
</form>

    It may not be pretty or refined, but the idea is to test and see how it works etc.

    Anyone else come across an issue like this with IE drowning from clearing just under 2,000 entries to load just a fresh 57.

    MSIE is always a pain LOL.

    Ian
  • allanallan
    Posts: 15,874
    I would very much suggest turning on the bDeferRender option - it will make things a lot faster and save memory. It will also hopefully allow IE's garbage collector to keep up... (assuming that is the problem!?).

    Allan
  • IanDMacIanDMac
    Posts: 6
    Hi Allan,

    Already have that in the document ready function for the initial call or does this need adding to the plug-in do you mean?

    Thanks, Ian
  • allanallan
    Posts: 15,874
    Like shown in this example: http://datatables.net/release-datatables/examples/ajax/defer_render.html - its an initialisation option.

    Allan
  • IanDMacIanDMac
    Posts: 6
    Yup, that was already enabled.
  • IanDMacIanDMac
    Posts: 6
    Okay, think I have found the issue.

    Because I was using the demonstration examples, I had all of the example code and XHR output being used for the Server Response views.

    Removed that and it works very well now.
  • allanallan
    Posts: 15,874
    Ah! So the processing time was in the display of the JSON response. I'll remember that for future... Thanks!

    Allan
This discussion has been closed.
← All Discussions

Howdy, Stranger!

It looks like you're new here. If you want to get involved, click one of these buttons!

Sign In Apply for Membership

Support

Get useful and friendly help straight from the source.

Categories

In this Discussion