Force a refresh after return from UI Dialog

JasonD

Thanks for a fantastic project!

I do have a couple of questions I'm hoping someone can help me shed some light on. I have successfully integrated this context menu (http://abeautifulsite.net/2008/09/jquery-context-menu-plugin/) so that when I right-click on a row I have several options available for the row (edit, delete, etc.). Each of these options shows a jQuery UI dialog and performs some action. This all works very nicely. However, I would like to force a refresh of the data when I close the dialog box.

I am using server-side AJAX calls and have tried adding the line "oTable.fnDraw();" to my fnDrawCallback function but when I add this line (commented out below) the "Processing" indicator never goes away. Without this line everything works properly (except the refresh of course...)

[code]

var oTable;
oTable = $('#splfAdvanced').dataTable({
"bJQueryUI": true,
"bProcessing": true,
"bServerSide": true,
//"bStateSave" : true,
"sPaginationType": "full_numbers",
"sDom": '<"clear"><"fg-toolbar ui-widget-header ui-corner-tl ui-corner-tr ui-helper-clearfix"lr>'+
't'+
'<"fg-toolbar ui-widget-header ui-corner-bl ui-corner-br ui-helper-clearfix"ip>',
"sAjaxSource":base_url+'index.php/TestMgr/getData',
"fnDrawCallback": fnRowMenu,
"fnServerData" : function ( sSource, aoData, fnCallback ) { });
$.ajax( {
"dataType": 'json',
"type": "POST",
"url": sSource,
"data": aoData,
"success": fnCallback
} );
},
"fnRowCallback": function( nRow, aData, iDisplayIndex ) {
$('.display tbody tr').each( function () {
if (jQuery.inArray(aData[0], selected)!=-1) {
$(this).addClass('row_selected');
}
});
return nRow;
}
});

function fnRowMenu ()
{
var horizontalPadding = 30;
var verticalPadding = 30;
var PARM1, PARM2;

$(".display tbody tr").contextMenu({
menu: 'myMenu'
},
function(action, el, pos) {
PARM1 = el.find('td').eq(3).html();
PARM2 = el.find('td').eq(5).html();

var urlPage = base_url+'index.php/TestMgr/doAction/'+ action + '/' +
'/' + PARM1+ '/' + PARM2;
var frameSrc = '';
$(frameSrc).dialog({
title: ($(el.target).attr('title')) ? $(el.target).attr('title') : 'Display spooled file',
autoOpen: true,
width: 800,
height: 500,
modal: true,
resizable: true,
autoResize: true,
overlay: {
opacity: 0.5,
background: "black"
}
}).width(800 - horizontalPadding).height(500 - verticalPadding);
}); //end of contextMenu function
//oTable.fnDraw();
return false;
}

[/code]

JasonD

I managed to figure it out. Let me know if anyone is interested in what seems to work.

allan

I'm interested :-). fnDraw should have done the trick for server-side processing. If the processing indicator doesn't go away, it's usually because of a JSON parsing error.

Allan

JasonD

Allan,

I added an OK button to the UI Dialog and added the oTable.fnDraw() code to the action for the button. Anywhere else I tried to put it and it either doesn't refresh the table or leaves me with an apparent JSON parsing error.

I would just as soon have it redraw whenever the dialog is closed but this will do until I'm more comfortable with javascript and jQuery.

[code]
$(frameSrc).dialog({
title: ($(el.target).attr('title')) ? $(el.target).attr('title') : 'Display spooled file',
autoOpen: true,
width: 800,
height: 500,
modal: true,
resizable: true,
autoResize: true,
overlay: {
opacity: 0.5,
background: "black"
},
buttons: {
'OK' : function (){
oTable.fnDraw();
$(this).dialog('close');
}
}
}).width(800 - horizontalPadding).height(500 - verticalPadding); // End of Dialog
[/code]