Posts

Showing posts with the label jQuery

MVC - Selectively Loading jQuery Debug or Release Scripts

Image
Download Project Source P age load times are critical to a satisfying user experience.  One of the simplest ways to reduce load times is to Minify your jQuery and Javascript files.  I won't go into detail on how to Minify those files in this post (hint:  http://yui.2clics.net/ ).  Instead, this article deals with the headaches of debugging Minified files. For example, here's a typical Javascript error: However, its impossible to debug this issue because I'm referencing the Minified version of jquery-1.5.1.  I'd have an easier time defusing a small nuclear device.  On the other hand, I don't want to go referencing debug versions of Javascript files throughout my code only to have to do a search and replace every time I want to release. The solution is in MVC's Html Helper classes. The @ Html and  @ HtmlHelper methods are provided to render html controls on the view in a code-centric way.  However, their functionality isn't ...

jQuery - Magic Grid Filters using jQuery

Image
Download Project Source View Demo Update: I've uploaded a demo page showing grid filters in action.  It can be found here . Q uite often there's a grid or two (or hundred) in a project.  One of the neat thing about jQuery is how simple it is to do some really amazing things, such as filtering grid content based on user input. Take the following example: the above grid has several Employees listed, but the user only wants to see Michael Bolton's information.  With jQuery, it is possible to remove grid rows that don't match the user's selection, with just a few lines of code.  Here's how. First, we create a view page listing the employees.  The key here is to decorate the table rows and cells with CSS classes so our jQuery function will search only where we want it to. Code Snippet < table >          < thead >          < tr > ...

MVC - Cascading Lists using Ajax and jQuery

Image
Download Project Source I t seems like every project I'm on has a cascading list requirement.  The problem is common enough: once a value in one list is selected, a second sub-list is populated based on selections from the first.  One of the most common scenarios (as seen above) is selecting a Country, which populates a list of States or Provinces (or Cities for my example). In a recent project, an additional requirement of cascading multi-select lists was needed.  If the user selects multiple values in the first list, the second list should contain all of the sub-selections from all the selections in the first list. Typically in the past, this has been done via post-back to the server to populate the second list.  This has the disadvantage of refreshing the page, which means the user is stuck waiting.  However, in MVC, it is just as simple to use Ajax and Jquery to seamlessly populate the list without interrupting the user experience. First, the mo...