Tech-Today
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 C# MVC3, so I tried to look for jquery add on that would do the job. Fortunately I've come up with this article: http://nickstips.wordpress.com/2011/08/11/asp-net-mvc-ajax-dialog-form-using-jquery-ui/. It uses jquery's ui dialog and mvc's partial view to render the popup form.
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
- Mvc3 Ajax Validation Doesn't Work On A Jquery Served Form
To make automatic validation using data annotation on a model on mvc3 c# we need: 1.) A model with data annotation (ex. required attribute). 2.) Form with jquery declaration (jquery1.7, validate, validate unobtrusive, and unobtrusive-ajax. All are available...
- How To Upload A File In An Mvc3 C# Ajax Form
It's easy to upload file in a synchronous form, where you just post the file and read a HttpPostedFile variable in the server side: In plain html form, take note of the form enctype property: //the view (index.cshtml) @using (Html.BeginForm("Upload",...
- Add A Jquery Datepicker On Jquery Dialog Box Via Load Method
Recently I've worked on a form that requires a jquery datepicker to be rendered inside jquery's dialog element. Where I encountered several problems like: 1.) datepicker() should be invoke inside dialog 2.) the dialog created (div) should be remove...
- Jquery Datepicker Show Only The Month And Year
I have created a report search form that filter the monthly record of sales. So I don't really care about the specific day but the month. Jquery has a nice DatePicker library, but it can't be customized to remove the month part, so just hide it...
- Jquery Copy Form Values Into Another Form
Recently I have a requirement to have two form on a single page. Why? It's because I have a search form that query records from the database with the aid of ajax. Then another form to generate a report based from the filters specified in the first...
Tech-Today
Adding loading screen to C# MVC ajax dialog form 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 C# MVC3, so I tried to look for jquery add on that would do the job. Fortunately I've come up with this article: http://nickstips.wordpress.com/2011/08/11/asp-net-mvc-ajax-dialog-form-using-jquery-ui/. It uses jquery's ui dialog and mvc's partial view to render the popup form.
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
2.) Then we need to add the css styles in your css file:
//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();
},
3.) And lastly don't forget to add the image bg_ajax-loader.gif under /Content/images folder.
#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; }
- Mvc3 Ajax Validation Doesn't Work On A Jquery Served Form
To make automatic validation using data annotation on a model on mvc3 c# we need: 1.) A model with data annotation (ex. required attribute). 2.) Form with jquery declaration (jquery1.7, validate, validate unobtrusive, and unobtrusive-ajax. All are available...
- How To Upload A File In An Mvc3 C# Ajax Form
It's easy to upload file in a synchronous form, where you just post the file and read a HttpPostedFile variable in the server side: In plain html form, take note of the form enctype property: //the view (index.cshtml) @using (Html.BeginForm("Upload",...
- Add A Jquery Datepicker On Jquery Dialog Box Via Load Method
Recently I've worked on a form that requires a jquery datepicker to be rendered inside jquery's dialog element. Where I encountered several problems like: 1.) datepicker() should be invoke inside dialog 2.) the dialog created (div) should be remove...
- Jquery Datepicker Show Only The Month And Year
I have created a report search form that filter the monthly record of sales. So I don't really care about the specific day but the month. Jquery has a nice DatePicker library, but it can't be customized to remove the month part, so just hide it...
- Jquery Copy Form Values Into Another Form
Recently I have a requirement to have two form on a single page. Why? It's because I have a search form that query records from the database with the aid of ajax. Then another form to generate a report based from the filters specified in the first...