Changes do not commit

zchapple

Hello everyone. I have been struggling with this issue and even after googling and trying to find it on this forum I am having a hard time finding an answer.

What I am trying to do is the following:
Show all rows in the HTML table.
Table has three columns a name column and two Value rows. [Name] [Production Value] [Test Value]
Change Colors based on values in the row. I want to set a value for current version of pPoduction and if the row does not have that version of Production it will turn red (gradeX in my CSS) if the Test Value is on the current version I want the row to turn blue (gradeC) if Both Production and Test are on the right values then I want to turn Green (gradeA).

So far when I click on the cells it shows as editable, it allows me to change the values, when I hit enter it acts like it is editing the page, however when I refresh the page is not edited.

Also I cannot get the display all rows to play nicely with the jeditable.
[code]

@import "DataTables/media/css/demo_page.css";
@import "DataTables/media/css/demo_table.css";





//editable.
$(document).ready(function() {

//Show all rows.
//"aLengthMenu": [[10, 20, 50, -1], [10, 20, 50, "All"]]
/* Init DataTables */
var oTable = $('#example').dataTable();

//New coloring
$('td:contains("2009")').parent().addClass('gradeX'); //Red
$('td:contains("2008")').parent().addClass('gradeX'); //Red
$('td:contains("2007")').parent().addClass('gradeX'); //Red
$('td:contains("2010.1.012")').parent().addClass('gradeX'); //Red
$('td:contains("2010.1.021")').parent().addClass('gradeX'); //Red
$('#Test:contains("2010.1.023")').parent().addClass('gradeA'); //Green
//$('td:contains("2007")').parent().addClass('gradeU'); //Grey
//$('td:contains("2008")').parent().addClass('gradeC'); //Blue
//end New
/* Apply the jEditable handlers to the table */
$('td', oTable.fnGetNodes()).editable( 'DataTables/media/js/editable_ajax.php', {
"callback": function( sValue, y ) {
var aPos = oTable.fnGetPosition( this );
oTable.fnUpdate( sValue, aPos[0], aPos[1] );
},
"submitdata": function ( value, settings ) {
return {
"row_id": this.parentNode.getAttribute('id'),
"column": oTable.fnGetPosition( this )[2]
};
},
"height": "14px"
} );
} );

[/code]
Here is a example of table data in the same page as the above code. Current production value is 2010.1.023. So this row should be blue. However with my current code it turns green.
[code]
Customer 1
2010.1.011
2010.1.023
[/code]
Here is my editable_ajax.php.
[code]
<?php
echo $_POST['value'].' (Customer Updated)';
?>

[/code]

allan

Hi zchapple,

This is from a _really_ old example of mine (DataTables 1.3... - http://www.sprymedia.co.uk/article/DataTables ) but the basic idea still holds true. This is the code which is used:

[code]
$(document).ready(function() {
$('#example').dataTable( {
"fnRowCallback": function( nRow, aData, iDisplayIndex ) {
/* Append the grade to the default row class name */
nRow.className = nRow.className + aData[4];
return nRow;
},
"aoData": [
/* Engine */ null,
/* Browser */ null,
/* Platform */ { "bVisible": false, "bSearchable": false },
/* Version */ { "sClass": "center" },
/* Grade */ { "sClass": "center" }
]
} );
} );
[/code]
So using fnRowCallback ( http://datatables.net/usage/callbacks#fnRowCallback ) it modifies the class of the TR row based on the data - which sounds like exactly what you want. It looks like you are fairly close with your code already - try the above, and add in aLengthMenu, and hopefully that should do it!

Allan

zchapple

Allan,

I think we are getting closer. I am unsure how to make it switch classes based on a pre-established value. Here is what I did so far. I added the alength and changed column names.
[code]

$(document).ready(function() {
$('#example').dataTable( {

"fnRowCallback": function( nRow, aData, iDisplayIndex ) {
/* Append the grade to the default row class name */
nRow.className = nRow.className + aData[4];
return nRow;
},

"aoData": [
/* Customer Name */ { "bVisible": true, "bSearchable": true },
/* Version on Production */ { "sClass": "center" },
/* Version on Test */ { "sClass": "center" }
]

"aLengthMenu": [
[10, 20, 50, -1], [10, 20, 50, "All"]
]

} );
} );

[/code]

The only parts left is to make it color code and editable. If Production and Test Column match my variable I want it to turn Green if only Test matches the vairable I want it to turn Blue. If neither match I want it to turn red.

When I tried using the following in my first example if the td contained the 2010.1.023 at all it would turn the whole row green. However if the Production value was different I would not want it to do this.
[code]
$('td:contains("2010.1.023")').parent().addClass('gradeA'); //Green
$('td:contains("2007")').parent().addClass('gradeX'); //Red
$('td:contains("2007")').parent().addClass('gradeU'); //Grey
$('td:contains("2008")').parent().addClass('gradeC'); //Blue
[/code]

Lastly when I try to make it editable by adding the following after the alength nothing happens.
[code]
/* Apply the jEditable handlers to the table */
$('td', oTable.fnGetNodes()).editable( 'DataTables/media/js/editable_ajax.php', {
"callback": function( sValue, y ) {
var aPos = oTable.fnGetPosition( this );
oTable.fnUpdate( sValue, aPos[0], aPos[1] );
},
"submitdata": function ( value, settings ) {
return {
"row_id": this.parentNode.getAttribute('id'),
"column": oTable.fnGetPosition( this )[2]
};
},
"height": "14px"
} );
[/code]

Is there a specific spot where I need to add the above snippet. Thank you in advance. I really do appreciate your help.

allan

Firstly there is a syntax error with aLengthMenu - the code highlighting above indicates where :-). That will be causing a JS error.

For your row callback function you need to integrate the logic you had before for the adding of classes. However I'm working if that is the best approach - it would happen on every draw, which might not be needed. If you don't initialise the DataTable, does your class adding code work as expected? If so, just move the DataTables initialisation after you've done that bit. Otherwise you could move it into fnRowCallback - although you'll need to change the logic from what I had in my example (which was very specific to my demo), to be suitable for your own. Something like: $('td:contains("2009")', nRow).parent().addClass('gradeX');

Allan

zchapple

Allan,

I tried putting the following in the fnRowCallback block (before and after the return nRow;) this did not trigger the coloring, I did this after commenting out the entire aoData block. I also tried putting it in the aoData block after commenting out the previously used 3 lines. This also did not trigger the coloring. Am I just putting it in the wrong place?
[code]$('td:contains("2009")', nRow).parent().addClass('gradeX');[/code]

Also I changed the aLengthMenu to the following
[code]"aLengthMenu": [
{10, 20, 50, -1}, {10, 20, 50, "All"}
]
[/code] My notepad ++ does not show any errors on it and I do not see anything flagging in code highlighting am I still missing something or did the changing of [] to {} resolve that part of the issue?

allan

Use this for aLengthMenu (you were missing a " before - it should have thrown a Javascript error - are you using Firebug or something similar?):

[code]
"aLengthMenu": [
[10, 20, 50, -1], [10, 20, 50, "All"]
]
[/code]
Sorry I missed this one earlier - aoData is not an initialisation property of DataTables. You might be looking for either aaData to pass in data to be displayed or more likely aoColumns for defining the behaviour of columns.

If you comment out DataTables all together - does your original highlighting work? All this stuff: $('td:contains("2009")').parent().addClass('gradeX'); ?

Allan

zchapple

Allan, I corrected the alengthmenu. When I use the following I can get some of the coloring to work, but not as I desire, and the cells appear editable, however then I try to commit the changes the cell changes but when I refresh the changes do not stick.
[code]
//editable.
$(document).ready(function() {

//Show all rows.
//"aLengthMenu": [[10, 20, 50, -1], [10, 20, 50, "All"]]
/* Init DataTables */
var oTable = $('#example').dataTable();

//New coloring
$('td:contains("2009")').parent().addClass('gradeX'); //Red
$('td:contains("2008")').parent().addClass('gradeX'); //Red
$('td:contains("2007")').parent().addClass('gradeX'); //Red
$('td:contains("2010.1.012")').parent().addClass('gradeX'); //Red
$('td:contains("2010.1.021")').parent().addClass('gradeX'); //Red
//$('td:contains("2007")').parent().addClass('gradeU'); //Grey
//$('td:contains("2008")').parent().addClass('gradeC'); //Blue
//end New
/* Apply the jEditable handlers to the table */
$('td', oTable.fnGetNodes()).editable( 'DataTables/media/js/editable_ajax.php', {
"callback": function( sValue, y ) {
var aPos = oTable.fnGetPosition( this );
oTable.fnUpdate( sValue, aPos[0], aPos[1] );
},
"submitdata": function ( value, settings ) {
return {
"row_id": this.parentNode.getAttribute('id'),
"column": oTable.fnGetPosition( this )[2]
};
},
"height": "14px"
} );
} );
[/code]

allan

> When I use the following I can get some of the coloring to work, but not as I desire

Does it work if you disable DataTables? You might need to use fnGetNodes to get all the TR elements and apply your query to that.

> I try to commit the changes the cell changes but when I refresh the changes do not stick.

Where is that data coming from - I presume a database? Are you doing an UPDATE on the database with the information? In your first post you have your ditable_ajax.php which just echos the string back - are you saving the string somewhere to replace the original?

Allan

zchapple

Allan,

The data is actually HTML tables within the page. Would that be the issue?

I have never been able to make the coloring work with if clauses. I can make it color a row based on one value, but no if then statements.

allan

> The data is actually HTML tables within the page. Would that be the issue?

Okay - so when the page is reloaded the original table is being loaded into the page again - hence why there is no saving of the original data. If you want it to be saved, you'll need to actually action that on the server (writing the file, updating a database whatever - there are many ways to do it, but it falls outside of the role of DataTables, as a client-side program, for that to be done). The PHP script is a starting point to show where the data is coming in - but in order to maintain it, it needs to be saved somewhere.

> if clauses

It doesn't look to me that the :contains selector matches on text from the jQuery docs: http://api.jquery.com/jQuery.contains/ .

I think you need something more like:

[code]
$('td').each( function () {
if ( this.innerHTML.indexOf('2009') != -1 ) {
$(this).parent().addClass('gradeX');
}
} );
[/code]
Allan

zchapple

Allan,

That is much closer, now the problem is two parts.

1) Where should I add [code] "aLengthMenu": [
[10, 20, 50, -1], [10, 20, 50, "All"]
]
[/code]
It seems everywhere I add it, it breaks the coloring.
[code]//editable.
$(document).ready(function() {

/* Init DataTables */
var oTable = $('#example').dataTable();

//New coloring
$('td').each( function () {
if ( this.innerHTML.indexOf('2010.1.023') != -1 ) {
$(this).parent().addClass('gradeA');
}
} );
$('td').each( function () {
if ( this.innerHTML.indexOf('2010.1.021') != -1 ) {
$(this).parent().addClass('gradeX');
}
} );
$('td').each( function () {
if ( this.innerHTML.indexOf('2010.1.012') != -1 ) {
$(this).parent().addClass('gradeX');
}
} );
$('td').each( function () {
if ( this.innerHTML.indexOf('2009') != -1 ) {
$(this).parent().addClass('gradeX');
}
} );
$('td').each( function () {
if ( this.innerHTML.indexOf('2007') != -1 ) {
$(this).parent().addClass('gradeX');
}
} );
$('td').each( function () {
if ( this.innerHTML.indexOf('8.0.015') != -1 ) {
$(this).parent().addClass('gradeX');
}
} );
/* Apply the jEditable handlers to the table */
$('td', oTable.fnGetNodes()).editable( 'DataTables/media/js/editable_ajax.php', {
"callback": function( sValue, y ) {
var aPos = oTable.fnGetPosition( this );
oTable.fnUpdate( sValue, aPos[0], aPos[1] );
},
"submitdata": function ( value, settings ) {
return {
"row_id": this.parentNode.getAttribute('id'),
"column": oTable.fnGetPosition( this )[2]
};
},
"height": "14px"
} );
} );[/code]

2) Is there a way to just do a if / else? I would rather do that then having to list out ever other option available.

allan

[code]
//editable.
$(document).ready(function() {

//New coloring
$('td').each( function () {
if ( this.innerHTML.indexOf('2010.1.023') != -1 ) {
$(this).parent().addClass('gradeA');
}
} );
$('td').each( function () {
if ( this.innerHTML.indexOf('2010.1.021') != -1 ) {
$(this).parent().addClass('gradeX');
}
} );
$('td').each( function () {
if ( this.innerHTML.indexOf('2010.1.012') != -1 ) {
$(this).parent().addClass('gradeX');
}
} );
$('td').each( function () {
if ( this.innerHTML.indexOf('2009') != -1 ) {
$(this).parent().addClass('gradeX');
}
} );
$('td').each( function () {
if ( this.innerHTML.indexOf('2007') != -1 ) {
$(this).parent().addClass('gradeX');
}
} );
$('td').each( function () {
if ( this.innerHTML.indexOf('8.0.015') != -1 ) {
$(this).parent().addClass('gradeX');
}
} );

/* Init DataTables */
var oTable = $('#example').dataTable({"aLengthMenu": [
[10, 20, 50, -1], [10, 20, 50, "All"]
]
});

/* Apply the jEditable handlers to the table */
$('td', oTable.fnGetNodes()).editable( 'DataTables/media/js/editable_ajax.php', {
"callback": function( sValue, y ) {
var aPos = oTable.fnGetPosition( this );
oTable.fnUpdate( sValue, aPos[0], aPos[1] );
},
"submitdata": function ( value, settings ) {
return {
"row_id": this.parentNode.getAttribute('id'),
"column": oTable.fnGetPosition( this )[2]
};
},
"height": "14px"
} );
} );
[/code]
Try that.

> Is there a way to just do a if / else? I would rather do that then having to list out ever other option available.

Yes - just put it in the loop. It will be a heck of a lot faster.

Allan

zchapple

Allan,

When I use the above code, the entire page shows as one, however all the coloring is gone. It is just black text on a white background.

allan

Sorry I introduced a JS error - which should have shown up in Firebug (or similar). I've just edited the code above to fix it.

Allan

zchapple

Allan, I used the above code, the coloring works but the table still displays 10 rows initially. This is a odd combination of features I think. I think I might have to switch to using mysql to get the values to update. I am not able to find anything that can edit the html table if it is already in the page.

allan

I'm surprised that it only works on the first ten rows, since DataTables hasn't been initialised when it does the colouring above. Does it work as expected if you don't include DataTables?

Allan

zchapple

The table only displays the first 10 rows, which are colored correctly. If I used the datatables dropdown to bring it to 100 rows the coloring is all red after the first 10 rows, red is the classX. I think its interesting that it is still only displaying 10 rows initially.

allan

I'm afraid I'm getting a little lost - it is only displaying 10 rows when DataTables is enabled, on initialisation, because that is the DataTables default. Using iDisplayLength can change that.

If you disable DataTables, does colour the rows correctly? Can you give us a link please?

Allan

zchapple

Allan,

I am back from China (I went on vacation).

I have decided to take a new crack at this and basically started from scratch. I have the tables setup the way I want except for the coloring and the editable part. It seems when I try to convert it to the editable table it either breaks what I had going or it just does not allow editing. Here is what I have going right now.
[code] $(document).ready(function() {
$('#example').dataTable( {
"bProcessing": true,
"bServerSide": true,
"bJQueryUI": true,
"iDisplayLength": -1,
"aLengthMenu": [[10, 25, 50, -1], [10, 25, 50, "All"]],
"sAjaxSource": "IRTHNetVersionTracking/server_processing.php",
"aoColumns": [
{ "sClass": "center" },
{ "sClass": "center" },
{ "sClass": "center" },
{ "sClass": "center" },
{ "sClass": "center" },
{ "sClass": "center" }
]
}).makeEditable({
sUpdateURL: 'IRTHNetVersionTracking/editable_ajax.php'
} );
} );[/code]

The above code "works" in the sense that everything displays as expected, however when I click in the cells I am just highlighting text, the cell does not become editable. Am I missing something?