Columns shrink on every click

asarkar

When using, "bDestroy": true, the table shrinks in width on every click. It doesn't happen if I remove bDestroy and use the JS API fnClearTable, fnAddData and fnDraw. Sorry, I don't have a JS Fiddle to demonstrate this but the problem can be reproduced by following the steps below:

[code]
git clone https://github.com/abhijitsarkar/groovy.git
git checkout 8d277413dec8b8de91159f48eef4d4c09add8332
[/code]

Then from the root directory (movie-database):
[code]
./gradlew clean bootRun (omit the ./ if Windows)
[/code]

When you see the message "Started MovieDatabaseApplication in x seconds", open your browser and go to http://localhost:8080.
In the text field, enter the absolute path to movie-database/movie-database-integ-test/src/test/resources/movies
Select the radio button POST.
Press Index.

Now, in the text field, type http://localhost:8080/movies
Select the radio button GET.
Press Search.

If you keep on pressing search button, you'll see each time the table shrinks in size. Using DataTable 1.9.4 with jQuery 2.1.0.

allan

Can you try using DataTables 1.10 and its CSS please? If that doesn't work, can you link to a test case?

Thanks,
Allan

asarkar

Sorry for the late response, I was out of town.
I can't get the following code to work with 1.10.0-beta.2. I keep getting an error "undefined is not a function" on the first line. Works fine (using old variable names) with 1.9.4.
I'm using requireJS if that matters but as I said, it works with 1.9.4.

[code]
jquery('.searchResults').dataTable({
"data": data,
"columns": [
{ "data": "title" },
{ "data": "genres" },
{ "data": "releaseDate" }
],
"columnDefs": [
{
"targets": [1],
"render": formatGenres
},
{
"targets": [2],
"render": formatReleaseDate
}
],
"destroy": true
});
[/code]

allan

I'd need a test case please. The code looks like it should work just fine.

One thing:

> jquery

Unless you are aliasing it- it should be `jQuery` ...

Allan

asarkar

JS is not my forte and it might take me a while to come up with unit test cases that run outside the application. Can you not follow the instructions in my post above and reproduce the problem? If you are willing to, I can commit the code in the broken state.

allan

To recreate a test case, I would need to know what the values of `data` , `formatGeneres` and `formatRelaseDate` are. With those value it would just just a few minutes for me (or you) to create a test case using http://live.datatables.net .

Also, given that you note the error is not he first line, it means either `jquery` is not a function (which it isn't unless you've created just a variable, as I mentioned before), or that `$().dataTable()` is not a function. That likely means there is not an error in the script above, but somewhere else on the page. But without a test case... I've no idea what it would be!

Allan

asarkar

config.js
[code]
requirejs.config({
"paths": {
"jquery": "//code.jquery.com/jquery-2.1.0.min",
"dataTables": "//cdn.datatables.net/1.10.0-beta.2/js/jquery.dataTables",
"lib": "./lib",
"app": "./app"
}
});

requirejs(["app/main"]);
[/code]

app/main.js
[code]
require(["jquery", "dataTables"], function(jquery, dataTables) {

function setUpDefaults() {
jquery("#get").prop("checked", true);
jquery(".url").attr("placeholder", "URL");
jquery(".go").val("Search");
}

setUpDefaults();

jquery(":radio").click(function() {
var getRequest = jquery("#get").is(":checked");
var goVal = getRequest ? "Search" : "Index";

jquery(".go").val(goVal);
});

function createNewTable(data) {
function formatGenres(genres, type, row) {
return genres.join(",");
}

function formatReleaseDate(releaseDate, type, row) {
var jsDate = new Date(releaseDate);

return jsDate.getFullYear();
}

jquery('.searchResults').dataTable({
"data": data,
"columns": [
{ "data": "title" },
{ "data": "genres" },
{ "data": "releaseDate" }
],
"columnDefs": [
{
"targets": [1],
"render": formatGenres
},
{
"targets": [2],
"render": formatReleaseDate
}
],
"destroy": true
});
}

function displayResults(data) {
createNewTable(data);
}

jquery("form").submit(function(event) {
var getRequest = jquery("#get").is(":checked");

var type = getRequest ? "GET" : "POST";
var url = getRequest ? jquery(".url").val() : "http://localhost:8080/movies";
var data = getRequest ? {} : { "dir" : jquery(".url").val() };
var contentType = getRequest ? "application/json; charset=UTF-8"
: "application/x-www-form-urlencoded; charset=UTF-8";
var dataType = "json";

function success(data, textStatus, jqXHR) {
jquery(".searchResults").show();

displayResults(data);
}
function error(jqXHR, textStatus, errorThrown) {
jquery(".searchResults").hide();
alert(textStatus);
}

jquery.ajax({
contentType: contentType,
data: data,
dataType: dataType,
error: error,
success: success,
type: type,
url: url
});

return false;
});
});
[/code]

asarkar

Here's an example of data:
[code]
[
{
"title":"The Terror Live",
"genres":[
""
],
"releaseDate":1357016400000,
"director":{
"name":""
},
"stars":[

],
"imdbRating":0.0,
"imdbURL":null,
"fileSize":0,
"fileExtension":null,
"parent":null
}
]
[/code]

allan

As I say, I'd need a link to a test case, not just the code.

Allan

asarkar

As I said, I don't know how to create a test case. I created a JSFiddle that demonstrates the problem.
http://jsfiddle.net/D2ngE

allan

A JSFiddle that runs is a test case :-). However, your JSFiddle doesn't run - it just gives me a Javascript error about DataTables not existing. If I add DataTables then it appears to initialise okay, but doesn't show the error you are seeing, presumably due to styling: http://jsfiddle.net/D2ngE/1/ .

Allan

asarkar

Glad that I could provide what you were looking for. I did include the CDN URL in the "External Resources" of the fiddle, but I don't see it now.
I see you included a file in your fiddle. It doesn't have a version but going by the attribute names, I'm assuming that's 1.9.x. Can you try that with v10, where the problem exists? 1.9.x always worked for me.

allan

I included the nightly file which is 1.10. If you open the linked file you'll see the version information at the top: http://datatables.net/download/build/nightly/jquery.dataTables.js .

Allan

asarkar

So the old attributes work with 1.10 too?
I'm at a loss here. My code works with 1.9.x. As soon as I replace that with 1.10.x, I get the error "undefined is not a function". It seems like $('.searchResults').dataTable is undefined though I've no idea why it'd be with a certain version.

allan

I'd really like to be able to offer some help, but without being able to see the error, I really don't know what is fusing it and so can't advise on how it should be fixed.

Allan