From 008fcb8a27c7086fe1877b9bfa0871844c4aa700 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 311b81bea2b..3ef7839d9f9 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; }