Using Fading Div tag messages to show ajax call results without requiring click.

We use xajax calls to server functions to update databases or insert records from a web page. Usually when they finish they return javascript to close the dialog or div tag and show an alert — this can be maddening if you are trying to add a lot of data and have to click to acknowledge the alert each time.

So this solution works well to give visual confirmation that doesn’t require clicking.

// Normal close dialog and remove edit form div

$objResponse->script(” $(‘#edit_item’).dialog(‘close’);”);
$objResponse->remove(‘edit_item’);

 

// Replace table with new updated values and call jquery data table to make look good

$objResponse->assign(“table_content_div”,”innerHTML”, “$html”);
$objResponse->script(“$(‘#item_table’).dataTable( {
bJQueryUI: true,
bAutoWidth: false,
aoColumns: [{‘sWidth’:’10%’},{‘sWidth’:’30%’},{‘sWidth’:’60%’}],
sScrollY: ‘400px’,
bSort: false,
bScrollCollapse: true,
bProcessing: true,
bDeferRender: true,
iDisplayLength: ‘-1’,
aLengthMenu: [[10, 25, 50, 100, 500, -1], [10, 25, 50, 100, 500, ‘All’]]
}); “);

 

// create div tag with message

$objResponse->create(‘table_content_div’,’div’,’done_message’);
$html = “ Save Complete”;
$objResponse->assign(‘done_message’,’innerHTML’,”$html”);

// jquery dialog
$objResponse->script(” $(‘#done_message’).dialog({
width: 300,
height: 100,
modal:true,
resizable: false,
draggable: false,
dialogClass: ‘done_message’
});”);
$objResponse->script(” $(‘#done_message’).closest(‘.ui-dialog’).find(‘.ui-dialog-titlebar’).hide();”);

 

// Fade away WITHOUT requiring a click — adjust numbers to effect speed
$objResponse->script( “setTimeout(function(){ $(‘#done_message’).fadeOut(300, function(){ $(this).remove();});}, 500);  “);

That’s It.