Techie's Diary

While working with Knockoutjs ViewModel, if we implement the select all checkbox feature using traditional JavaScript/JQuery, then in such scenario we can see that Knockoutjs observable property is not getting updated when all checkboxes are checked/unchecked. To handle such situation, we can create Knockoutjs computed property ( with read/write ) and can bind it to header checkbox and there is no need to use the traditional JQuery. Below is the sample code to demonstrate the same: As usual create the Knockoutjs ViewModel and then bind it to UI using ko.applyBindings function CheckViewModel() {     var self = this ;     self.Countries = ko.observableArray(                                                 ...

Sometimes there is a need to check/uncheck all options (for example Gmail inbox), then question is how it can be implemented using JQuery? We can write down a quick jQuery snippet that select/deselect all checkboxes by clicking on “Select All” header checkbox. Let’s quickly create the HTML form with one header checkbox and several other checkboxes. < ul id ="ulContainer">     < li >         < input type ="checkbox" id ="chkSelectAll" />         Select All </ li >     < li >         < input class ="chkItem" type ="checkbox">         Item 1 </ li >     < li >         < input class ="chkItem" type ="checkbox">         Item 2 </ li > ...

Reason: Once you upgrade your jQuery ( 1.9.0 or above ) or jQueryUI ( 1.9.2 or above ) library in your application, then you’ll see that many of the existing functionalities get affected. When you see in error console there is error mentioned as: ‘TypeError: $.browser is undefined’ This is because of ‘$.browser’ has been removed from JQuery 1.9 or above. Solution: To resolve the issue you can include the jQuery migrate script and this script file will allow you to use ‘$.browser’ again. This migrate script also restore many other depreciated features. See details of the same here Directly include jQuery migrate script as: < script src ="http://code.jquery.com/jquery-migrate-1.2.1.js"></ script > Alternatively, you can download this script and can use this locally from your application.

While working with client scripting every now and then one may face challenge to add inverted commas or quotes in strings. We can add inverted commas or quotes proceeding by a backslash character. This allows the JavaScript interpreter to differentiate a quote within the string from the quotes that serve as string delimiters. Let’s see an example: testString1 = 'It\'s one o\'clock!' ; testString2 = "<a href=\"testpage.html\">" ; Alternatively, if string includes single quotes only, then you can use double quotes as string delimiters, and vice versa, as mentioned in below example. testString1 = "It's one o'clock!" ; testString2 = '<a href="testpage.html">’;

In this post I’ll show how to set the tab index to Telerik tabstrip or get the selected tab index using client scripting i.e. JQuery. Set the tab index: Create one function in your JQuery plugin or page, and call this function on either OnLoad of tabstrip or anywhere else you want to set the tab index. function SetTabStrip() {     //Get the tab strip.     var tabStrip = $( "#TabStrip" ).data( "tTabStrip" );     //Set the tab index on which tab you want to navigate.     var index = 0;     //Get the DOM element using Index     var domElement = $( "li" , tabStrip.element)[index];     //Finally select that DOM element.     tabStrip.select(domElement); } Get the tab index: Same way you can create one function to get selected index method using below code (or you can find tab index in existing method if you want). ...

In this post, I’ll show you how you can encode or decode (if you ever need to do so) supplied HTML using jQuery. This is quite easy just create two separate method for encoding and decoding as given below.   function encodeHTML (text) {     if (text) {         return jQuery( '<div />' ).text(text).html();     } else {         return '' ;     } } function decodeHTML (text) {     if (text) {         return $( '<div />' ).html(text).text();     } else {         return '' ;     } } Test the both method to encode or decode HTML.   $( function () {     //pass the html to encode.      alert(encodeHTML( 'You & me are good frien...

In this post, I'll show how you can get the selected text and selected value of dropdown using jQuery. Dropdown can be ASP.Net dropdown or HTML dropdown. Let’s define one dropdown and button: <!--Dropdown can be either of ASP.Net --> < asp : DropDownList ID ="ddlGender" runat ="server">    < asp : ListItem Value ="-1"> - Select- </ asp : ListItem >    < asp : ListItem Value ="1"> Male </ asp : ListItem >    < asp : ListItem Value ="2"> Female </ asp : ListItem > </ asp : DropDownList > <!--Or HTML select--> < select id ="ddlGender">     < option value ="-1"> -Select- </ option >     < option value ="1"> Male </ option >     < option value ="2"> Female </ option > </ select > < input type ="button" id ="getValue...