Image click not generating row data
Image click not generating row data
Overview:
Application loads datatable. In each row there is a set of three images in the first cell (edit, delete,details). User clicks on the edit image and it brings up a jquery.ui modal window for editing the data. User saves data and the table is updated after successful update of the database using ajax call.
Problem:
Have to capture the row when the edit image is clicked. When the user presses the modal submit I have to replace the row.
Code:
The capture the click function
[code]
$('img.edit').die('click'); // disable all live
$('table td img.edit').live('click', function() { // set the live items in the table
$('#loading').show(); // loading image
alert((this).cellIndex()); // debug statement
var aPos = oTable.fnGetPosition( (this).cellIndex() ); // attempt to get the TR for later update
alert(aPos); // debug statement
var data = {'qid' : $(this).attr('id') , 'sla': $("#sla").val() }; // data to be sent back to ajax that loads the modal
var qid = $(this).attr('id'); // save the ID for display
$('#edit').load( // call the ajax to get the edit record
'a_questionrec.php',
data,
function (responseText, textStatus, XMLHttpRequest) {
$('#edit').html(responseText); // load the code to the dialog div
$('#edit').dialog( "option", "width", 660 ); // set up the dialog div
$('#edit').dialog( "option", "title", "Edit Question ID: "+qid ); // set the dialog divs title
$('#edit').dialog('open'); // open the dialog div
$('#loading').hide(); // hide the loading image
loadcke($("#sla").val()); // CKEditor crap that has to be called here to work around a CKEditor bug
}
);
});
[/code]
The problem is that I don't seem to get the aPos so when I call this it doesn't update the row
[code]
function showResponse1(responseText, statusText) {
alert('Start Load'); // debug
var tstring = responseText.split('~$~'); // split the response string
alert(tstring[1]); // debug
var rows = $.evalJSON(tstring[1]); // we got a string, turn it into a json object
oTable.fnUpdate(rows,aPos,0,1); // rewrite the row in the datatable with the new data
alert( 'done' ); // debug
}
[/code]
Now I know that everything was sort of working because I was using oTable.fnAddData(rows); and it was adding the new row to the end of the table. The problem comes with the need to not add the row, but overwrite the old row with the new data.
Any help would be appreciated as this is the last piece before I deliver the application to the customer. Thanks.
Application loads datatable. In each row there is a set of three images in the first cell (edit, delete,details). User clicks on the edit image and it brings up a jquery.ui modal window for editing the data. User saves data and the table is updated after successful update of the database using ajax call.
Problem:
Have to capture the row when the edit image is clicked. When the user presses the modal submit I have to replace the row.
Code:
The capture the click function
[code]
$('img.edit').die('click'); // disable all live
$('table td img.edit').live('click', function() { // set the live items in the table
$('#loading').show(); // loading image
alert((this).cellIndex()); // debug statement
var aPos = oTable.fnGetPosition( (this).cellIndex() ); // attempt to get the TR for later update
alert(aPos); // debug statement
var data = {'qid' : $(this).attr('id') , 'sla': $("#sla").val() }; // data to be sent back to ajax that loads the modal
var qid = $(this).attr('id'); // save the ID for display
$('#edit').load( // call the ajax to get the edit record
'a_questionrec.php',
data,
function (responseText, textStatus, XMLHttpRequest) {
$('#edit').html(responseText); // load the code to the dialog div
$('#edit').dialog( "option", "width", 660 ); // set up the dialog div
$('#edit').dialog( "option", "title", "Edit Question ID: "+qid ); // set the dialog divs title
$('#edit').dialog('open'); // open the dialog div
$('#loading').hide(); // hide the loading image
loadcke($("#sla").val()); // CKEditor crap that has to be called here to work around a CKEditor bug
}
);
});
[/code]
The problem is that I don't seem to get the aPos so when I call this it doesn't update the row
[code]
function showResponse1(responseText, statusText) {
alert('Start Load'); // debug
var tstring = responseText.split('~$~'); // split the response string
alert(tstring[1]); // debug
var rows = $.evalJSON(tstring[1]); // we got a string, turn it into a json object
oTable.fnUpdate(rows,aPos,0,1); // rewrite the row in the datatable with the new data
alert( 'done' ); // debug
}
[/code]
Now I know that everything was sort of working because I was using oTable.fnAddData(rows); and it was adding the new row to the end of the table. The problem comes with the need to not add the row, but overwrite the old row with the new data.
Any help would be appreciated as this is the last piece before I deliver the application to the customer. Thanks.
This discussion has been closed.
Replies
First the solution...
[code]
$('img.edit').die('click');
$('#qtable tbody tr img.edit').live('click', function(e) {
$('#loading').show();
var nTr = $(this).closest("tr").get(0); // key line that gets the closest TR
aPos = oTable.fnGetPosition( nTr ); // gets the position
var data = {'qid' : $(this).attr('id') , 'sla': $("#sla").val() };
var qid = $(this).attr('id');
$('#edit').load(
'a_questionrec.php',
data,
function (responseText, textStatus, XMLHttpRequest) {
$('#edit').html(responseText);
$('#edit').dialog( "option", "width", 660 );
$('#edit').dialog( "option", "title", "Edit Question ID: "+qid );
$('#edit').dialog('open');
$('#loading').hide();
loadcke($("#sla").val());
}
);
});
//
[/code]
If you are going to use aPos outside of the functions you must declare it as a global variable outside the scope of the function.
Now on to the second challenge.
[code]
function showResponse1(responseText, statusText) {
alert('Start Load'); // debug
var tstring = responseText.split('~$~'); // break up the response
alert(tstring[1]); // the replacement string debug
oTable.fnUpdate(tstring[1],aPos,0,1); // update the row
alert( 'done' ); // debug
}
[/code]
So, the above should update the row with the new row.
The value of tstring[1] is:
[' ' ,'103','1093. IF B - K = B, then what is the value of K? 111',' (62. 1 step ae) ','[ISEE] [SSAT] ','[5] ','','activeq','43','85']
It is 10 fields (same as the table).
CHALLENGE: When it does the update it puts the entire string into the first field rather than loading each string into the appropriate field.
Suggestions?
[code]
function showResponse1(responseText, statusText) {
var tstring = responseText.split('~$~'); // split the response
var rows = tstring[1].split('~!~'); // split the returned string into an array of strings
oTable.fnUpdate(rows,aPos,0,0); //pass the array of strings to the oTable for update
}
[/code]
Had to change the return string to a parse-able string.
~!~10~!~1002. Remainder.~!~ (15. mult div) ~!~[ISEE] ~!~[6] [8] ~!~~!~activeq~!~2~!~
Had to remove all font's etc from the string and apply them via CSS (was going to do that anyway, this just necessitated that).