I'm trying to update to jquery 1.10.1. All of my Datatables use ajax to retrieve data from the server, and all have stopped working. I don't see any errors in the error console.
May I know from which jQuery version are you migrating to 1.10.1???
Just a thought...
Check on 'live' events. It is not supported anymore instead you have to use on / delegate.. I believe you were aware of it.
I don't have a test page accessible outside our firewall. I may be able to get something up next week.
girishmr:
I was updating from jquery-1.7.2. I tried using the jquery-migrate -- that didn't output any migration errors. I know that jquery 1.10 has lots of changes, including some in ajax. What was odd to me was that the server side wasn't changing, firebug showed the client getting the same json, but datatables just said "processing". There were no errors in the error console, so I was at a loss as to how to debug.
I'm going to try to take it step by step. First jquery-ui from 1.8.20 to 1.9.2. If that works, then I can add the feature that I need, and circle back to the upgrade after I push that to production.
I'm sure I will, but first I need to know what the problem is :-). If someone could like to a page showing the error, that would be a large step in that direction!
Hello there
I ran into the same issue today. We're currently moving to 1.10.2 jquery version (up from 1.7.1).
We use only 2 datatables through the project, both were written at different times (in a bit different ways).
The latter works fine after upgrade, and this one is simple ajax-source datatable without any additional logic.
The problem exists with the former.
Here is what I've been able to figure out so far:
Initially it just didn't want to populate data within the table even though ajax call has been returning valid data set.
Eventually I fixed this particular problem by adding bServerSide: true option.
Not sure if it is of any help for you, but it worked before upgrade, and it works at the moment on live server. I may provide you a link/way to get to the page where you will see the table itself if you need it. Note though that it still uses older version of jQuery, and it won't produce this error.
Further details: after fixing initial loading problem, it seems that fnDraw() method does not redraw/filter the table anymore.
After some digging I've come to conclusion that afnFiltering array isn't being used either.
Here is the code of ajax reload method (Found it from somewhere more then year ago, so might be that it's obsolete by now):
[code]if (typeof $.fn.dataTableExt != 'undefined') {
$.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 */
for (var i = 0; i < json[oSettings.sAjaxDataProp].length; i++) {
that.oApi._fnAddData(oSettings, json[oSettings.sAjaxDataProp][i]);
}
/* Callback user function - for event handlers etc */
if (typeof fnCallback == 'function' && fnCallback != null) {
fnCallback(oSettings);
}
}, oSettings);
}
}[/code]
TL;DR
The issues are:
- fnDraw() doesn't seem to redraw the table after the new data is loaded.
- afnFiltering array isn't being used either.
I can provide a link (rather a way to get there since link is session-bound) to see current (working) unupdated datatable, it might give some ideas on what may be wrong there.
There are 2 main scenarios:
- when user changes the date in datepicker, the new data is requested (and received from the server), but the table rows aren't redrawn.
- when the user alters the filter above the table (time interval or price) it simply calls fnDraw(), and "Processing" label does not disappear afterwards, as well as the contents of the table remain unchanged.
Console reports no javascript errors whatsoever.
Tested in Firefox 24.0 and Chrome 30.0.1599.69 m. Both do the described above.
Thanks for your attention. Looking forward your help. Going to keep digging and will tell you if anything else becomes clear.
Here is some further result of working on this issue:
Older version of datatables (1.8.1) runs through afnFiltering with bServerSide: true while 1.9.4 only runs it if bServerSide: false (with all honesty it should run it regardless bServerSide value in my opinion). ATM I found an "okey"-workaround for my case to call oApi._fnFilterCustom before fnDraw(). fnDraw() itself doesn't work yet (in both versions, I blame jQuery for it :D ), so I'm not yet sure if results filtered this way will be taken into account while while drawing.
I will update you later if anything worthy will be found.
> with all honesty it should run it regardless bServerSide value in my opinion
Filtering, when server-side processing is enabled, is done by the server. There is no benefit in running the client-side code, so the newer versions don't as an optimisation.
Are you able to link me to your page please, so I can see exactly what is happening and what is going wrong.
Alright... I figured out the reason of hanging "Processing" in some cases -> sEcho was hardcoded to '1' on server (dumb idea indeed), and thus all requests after the 1st were ignored. Note that fnDraw() in this case doesn't remove "Processing" currently, it might be worth looking into.
The last problem left - I need both server side and client side processing
- load data from server and update it when requested
- filter data on client side
_fnAjaxUpdateDraw() does not allow to perform client side filtering (or I don't see the way it allows to).
And the last question is - is there a way to redraw the table without requesting server side (with bServerSide = true)?
Using jquery 1.7.1 (and 1.8.1 version of datatables) allows this by not specifying bServerSide. Everything works the way it is expected (by me). fnDraw() calls do not trigger http requests.
After jquery upgrade to 1.10.2 (regardless of datatables version) I was forced to specify bServerSide, otherwise table shows no-rows message after xmlhttp request is performed. Not sure if it works as intended or not.
Thank you in advance. Looking forward your answers.
You'll have to fill the search form here: https://www.russiantrains.com/en/trains/order
Moscow - Saint Petersburg route will work. The result page will contain the datatable, calender and a small filter.
My development version has been changed quite a bit, and this datatable was an experiment for me, so I'm pretty sure it may have some bad mistakes.
Logic of the page is following at the moment:
1. Data is loaded via ajax upon page load and when the date is picked in datepicker.
2. Client side filter is applied to this data.
3. When the filter is changed, data is filtered again on client side without ajax request.
[code]
The last problem left - I need both server side and client side processing
- load data from server and update it when requested
- filter data on client side
[/code]
you can't have both - you can load Ajax data from the server and use client-side processing, but you can't have server-side processing and client-side processing at the same time (I don't understand why you would want both actually :-) ).
The fnReloadAjax plug-in might be of use to you: http://datatables.net/plug-ins/api#fnReloadAjax - is that what you want? Reload the data from the server based on search information, while keeping filtering and sorting done on the client-side?
[quote]you can't have both - you can load Ajax data from the server and use client-side processing, but you can't have server-side processing and client-side processing at the same time (I don't understand why you would want both actually :-) ).[/quote]
Well, it's quite simple... The data in table referenced above is always quite small (without applying the filter), but it costs server resources. It makes client side filtering and sorting actually very-very reasonable, because
- it allows to decrease server load
- it speeds up filtering overall because of ajax request absence
[quote]The fnReloadAjax plug-in might be of use to you: http://datatables.net/plug-ins/api#fnReloadAjax - is that what you want? Reload the data from the server based on search information, while keeping filtering and sorting done on the client-side?[/quote]
fnReloadAjax is currently used on live server. It's exactly what I want, but once I upgraded jquery bServerSide: false doesn't seem to allow loading data from remote source anymore. I believe it only means server side filtering/sorting, which I'm eager to get rid off, but can't. Maybe it is a reason of my failure on this part.
> I believe it only means server side filtering/sorting, which I'm eager to get rid off, but can't
bServerSide enabled server-side processing which means all data processing, filtering, sorting, paging etc is done on the server. DataTables in that mode is simply an event handler and display controller.
It very much does sound like you just want client-side processing with different data.
I would need to know what the error is when you disable server-side processing to be able to offer any assistance, since I don't know what the problem is just now (other than that it doesn't work).
Alright, after some more fighting with myself I've managed to resolve all my issues (well, the one regarding malfunctioning brain is still unresolved).
First of all - there is nothing wrong with the plugin. I suspect Allan tends to think so himself, but when one blind man begins seeing things I say the things look like Allan meant them to look apparently. :)
I used to have fnRowCallback function to build filter margin values (min/max price) and it worked just fine before the update because this callback have been called before filtering apparently. My page uses some additional brain-damaged logic, that caused some confusion as well. Eventually I replaced fnRowCallback with fnCreatedRow, and added data length check to fnDrawCallback so my filter values wouldn't be recalculated during initial rendering when the table contains no records.
And that's basically it. Please accept my apologies for taking quite a lot of your time for reading of my wrong-way thinking process during my "investigation". I feel quite embarassed now because all this shouldn't have taken so much time :(
Not at all - its actually very useful for me and I'm sorry it cost you time. I'm in the process of planning new documentation for DataTables, and this is exactly the kind of conversation that will help improve the documentation because I know I need to make it clearer. And I will certainly do so in the area od data sources for the table!
Excellent to hear that you how have a working solution!
I use jQuery 1.10.2. It's fine.
But, when I load ajax I met a problem. Please help me solve it.
File: test.php:
[code]
click here to load dataTable by ajax
$(document).ready(function(){
$("a[rel='ajax']").click(function(e){
//get the link location that was clicked
pageurl = $(this).attr("href");
pageurl="ajax_test.php";
//to get the ajax content and display in div with id "content"
$.ajax({
type: "POST",
url:pageurl,
data: {load: "ajax"},
success: function(msg){
$("#test").empty();
$("#test").prepend(msg);
}});
return false;
});
});
[/code]
And this's ajax_test.php
[code]
echo '
#
Title
Image
1
test
2
Test2
#
Title
Image
';
[/code]
I only load data, but I can't load function search and sort.
How to solve this issue?
Hi, Allan.
This's my demo: http://letdesign.net/thmadmin/test.html
This's only 2 files html: test.html and ajax_test.html
when I run test.html. It's ok. But when I press Dashboard to load ajax file ajax_test.html. It lose function search and function sort.
Thank you for the link. It looks like you are replacing the HTML of the content frame, including the DataTable. You would need to initialise a new DataTable if you do that (and ideally destroy the old one before removing it from the document).
Replies
Allan
Just a thought...
Check on 'live' events. It is not supported anymore instead you have to use on / delegate.. I believe you were aware of it.
I don't have a test page accessible outside our firewall. I may be able to get something up next week.
girishmr:
I was updating from jquery-1.7.2. I tried using the jquery-migrate -- that didn't output any migration errors. I know that jquery 1.10 has lots of changes, including some in ajax. What was odd to me was that the server side wasn't changing, firebug showed the client getting the same json, but datatables just said "processing". There were no errors in the error console, so I was at a loss as to how to debug.
I'm going to try to take it step by step. First jquery-ui from 1.8.20 to 1.9.2. If that works, then I can add the feature that I need, and circle back to the upgrade after I push that to production.
Allan
I ran into the same issue today. We're currently moving to 1.10.2 jquery version (up from 1.7.1).
We use only 2 datatables through the project, both were written at different times (in a bit different ways).
The latter works fine after upgrade, and this one is simple ajax-source datatable without any additional logic.
The problem exists with the former.
Here is what I've been able to figure out so far:
Initially it just didn't want to populate data within the table even though ajax call has been returning valid data set.
Eventually I fixed this particular problem by adding bServerSide: true option.
Not sure if it is of any help for you, but it worked before upgrade, and it works at the moment on live server. I may provide you a link/way to get to the page where you will see the table itself if you need it. Note though that it still uses older version of jQuery, and it won't produce this error.
Further details: after fixing initial loading problem, it seems that fnDraw() method does not redraw/filter the table anymore.
After some digging I've come to conclusion that afnFiltering array isn't being used either.
Here is the code of ajax reload method (Found it from somewhere more then year ago, so might be that it's obsolete by now):
[code]if (typeof $.fn.dataTableExt != 'undefined') {
$.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 */
for (var i = 0; i < json[oSettings.sAjaxDataProp].length; i++) {
that.oApi._fnAddData(oSettings, json[oSettings.sAjaxDataProp][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);
}
}[/code]
TL;DR
The issues are:
- fnDraw() doesn't seem to redraw the table after the new data is loaded.
- afnFiltering array isn't being used either.
I can provide a link (rather a way to get there since link is session-bound) to see current (working) unupdated datatable, it might give some ideas on what may be wrong there.
There are 2 main scenarios:
- when user changes the date in datepicker, the new data is requested (and received from the server), but the table rows aren't redrawn.
- when the user alters the filter above the table (time interval or price) it simply calls fnDraw(), and "Processing" label does not disappear afterwards, as well as the contents of the table remain unchanged.
Console reports no javascript errors whatsoever.
Tested in Firefox 24.0 and Chrome 30.0.1599.69 m. Both do the described above.
Thanks for your attention. Looking forward your help. Going to keep digging and will tell you if anything else becomes clear.
Older version of datatables (1.8.1) runs through afnFiltering with bServerSide: true while 1.9.4 only runs it if bServerSide: false (with all honesty it should run it regardless bServerSide value in my opinion). ATM I found an "okey"-workaround for my case to call oApi._fnFilterCustom before fnDraw(). fnDraw() itself doesn't work yet (in both versions, I blame jQuery for it :D ), so I'm not yet sure if results filtered this way will be taken into account while while drawing.
I will update you later if anything worthy will be found.
Filtering, when server-side processing is enabled, is done by the server. There is no benefit in running the client-side code, so the newer versions don't as an optimisation.
Are you able to link me to your page please, so I can see exactly what is happening and what is going wrong.
Allan
The last problem left - I need both server side and client side processing
- load data from server and update it when requested
- filter data on client side
_fnAjaxUpdateDraw() does not allow to perform client side filtering (or I don't see the way it allows to).
And the last question is - is there a way to redraw the table without requesting server side (with bServerSide = true)?
Using jquery 1.7.1 (and 1.8.1 version of datatables) allows this by not specifying bServerSide. Everything works the way it is expected (by me). fnDraw() calls do not trigger http requests.
After jquery upgrade to 1.10.2 (regardless of datatables version) I was forced to specify bServerSide, otherwise table shows no-rows message after xmlhttp request is performed. Not sure if it works as intended or not.
Thank you in advance. Looking forward your answers.
You'll have to fill the search form here: https://www.russiantrains.com/en/trains/order
Moscow - Saint Petersburg route will work. The result page will contain the datatable, calender and a small filter.
My development version has been changed quite a bit, and this datatable was an experiment for me, so I'm pretty sure it may have some bad mistakes.
Logic of the page is following at the moment:
1. Data is loaded via ajax upon page load and when the date is picked in datepicker.
2. Client side filter is applied to this data.
3. When the filter is changed, data is filtered again on client side without ajax request.
The last problem left - I need both server side and client side processing
- load data from server and update it when requested
- filter data on client side
[/code]
you can't have both - you can load Ajax data from the server and use client-side processing, but you can't have server-side processing and client-side processing at the same time (I don't understand why you would want both actually :-) ).
The fnReloadAjax plug-in might be of use to you: http://datatables.net/plug-ins/api#fnReloadAjax - is that what you want? Reload the data from the server based on search information, while keeping filtering and sorting done on the client-side?
Allan
Well, it's quite simple... The data in table referenced above is always quite small (without applying the filter), but it costs server resources. It makes client side filtering and sorting actually very-very reasonable, because
- it allows to decrease server load
- it speeds up filtering overall because of ajax request absence
[quote]The fnReloadAjax plug-in might be of use to you: http://datatables.net/plug-ins/api#fnReloadAjax - is that what you want? Reload the data from the server based on search information, while keeping filtering and sorting done on the client-side?[/quote]
fnReloadAjax is currently used on live server. It's exactly what I want, but once I upgraded jquery bServerSide: false doesn't seem to allow loading data from remote source anymore. I believe it only means server side filtering/sorting, which I'm eager to get rid off, but can't. Maybe it is a reason of my failure on this part.
bServerSide enabled server-side processing which means all data processing, filtering, sorting, paging etc is done on the server. DataTables in that mode is simply an event handler and display controller.
It very much does sound like you just want client-side processing with different data.
I would need to know what the error is when you disable server-side processing to be able to offer any assistance, since I don't know what the problem is just now (other than that it doesn't work).
Allan
First of all - there is nothing wrong with the plugin. I suspect Allan tends to think so himself, but when one blind man begins seeing things I say the things look like Allan meant them to look apparently. :)
I used to have fnRowCallback function to build filter margin values (min/max price) and it worked just fine before the update because this callback have been called before filtering apparently. My page uses some additional brain-damaged logic, that caused some confusion as well. Eventually I replaced fnRowCallback with fnCreatedRow, and added data length check to fnDrawCallback so my filter values wouldn't be recalculated during initial rendering when the table contains no records.
And that's basically it. Please accept my apologies for taking quite a lot of your time for reading of my wrong-way thinking process during my "investigation". I feel quite embarassed now because all this shouldn't have taken so much time :(
Thanks for your help.
Excellent to hear that you how have a working solution!
Allan
But, when I load ajax I met a problem. Please help me solve it.
File: test.php:
[code]
click here to load dataTable by ajax
$(document).ready(function(){
$("a[rel='ajax']").click(function(e){
//get the link location that was clicked
pageurl = $(this).attr("href");
pageurl="ajax_test.php";
//to get the ajax content and display in div with id "content"
$.ajax({
type: "POST",
url:pageurl,
data: {load: "ajax"},
success: function(msg){
$("#test").empty();
$("#test").prepend(msg);
}});
return false;
});
});
[/code]
And this's ajax_test.php
[code]
echo '
#
Title
Image
1
test
2
Test2
#
Title
Image
';
[/code]
I only load data, but I can't load function search and sort.
How to solve this issue?
Allan
sorry again. Thanks!
This's my demo: http://letdesign.net/thmadmin/test.html
This's only 2 files html: test.html and ajax_test.html
when I run test.html. It's ok. But when I press Dashboard to load ajax file ajax_test.html. It lose function search and function sort.
Allan
Allan
I have just solved this issue.