Looking for a bit of jQuery elegance here.
I have a simple "Please Wait" modal jQuery dialog I show during a retrieval of "master" data in a WebGrid on my main View.
However, the data shown the user has a "Detail" link on each record that spawns another modal jQuery dialog containing a separate WebGrid with "detail" of the selected master record.
When the user clicks the Detail link, I'd like to spawn that "Please Wait" modal dialog again while the postback runs to the server to get the data. Then, once it returns, the wait dialog closes, then opens the detail dialog.
So I don't want one dialog on top of another. I want one open dialog to be replaced by the new dialog.
I've experimented with various options within my existing codebase but haven't been able to find the magic combo.
Here's my master grid code:
var grid = new WebGrid( source: Model.CompanyModels, defaultSort: "CompanyName", rowsPerPage: 25, selectionFieldName: "SelectedRow" ); using ( Html.BeginForm( "Index", "Home", FormMethod.Post ) ) { grid.Pager( WebGridPagerModes.NextPrevious ); <div id="listingGrid"> @grid.GetHtml( headerStyle: "headerStyle", tableStyle: "tableStyle", alternatingRowStyle: "alternateStyle", columns:grid.Columns( grid.Column(format: @<text>@item.GetSelectLink("Detail")</text>), grid.Column(columnName:"CompanyName", header:"Company Name", style: "wgName") ) ) </div> }
Here's the code I'm using to detect the user's selection of a Detail link on a master record:
if ( grid.HasSelection ) { // Would like to have the "Please Wait" dialog open here, then // auto-close once the data is retrieved and the following dialog // is ready to spawn. Currently, placing it here just stacks the // dialogs after postback. Page.ParentCompanyDetail = grid.SelectedRow; <script type="text/javascript"> $(function () { var dialogOpts = { title: "Company Location Details", modal: true, autoOpen: false, resizable: false, height: 500, width: 1200, show: { effect: "fade", duration: 500 }, hide: { effect: "fade", duration: 500 } }; $("#locationDialog").dialog(dialogOpts); $("#locationDialog").dialog("open"); return false; }); </script> }
And finally, here's the dialog content:
<div id="locationDialog" title="Company Location Details"> @if (Page.ParentCompanyDetail != null) { Model.CompanyLocationModels = GetDetailData(Page.ParentCompanyDetail.CompanyName); Page.ParentCompanyDetail = null; @Html.Partial( "_CompanyLocationListing" ) } </div>