Jquery Tips and Tricks

Attribute selectors in Jquery

We access page elements using Class and Id selectors most of the times but at times we need to fetch elements like,
access all elements where class name starts with 'form-controls' or class name contains 'form-controls'

$('[class^=form-controls]') // class name Begins with "form-controls"
$('[class*=form-controls]') // class name Contains "form-controls"
$('[class$=form-controls]') // class name Ends with "form-controls"

Add new class to existing elements
.addClass(className)
This will add specified class(es) to the element. This will not replace the existing class(es), rather it will append new class to the existing ones.

$( "table" ).addClass( "datatable stripped" );
This will add "datatable" and "stripped" class to all tables

Common mistake while using addClass

$('#pdOrder').addClass('.datatable'); //This is wrong. Observe "." while adding class "datatable", there is absolutely no need to add "."
Correct way : $('#pdOrder').addClass('datatable');

Comments

Jquery Datatable server side Paging/ Search/ Sort

If we have huge data to bind to Jquery Datatble, server side data binding is a handy option. As we can fetch a set of records and bind only those at time. Further next set of records can be retrieved when requested. e.g, if we have a page size set to 10 records in Datatable, it is a good choice to load only first 10 records in the datatable, when user click on "2" in pagination, we can retrieve 11-20 i.e, next 10 records from database and display in datatable. This will increase noticeable performance for datatable. So let's dive in how we can achieve this, <script src="~/Scripts/js/core/libraries/jquery.min.js"></script> <script type="text/javascript" src="~/Scripts/js/plugins/tables/datatables/datatables.min.js"></script> <script src="~/Scripts/js/plugins/tables/datatables/extensions/key_table.min.js"></script> <!-- here I am using KeyTable (A datatable extension) to navigate through...

Jquery Datatable with Keytable setting focus

Datatable will not have focus by default, we need to set the focus on datatable by using below code, <script src="~/Scripts/js/core/libraries/jquery.min.js"></script> <script type="text/javascript" src="~/Scripts/js/plugins/tables/datatables/datatables.min.js"></script> <script src="~/Scripts/js/plugins/tables/datatables/extensions/key_table.min.js"></script> //make sure you have included KeyTable plugin $(document).ready(function () { // initialise your datatable here, after that we are ready to set focus on datatable so that we can use arrow key for navigation like excel var table = $('#PurchaseorderList').DataTable(); table.cell(':eq(0)').focus(); table.cell(':eq(0)').click(); });

Using Redis Cache in Asp.Net MVC

Redis is an in-memory data structure store, used as database, cache and message broker. At first it seems a bit hard to get on with Redis so I tried with MemCache, Ignite Cache but once I get on with Redis since then I am not using anything else for caching. Redis is super fast compared with other caching alternatives. We can install redis as windows service. This is out of scope for this article so I am providing some external references so that you can get started with, how you can install Redis as windows service. http://www.alternatestack.com/development/running-redis-server-on-windows/ http://www.saltwebsites.com/2012/how-run-redis-service-under-windows Once you are done with Redis installation, a bit hectic though as compared with any other Microsoft products, where we are habitat of using "Next" and get our desired product installed. But the efforts worth it, trust me!!! We need to find for a package,stackexchange.redis, refer below screen, This wi...

Pro-Tech-Friend

Search This Blog