details: http://www.bx.psu.edu/hg/galaxy/rev/6e742ffb16a5 changeset: 3134:6e742ffb16a5 user: jeremy goecks <jeremy.goecks at emory.edu> date: Tue Dec 01 11:07:20 2009 -0500 description: Improved loading state for AJAXed grids: when grid is loading, gray out table and prevent further user actions. diffstat: templates/grid_base.mako | 16 +++++++++++++++- 1 files changed, 15 insertions(+), 1 deletions(-) diffs (47 lines): diff -r e75b55cc9e08 -r 6e742ffb16a5 templates/grid_base.mako --- a/templates/grid_base.mako Tue Dec 01 09:53:36 2009 -0500 +++ b/templates/grid_base.mako Tue Dec 01 11:07:20 2009 -0500 @@ -601,6 +601,7 @@ // If there's an operation in the args, do POST; otherwise, do GET. var operation = url_args['operation']; var method = (operation != null && operation != undefined ? "POST" : "GET" ); + $('.loading-elt-overlay').show(); // Show overlay to indicate loading and prevent user actions. $.ajax({ type: method, url: "${h.url_for()}", @@ -660,6 +661,9 @@ } } + // Hide loading overlay. + $('.loading-elt-overlay').hide(); + // Show message if there is one. var message = $.trim( parsed_response_text[2] ); if (message != "") @@ -711,6 +715,15 @@ .gray-background { background-color: #DDDDDD; } + .loading-elt-overlay { + background-color : white; + opacity : 0.5; + width : 100%; + height : 85%; + z-index : 14000; + position : absolute; + display: none; + } </style> </%def> @@ -750,7 +763,8 @@ ## Render grid. <%def name="render_grid_table()"> <form action="${url()}" method="post" onsubmit="return false;"> - <table class="grid"> + <div class='loading-elt-overlay'></div> + <table id='grid-table' class="grid"> <thead id="grid-table-header"> <tr> <th></th>