Posts

Showing posts with the label jQuery UI

Donate

ASP.NET MVC AutoComplete TextBox Using jQuery UI AutoComplete And Entity Framework

-
Image
Hello and Good Evening! This post demonstrates how to implement an AutoComplete TextBox in ASP.NET MVC using jQuery UI and Entity Framework. I've had applied this concept to some of my projects and has been helpful to the clients and users using the application. Enough of the chitchat and lets get started by simply following the steps below. 1. Create an ASP.NET MVC project and add NuGet packages for Bootstrap and jQuery UI. 2. Add an Entity Framework model to the project using one of Microsoft's sample database called AdventureWorks . 3. In your _Layout.cshtml, make sure to reference the jQuery library inside the head tag so that the jQuery UI will work as expected. <!DOCTYPE html> <html> <head> <meta charset= "utf-8" /> <meta name= "viewport" content= "width=device-width, initial-scale=1.0" > <title>@ViewBag.Title - My ASP.NET Application</title> <script src= "~/Scripts/jque
Post a Comment
Read more

Set jQuery UI DatePicker To Current Month And Below

-
Image
Hi All, Here's how to set the jQuery UI DatePicker calendar dates to current month and below it. Future months are disregarded. The fix is to set the maxDate property with the current year, next month (current month + 1) and 0 for the day to get the last date of current month. var date = new Date(); $( "#datepicker" ).datepicker({ dateFormat: 'yy-mm-dd ' , changeMonth: true , changeYear: true , maxDate: new Date(date.getFullYear(), date.getMonth() + 1, 0) }); Output Note: As you can see from the image above, the next month button is disabled. Cheers!
Post a Comment
Read more

Bootstrap Modal Black Background Not Closing After Form Is Submitted

-
Hello fellow developers! Normally, when closing a Bootstrap Modal, the black background also disappear. However, if the closing of Bootstrap Modal is triggered by a close or button event fired from a "Yes" button of jQuery UI dialog the bootstrap dialog is closed but the black background of the bootstrap modal is still visible. The solution that I came up with is to close the modal dialog before the call to submit the form in the Yes callback function of the jQuery UI Dialog. function fnOpenNormalDialog($form) { var form = $form; $( '<div id="divConfirm"></div>' ).dialog({ resizable: false , modal: false , title: "Confirm Shipping" , height: 150, width: 350, open: function () { $( this ).html( "Confirm that this part is ready to be shipped?" ); }, buttons: { "Yes" : function () { $( this ).dialog( 'close' ); Callback( true , form); }, "No" : function () {
Post a Comment
Read more

How To Set Or Position BlockUI On Top Of jQuery UI Dialog

-
Good day! I have this requirement to show an overlay message using BlockUI on top of a jQuery UI Dialog. Assuming that these two are modals, I can't show the progress message on top of the jQuery UI Dialog. I found the solution in stackoverflow that is to set the z-index of BlockUI to 2000. $.blockUI({ message: '<h3>Saving of record in progress...</h3>' , baseZ: 2000 });
Post a Comment
Read more

jQueryUI Datepicker Works Only Once In ASP.NET MVC Partial View

-
Lately while working in an ASP.NET MVC project, i encountered a problem that when I load a partial view for the first time, the jQueryUI DatePicker shows up. However after loading the partial view for the second time and so on, the DatePicker does not show up. I've tried several approaches and solutions presented in the net. And the fix that worked on my end was to: 1. Change the id of the textbox control to which the DatePicker has been initialized to something unique.      txtAddHireDate for add partial view      txtEditHireDate for edit partial view 2. Remove the referencing of the jquery and jqueryUI library of each partial view and transferred them to Index.cshtml(Index.cshtml loads these partial views). That's it.
Post a Comment
Read more

View In ASP.NET MVC Not Refreshing After Calling Ajax Post In jQuery UI

-
Hello, In an application wherein the controller is invoked using Ajax POST and that controller will redirect to a landing page such as Index after processing, an issue will occur such as the View of that landing page isn't updated or not refreshed. Normally, the View will be updated since the model is queried from the database. [HttpPost] public ActionResult Delete( int id) { try { Customer customer = _customer.Customers.FirstOrDefault(t => t.CustomerID == id); if (customer != null ) { _customer.Customers.Remove(customer); _customer.SaveChanges(); } } catch { //TODO } return RedirectToAction( "Index" ); } The fix for that is to change the RedirectToAction() statement to return the url of a landing page as JSON result. And in the ajax statement, add a statement that navigate to the url returned from the controller. [HttpPost] public ActionResult Delete( int id) { try { Customer customer = _customer.Customers.FirstOrDefault(t =>
Post a Comment
Read more

Invalid postback or callback argument in ASP.NET (_doPostBack in jQuery UI Confirmation Dialog)

-
Hello, I'm currently working with ASP.NET GridView control that shows a confirmation dialog using jQuery UI instead of the classic JavaScript confirm dialog that prompts a user to delete a certain record. However, integrating that with the GridView control was slightly tricky in the sense that I was stuck with Invalid postback or callback argument error. Since this is ASP.NET Webforms, you have to deal with Postback hell issues. :) jQuery UI Dialog that trigger's postback buttons: { "Yes" : function () { __doPostBack(btnUniqueID, '' ); $( this ).dialog( "close" ); }, "No" : function () { $( this ).dialog( "close" ); return false ; } } After doing some research, I came up with two solutions. The first one is to set EnableEventValidation of Page directive to false for page level effect. Or you can set it in web.config for project scope. Page Directive Solution <%@ Page Language= "C#" AutoEventWire
Post a Comment
Read more

Donate