Log in to like this post! jQuery Editors: How to get started and improve productivity and experience Damyan Petev / Thursday, August 30, 2012 The Infragistics jQuery package comes complete with a range of editor widgets to help with one of the most common tasks - gathering information from the user and making sure it is the one you need (validating it). Part of the product from day one – speaks just how essential they are. And in this blog and probably some more to follow I’ll do my best to get you started and show ways to improve the editing experience and overall productivity, along with some tips and tricks. Collecting and filtering user input is one of those basic functionalities many platforms require and the jQuery version follows the path set by the type of experience provided by say ASP.NET Editors or XAML Inputs. However, due to having both a client and server, web-based applications offer two separate points of opportunity to narrow down the unwanted input. So in such case the best place to start filtering input is on the client and the editors are ideal for that. More or less like the ASP.NET AXAJ counterpart the jQuery editors provide a similar set of controls – here’s the list: Numeric editor, itself extended by: Currency editor Percent editor Mask editor Date editor Date Picker Text Editor Before we dive into those, however, should be explained that all of them extend the base Editor class and use a Validator. Any extended editor can be created using the base Editor, should you need to, and any of the properties of the extended editors can be can be set within the igEditor. Of course, the whole point of the separate editors is to provide a mostly ready to use control with all the right defaults. So further below you will see a logical representation of the editors hierarchy with short descriptions to help you figure out which one is the right for the situation. The editors’ most basic functionality is, well… to allow a text field to be edited, not surprisingly, and to provide support for additional buttons for dropdown and such. However, the actual validation that is often a huge part of the process comes courtesy of the igValidator. Yup, it’s a separate widget which means you can use it stand-alone if you will on other Input, Textarea or Select elements. The editors use those for main element and initialize validators for you, of course. In the interest of having a complete piece of information, it’s probably worth mentioning the Validator is also used by the jQuery Combo and Rating controls. Getting started Resources First things first – some resources are ”required: true”, so to speak. Nothing too complicated though, but if you are not familiar with how resources can be handled your first stop should be our Deployment Guide and more specifically the page discussing how to work with JavaScript resources. The most basic resource to add are the editors themselves and the validator: $.ig.loader({ scriptPath: "http://cdn-na.infragistics.com/jquery/20121/2049/js", cssPath: "http://cdn-na.infragistics.com/jquery/20121/2049/css", resources: "igEditors,igValidator" }); or using the MVC helpers: @using Infragistics.Web.Mvc; @(Html.Infragistics().Loader() .CssPath("http://cdn-na.infragistics.com/jquery/20121/2049/css") .ScriptPath("http://cdn-na.infragistics.com/jquery/20121/2049/js") .Resources("igEditors,igValidator").Render()) Editors When instantiating the editors using just script you have to provide the actual markup (that being a container element or the actual input(s) to be transformed), for example: <input id="date"/> and then you can initialize the widget like: $("#date2").igDatePicker({ inputName: 'date', required: true, validatorOptions: { onsubmit: true } }); or using the MVC helpers(they will create all markup for you): @(Html.Infragistics().DateTimeEditor().InputName("date") .ValidatorOptions(validate => validate.OnSubmit(true)) .Required(true).Render()) Of course, you can add quite a few more tweaking to those, but for now we are going for simple. Getting values To get actual values when you are submitting a form(see below or one for the demos for more complete layout) we include the additional ‘Input Name’ option. This has nothing to do with naming your input, even though the actual ‘name’ attribute of inputs is used by the browser when sending form data to the server. The option instead creates an additional field like this: <input name="date" type="hidden"/> The reason is to separate the representation (the editor’s displayed value can be different – date formats, masks, literals, etc.) from the actual value – the editor creates this field and automatically updates its value to match the editor’s and this way you get the right data on the server. And the ‘onsubmit’ validation will prevent sending the form if the editor’s value is empty! In the demo I have two date editors and the is the action in the ‘Home’ controles handling the form submit: [HttpPost] public ActionResult Update(DateTime? date, DateTime? date2) { /* use date and date2 here - e.g. perform additional checks and save the input to database, etc. */ ViewBag.Message = "Entered date: " + date.ToString() + ", and date2: " + date2.ToString(); //return to the same view with the new message var path = Request.UrlReferrer.AbsolutePath; return View(path != "/" ? path.Split('/').Last() : "Index"); } Of course, MVC does most of the value retrieval for you and some other helpful checks. One way or another this can be done on any platform! Improve your pages’ input experience Say you have a very common simple form for the user to fill in a few blanks. You can rely entirely on checking the result on the server but that is highly ineffective due to the completely uncontrolled user input and the additional round-trips to the server and back again. Then again as this is no new issue the HTML5 has added a whole plethora of input types to really ease that task and it’ll all be good… but none of the special features would work on IE8 or 7 and can be quite the show-stopper(not to mention the the patter to validate against in not supported at all in IE and Safari yet). So say you have the most simple form like so: form action="@Url.Action("Index")" method="post"> <fieldset> <legend>Editorslegend> <label>First name:label> <input name="name"/> <br/> <label>Phone: label> <input name="phone"/> <br/> <label>Email: label> <input name="email"/> <br/> <label>Description: label> <br/> <div id="descr">div> fieldset> <input type="submit" value="Send"> <input type="reset"> form> It doesn’t looks or do anything special, really: By all means, add all the HTML5 types to those, just keep in mind they will all fallback to simple text inputs for non-HTML5 browsers. As it has been a practice, the only reasonable solution is to rely on script validation on the client. Of course, you have the freedom and options to use anything. You can even attach an igValidator to those fields and get awesome results… OR simply turn those inputs into proper jQuery editor widgets. And it’s really simple too: $.ig.loader(function () { $("input[name='name']").igMaskEditor({ inputMask: ">L>LL????????????????", validatorOptions: {} }); $("input[name='phone']").igMaskEditor({ inputMask: "(000)0000 999", validatorOptions: {} }); $("input[name='email']").igTextEditor(); $("#descr").igTextEditor({ textMode: "multiline", nullText: "Leave a note." }); }); Basically you don’t need to change you markup at all in most cases (it’s still the same HTML only swapped the description Input for a DIV so the editor can render its own main element instead). The user editing and input experience, however, is now changed drastically: And by adding a single line with validator options ‘ validatorOptions: {}’ (can be empty for Mask Editors as their masks define required fields) will now also display an appropriate message when input doesn’t meet requirements: The editors become the first line of filtering out inappropriate user input – preventing it from making a travel to the server and back, when it’s guaranteed to be rejected there. Save the server some work, help reduce pointless traffic and help the user by hinting the required input with mask prompt chars and messages. Demos and resources You fiddle with two demos of your choosing: - A JSFiddle demo, where the submit button is only good for triggering validation. - An ASP.NET MVC project showing both delimiting in script and using the Helper as well as the from summation handling in action. Keep in mind the MVC helpers do require the Infragistics MVC assembly, see below on how to get yourself one. You can lean more about the product and download free trial package on the NetAdvantage jQuery Home page. Make sure you visit the Editors’ online samples! Also if you need some help try our update Help page or dive directly into the Documentation and API! As always, you can follow us on Twitter @DamyanPetev and @Infragistics and stay in touch on Facebook, Google+ and LinkedIn! Summary As you’ve seen above the jQuery Editors are not rocket science to use, but can truly make a difference: Filter input, reduce server load/rejection rate and redundant traffic Enhanced editing experience User-friendly messages Completely customizable High control Rich API Stylable ThemeRoller compatible And when you consider the benefits of the being able to use the editors regardless of HTML5 support, even on older IE versions and the wonderful capability of the MVC helpers to create validation based on your model’s MVC Data Annotations – you get a whole lot of functionality with little to no effort. Stay tuned for more jQuery Editors content coming very soon.