From f346c4add6cfb7ecf2c75b4ef9593fdcf6f59523 Mon Sep 17 00:00:00 2001 From: Jessica Wang Date: Fri, 9 Mar 2012 16:47:02 -0800 Subject: [PATCH] cloudstack 3.0 UI - listView - when clicking fast between different rows, JS error "args.context.xxx is undefined" appears. e.g. "args.context.instances is undefined" appears when clicking fast between different rows in listView in instance page. Because when clicking fast, users might click another row before API response for this current row is back => which causes the JS error. The fix is to overlay the whole listView by loading image (spinning wheel image) until click-handling for this row is done (e.g. API response is back). --- ui/scripts/ui/widgets/listView.js | 14 +++++++++++--- 1 file changed, 11 insertions(+), 3 deletions(-) diff --git a/ui/scripts/ui/widgets/listView.js b/ui/scripts/ui/widgets/listView.js index 52fed9b870e..e1751b68642 100644 --- a/ui/scripts/ui/widgets/listView.js +++ b/ui/scripts/ui/widgets/listView.js @@ -1312,6 +1312,9 @@ // Click on first item will trigger detail view (if present) if (detailViewPresent && !uiCustom && !$target.closest('.empty, .loading').size()) { + var $loading = $('
').addClass('loading-overlay'); + $target.closest('div.data-table').prepend($loading); //overlay the whole listView, so users can't click another row until click-handling for this row is done (e.g. API response is back) + listViewData.detailView.$browser = args.$browser; detailViewArgs = { $panel: $target.closest('div.panel'), @@ -1347,9 +1350,14 @@ }); } - createDetailView(detailViewArgs, function($detailView) { - $detailView.data('list-view', $listView); - }, $target.closest('tr')); + createDetailView( + detailViewArgs, + function($detailView) { //complete(), callback funcion + $detailView.data('list-view', $listView); + $loading.remove(); + }, + $target.closest('tr') + ); return false; }