How to Add a Loading Screen to C# Using Jquery
With my experience from telerik, I want my entity's add and edit form to be a popup so I don't have to change screen. I'm using ...

But sometimes the submit event in the popup form requires some time to verify the data inputted, so I definitely needed a loading screen which by default is not included with the library.
So here's how I added the loading screen:
1.) Modify DialogForm.js
//after this line $('form', dialog).submit(function () { //add var ld = $(document.createElement('div')).attr('id', 'loadingDialog'); var opaque = $(document.createElement('div')).attr('id', 'opaque'); opaque.append(ld); $("#" + $(dialog).attr("id")).prepend(opaque); //dynamic dialog id //and after data: $(this).serialize(), //add these 2 events beforeSend: function (xhr) { $('#opaque').show(); }, complete: function (jqXHR, textStatus) { $('#opaque').hide(); },2.) Then we need to add the css styles in your css file:
#loadingDialog, .loading-dialog { width: 100%; height: 100%; background-image: url(images/bg_ajax-loader.gif); background-position: center; background-repeat: no-repeat; position: fixed; cursor: progress; border: 1px solid #000; filter: alpha(opacity=100); opacity: 1; } #opaque { position: fixed; top: 0px; left: 0px; width: 100%; height: 100%; z-index: 2147483647; background-color: black; filter: alpha(opacity=40); opacity: 0.4; display: none; }3.) And lastly don't forget to add the image bg_ajax-loader.gif under /Content/images folder.
Post a Comment