" Live as if you were to die tomorrow. Learn as if you were to live forever.. "
- Mahatma Gandhi

Integrating jquery plugin in Dotnetnuke Module

Posted on November 24th, 2015 by Sibabrata Dash

Minimum steps to follow while including a jquery plugin into your custom dotnetnuke module. As DNN module is a user control and can be installed in any dnn website and used. So whenever we are including jquery or any plugin into our custom module we should follow certain steps : -> Version of jquery required […]

Cross Domain Calls For WCF

Posted on November 23rd, 2015 by Mahesh Korupolu

A cross-domain call happens when a web page uses Javascript to access resources at a different URL which can be another domain. You will get the following error when you try access the WCF services whic is hosted in a different doamin from a jQuery ajax method. NetworkError: 405 Method Not Allowed – http://sommedomain.com/service.svc/restService/GetMessage The […]

DateTime issue in WCF service call

Posted on November 23rd, 2015 by Bishwaranjan Sandhu

Sometimes we face problem while working on date time timezones with wcf service calls. For example, in my situation I have code that passes date into WCF via JSON object. What was happening in my case was, when I was sending my date as “12/02/2013″(dd/mm/YYYY format) from jquery client side, it was getting the date […]

Successive AJAX Call on Key Stroke

Posted on November 23rd, 2015 by Swarup Sahu

In my project, I have a search box. Here I need to made a ajax call on key up so that it will return search results for each text. This is because I do not have any search button to made the ajax call. One more thing, I am using Filemaker database and on each […]

Comet /Server Push/Reverse Ajax | Mindfire Solutions

Posted on November 23rd, 2015 by Subranil Dalal

AJAX technology has gained considerable popularity in the world of web and especially Web 2.0. so much that it would be difiicult to find a web developer who hasn’t been exposed to the benefits of this technology.   Sometimes in our project work we need to keep refreshing a page in a certain time interval. For instane, take a live online […]

Two minutes to learn Ajax File upload

Posted on November 23rd, 2015 by Dinesh Sahoo

If we have read/seen it somewhere that ” File upload using Ajax”, then it is not through AJAX. File uploading is basically done through an iframe in this case. We have to use an iframe to upload the files. Honestly speaking implementing javascript code using an iframe is quiet difficult for a beginner. In that […]

Dynamically Changing Text Of Button On jQuery UI Modal PopUp

Posted on November 23rd, 2015 by Tadit Dash

Introduction This tip/trick will help you to reach the buttons inside one jQuery UI modal popup dialog and change its text. Background Currently I am working in a multi lingual project, so we need to translate every component present in one webpage according to the user’s language. During the development, I came across one issue, […]

Alternative to hideColumn() of Kendo grid

Posted on November 23rd, 2015 by Priyojit Mondal

Kendo has a nice inbuilt function calling which you can hide a particular column in a grid. The basic syntax is hideColumn(data-field_name) or hideColumn(column_number) [0-index]     But, sometimes, if you have previously set the column width of grid then this function may not work . Then you have to manually hide your column in […]

Dynamic Allocation Of Vertical Scroll Space In JQGrid

Posted on November 23rd, 2015 by SUBHASHREE SAHOO

 While using jQgrid, most of us have faced a situation when after displaying all the columns, there is an extra space for scrollbar at very end of the grid. The scrollbar helps us to scroll through records inside jQgrid, if it exceeds the page size. But usually we don’t need to show the last allocated […]

Set Focus To Kendo Numeric Text Box

Posted on November 23rd, 2015 by Priyojit Mondal

Suppose you create a textbox. <input id=’numeric’ type=’text’/>   You use kendo ui to make it numeric textbox as follows, $(‘#numeric’).kendoNumericTextBox();    Now the problem is when you try to make focus on this text box, you see you can’t simply focus on the textbox using simple jquery function, $(‘#numeric’).focus()    The problem you can […]

How To Create A Browser Independent Input Field Placeholder

Posted on November 23rd, 2015 by Dipak Panda

What is a placeholder? The placeholder is some text those are shown as filler text for input fields during page load. Once you put focus on the fields the text disappears and on focusing out, the filler text again gets back to the input field, if nothing has been entered. Do we have something to […]

Making Older Sites Compatible With Internet Explorer 10

Posted on November 23rd, 2015 by Sandeep Agrawal

Some times it might happen that an older website is not working properly in Internet Explorer 10. For example the jQuery popups are not opening but working in previous version of IE. The reason behind it can be that the website contains doctype as <!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN”>, html tags are not […]

TypeError: f[s] is not a function

Posted on November 23rd, 2015 by MANISH AGARWAL

Are you submiting a web form using jQuery or JavaScript and getting an error message which says: TypeError: f[s] is not a function The reason behind this could be that you have a form with the submit button named “submit” which conflicts with a jQuery event name submit. Changing button name to something other than […]

How To Set Label And Value In jQuery UI Autocomplete

Posted on November 23rd, 2015 by Indrakshi Ghosh

Lets say, we want to show an autocomplete field with different display text and the different raw value using jQuery UI autocomplete. So what will we do. First we have to send our formatted data from the server side coding. Lets take a look to an example: Suppose we want an autocomplete field where we […]

How to Add Customized Back Button in Place of Close Button in jQuery Mobile Dialog

Posted on November 23rd, 2015 by Roshan Gupta

The Default close button of a dialog just redirects to the previous page in the history. So if the dialog has a form and has some validation.   If the user done some error in the form fillup then he will get error messages and the dialog will be shown for a no of times. so […]

The Difference Between .Find() And .Filter() Methods In jQuery

Posted on November 23rd, 2015 by Dukhabandhu Sahoo

If you are new to jQuery, you may have confusion with the jQuery find() and filter() methods. The reason is both find() and filter() methods are very similar. But the way they work is different! The filter() method filters the elements from current set while the find() method searches child elements of selected element. In […]

Bootstrap Progress-Bar with jQuery Ajax

Posted on November 23rd, 2015 by Shiv Prasad

Often, we notify user content is download-in-progress by using loading GIFs, which in background are displayed / hidden by using classical callbacks that jQuery ajax exposes namely beforeSend and success, error. One of the disadvantages of using GIF loader is that it cannot indicate by any means, what is the current status of the background […]

Configure the Kendo ComboBox To Send Parameter To The Server

Posted on November 23rd, 2015 by Swati Gupta

Lets say my Razor view contains a ajax bound combo-box which is making ajax request to get the data. Razor View: @(Html.Kendo().ComboBoxFor(model => model.PrimaryInsurance) .Filter(FilterType.Contains) .Placeholder(Constants.K_ComboPlaceholder) .DataTextField(Constants.K_ComboDataTextField) .DataValueField(Constants.K_ComboDataValueField) .DataSource(src => src.Read(read => read.Action(“GetPrimaryInsuranceList”, “Patient”, new { area = “Patient” }) .Data(“AdditionalDataPatientId”)) ) .HtmlAttributes(new { @class = “responsive-width” }) )    We need to send patientId […]

How to format a JSON date to a normal date format

Posted on November 23rd, 2015 by NEHA DUBEY

The JSON Date format can be converted to a normal date format using a simple statement. var date=newDate(parseInt(dateInJasonFormat.substr(6)));   where, The parseInt () function will parse the date string -> dateInJasonFormat. The substr function takes the lenght as 6 ie it ignores the initial 6 characters which include /Date(. (From the above date format). Also, […]

Getting Current Vertical Window Scroll Bar Position In Safari 7.0.1

Posted on November 23rd, 2015 by Elishree Dey

For web applications we are at times required to get the current vertical window scroll bar position. One of the common way to detect it is by using Javascript with out any external plugin function. We can use below javascript function where we can get the window scroll bar position. function getScrollXY() { var x […]

Fix issue of CKEditor Not Working When Used In JQuery Sortable(Drag and Drop)

Posted on November 23rd, 2015 by SANDEEP AGRAWAL

If there is a requirement to use CKEditor or any other html editor in Jquery Sortable list then a recurring problem seen in using these editors in sortable is that the content of the editor is getting lost and editor is uneditable when we drag and drop the CKEditor. So to fix this issue you […]

To validate form fields by using a single function throughout the application

Posted on November 23rd, 2015 by Mitali Goel

Mostly each and every project has a smaller or a bigger form to be filled by the user and we need to validate the form fields on the client side. Here is a summed up function, where we can add the following classes for specific validations and pass the form to this function for validation […]

Basic JQuery syntax

Posted on November 23rd, 2015 by Subranil Dalal

Basic jQuery syntax and simplified AJAX How to use DOM equivalent code withe JQuery. How to get HTML fields value. Text field: $(‘#name’).val(); Drop Down: $(‘#category option:selected’).val(); Radio Or Check Box: $(‘#checkid’).attr(‘checked’); // return true if checked other wise false; HTML content : $(‘#div’).html(); // same as innerHTML of DOM How to set value of […]

Consuming WebService and WCF from jQuery.

Posted on November 23rd, 2015 by Jnana Swain

If Asp.net Ajax framework is used, web service and WCF service methods are consumed by ScriptManager. For jQuery framework, these services are consumed by following ways. Example: Create  Ajax-EnabledWCFService, name it “TimeService.svc”. Put Following code in the TimeService class. [OperationContract] public string GetTime() { return “<B>” + “Current Server Time : ” + DateTime.Now.ToLocalTime() + “</B>” ; } ASPX Page <script […]

Implementing Google Maps using jQuery

Posted on November 23rd, 2015 by Subranil Dalal

Implementing Google maps with with jQuery is quite easy once you know it. In this tip I am going to demonstrate how you it can be done. For implementing Google maps, the first thing you need is the Google maps api key for your website.A single Maps API key is valid for a single “directory” […]

Reset or clear the form data when form is submitted by AJAX using jQuery

Posted on November 23rd, 2015 by Subranil Dalal

When a form is submitted through submit button click the form data is subsequently cleared or reset . But when we submit a form by AJAX then we have to clear the form data by picking every element and setting the value as blank. If a form contains more than 100 input fields then it […]

Sliding div panel using jQuery

Posted on November 23rd, 2015 by Sulagna Mohanty

he following piece of code illustrates the extended div panel. Click on the link, the div will expand and display information. But before proceeding do note that for the following code snippet to work, you must download jquery-1.3.2.js from here (hhttp://docs.jquery.com/Release:jQuery_1.3.2)  Steps to follow: 1.Include the following script inside the head section. <script type=’text/javascript’ src=’jquery-1.3.2.js’></script> <script […]

Select/ DeSelect all checkboxes in gridview using JQuery

Posted on November 23rd, 2015 by Sabitree Sahu

Selecting all checkboxes by selecting the checkbox in the header of the gridview is a common operation in ASP.NET applications. We could do the same thing but writing less code and giving less effort by using JQuery. The following code is used to perform the SelectAll / DeSelectAll function. <script type=”text/javascript” src=”http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js”></script> <script type=”text/javascript”> function […]

Expandable and Collapsible / Accordion type content using jQuery

Posted on November 23rd, 2015 by Subranil Dalal

These days while creating web applications we are increasingly finding ourselves in situations where we have to show data selectively. For instance using tab/ accordion/ show-hide div to display data is one such situation. This tip is an example of expand and collapse features which can be implemented to interactively show data to user. This […]

How to select all fields or only input fields of a form by jQuery

Posted on November 23rd, 2015 by Subranil Dalal

At times we are in situations where we have to programmatically select all fields or only input fields of a form. We can select every field one by one by using element id, class, tag name or other jQuery selectors, but it is a lengthy process. Suppose we have to disable a form’s elements. STEP […]

jQuery : Protect form submission on enter key-press

Posted on November 23rd, 2015 by Subranil Dalal

HTML form has a property that if we press enter key when cursor is focused inside any input field then form will be submitted. So if you filling up a form and you are in between and by mistake you press enter key your data will be submitted which is not completed. HTML forms are […]

How to get Skype status and make call or chat from the Web application

Posted on November 23rd, 2015 by Subranil Dalal

Nowadays, Skype is one of the best desktop application to communicate on the . Skype is a and questions are. How any one show Skype status on web application ? How any one call, chat or send file to other Skype user from web application ? Here I write a JavaScript function using jQuery which […]

Animated scrolling using jQuery

Posted on November 23rd, 2015 by Sachin Kumar

For scrolling to the top of the document , we can write a javascript like : window.scrollTo(0,0); But its transition effect is left visible . If we want a smooth animation to show the scrolling , we can use the following jQuery code : $(‘html,body’).animate({ ScrollTop: 0 }, 1000); In order to scroll “hml/body” you […]

How to get language specific Skype status in text format

Posted on November 23rd, 2015 by Subranil Dalal

In my previous tip ‘How to get Skype status on the web application and make call or chat from web application’ I showed how to get skype status by getting a skype icon. But at times we need to get the skype status in text. Here I am giving an example of how to get […]

Design jQuery Stuff with GUI in Minutes

Posted on November 23rd, 2015 by Sathyan R

An exciting, awesome tool to gnerate the required jQuery, CSS and HTML for some stunning looking stuff. Now everyone can create Great looking jQuery pages/controls within minutes. http://visitmix.com/labs/glimmer/ Install the setup (license is Free as long as its done on a valid, licensed Windows machine) and launch the App and create jQuery files like a […]

Showing a list of texts and values of all check boxes on a page (Using Jquery)

Posted on November 23rd, 2015 by Smruti Sahoo

JQUERY allows us to find and manipulate HTML elements with very little coding. This tip is only a small example of that. The code below demonstrates how to retrieve all values of check boxes. Please remember to include reference to JQUERY before proceeding further. function ShowAllValues() { var values = “”; $(‘input[type=checkbox]’).each(function() { var value […]

Using jQuery scrollTop() function

Posted on November 23rd, 2015 by Devi Das

jQuery function scrollTop() gives the distance between the top of the object and the topmost portion of the content of the object currently visible and can be used to determine the amount you have scrolled. e.g: $(window).scrollTop() will give you the amount you have scrolled from the topmost part of the page. This can be […]

Make jQuery datepicker to popup in different positions

Posted on November 23rd, 2015 by Sachin Kumar

Datepicker is a rich widget of jQuery library . It exposes a lot of properties and methods to make it customizable . Once, while working with it , we needed to popup the datepicker just at side of the textbox . But the default popup position is just below the text box so we had […]

How to get the Integer part of an ID of a clicked button in jQuery

Posted on November 23rd, 2015 by Ashabari Jena

In jQuery, when we want to get the integer part of an “id” on click of a button element , we generally do it by using the substring() method, by taking the initial point from where the integer may start. But we can also do this using a different approach In this example we have […]

How to Restrict Entering of Future Date in Textbox using jQuery

Posted on November 23rd, 2015 by Monalisa Pradhan

We can use Mask plugin of jQuery for Datefield as $(txtBox).setMask(“19/39/9999”) which will accept inputs in mm/dd/yyyy format. While using this we may face problems if it accepts invalid values like : Month value > 12, date value > 31 and also future dates. The solution to this is after giving the date value in […]

Dynamically Place DropDown inside a LI using jQuery

Posted on November 23rd, 2015 by Surama Hotta

Sometimes we have a requirement to change the controls(from label to textbox/label to dropdown) dynamically (based upon user input/event like click of Edit button). In that case what we generally do is create multiple set of controls, and based on the requirement we show & hide these controls. But that creates lot of performance and […]

Programmatically change jQuery accordion

Posted on November 23rd, 2015 by Sachin Kumar

jQuery provides us a rich set of UI controls to be used in our sites like (Datepicker, Tabs, Accordion etc.). Accordion allow us to accommodate more than one panels in one control . Each panel may have different data to display, but at a time we can show only one panel . At one time […]

How to Place Controls dynamically in each Row of a jQGrid.

Posted on November 23rd, 2015 by Surama Hotta

We are using light weight jQuery grid to display Data in a tabular format. But sometimes we need to place some controls(checkbox, button) inside the grid for specific operations. Consider an example where a column needs to display Checkbox in each row of a Grid. jQuery Code: var gridId = jQuery(“#jqMyGrid”).getDataIDs(); //loop through grid rows […]

(jQuery) FromDate to ToDate Validation

Posted on November 23rd, 2015 by Subhranil Dalal

At times, when validating forms we have to validate two date fields, From Date (Start Date) and To Date (End Date) when date pickers are associated with respective fields. Using normal Javascript it is big task to write a validating function. Normally the logic we use to validate From Date and End Date is like. […]

Resize jqGrid width dynamically based on browser Window size

Posted on November 23rd, 2015 by Madhusmita Pradhan

Below mentioned function will help you dynamically resize width of jqGrid according to width of the currently resized browser window. Function: /** * Function for resize the grid according to the width of the resized window * @param string grid_id – jqGrid id used in current page * @param string div_id – parent div_id according […]

jQuery data() method

Posted on November 23rd, 2015 by Abhijit Kalita

It is a nice method provided by jQuery which allows us to store arbitrary data in specific DOM elements. This method gives us the facility to store data using key and value as well as to access the data using the specific keys. In some situations this can be be very useful. Suppose you are […]

Bind jQuery Grid without service call

Posted on November 23rd, 2015 by TUSHAR MISHRA

Query Grid plugin is an Ajax Enabled Javascript control that represents tabular data on web page. It loads data on client side, dynamically through Ajax callbacks. To bind the grid using jqGrid plugin you have to provide raw data in the format of XML data, JSON, or in array format. And for binding the grid […]

jQuery and Asynchronous Postback with UpdatePanel Issue

Posted on November 23rd, 2015 by Aditya Acharya

What  If you are using jQuery in your application then you may be familiar withdocument.ready() function of jQuery. This function executes after all the elements are loaded in the page. So it is a better way to bind the events for elements or to write some initialization Javascript which we want to be called on […]

Using jQuery AJAX Calls to send parameters securely

Posted on November 23rd, 2015 by Madhusmita Pradhan

We are always providing all sorts of validations both at client and server side for security purposes. But some times a small mistake at client end during validation can pass wrong data to the server. So, there are some points that we need to keep in mind, when we pass additional parameters to the server […]

Paging in JQGrid using WCF service

Posted on November 23rd, 2015 by Satyadeep Kumar

Recently I was working with jQGrid when I came across a major block, the solution of which I now wish to share through this tip. In case you don’t know, jQGrid is a free jQuery component which has a lot of features and can be used to display data in tabular format like you do […]

Creating Downloadable PDF in ASP.NET With Client Side Event Call

Posted on November 23rd, 2015 by Priyojit Mondal

Scenario : There will be a button, when user clicks it, a dialog box will open that provides user with two options, either user can directly view or save the pdf file in his/her local machine. The pdf will contain all the details of a perticuler user whose first and last name will be given […]

Call Web Service from JavaScript using jQuery

Posted on November 23rd, 2015 by Narendra Mallik

Suppose we have the following code behind function which is defined in PrintReport.aspx.cs file. [WebMethod] public static string HelloWorld(string name, string crmId, string comment, string phenotype) { return “Hello World”; } Now if we want to do ajax call to this function using jquery we will right something like below in our script file. // […]

Adding Rows To The Table Dynamically Using JQuery

Posted on November 23rd, 2015 by Anish Thakur

In This Scenario,An HTML Page Has One Text Box,One Button And One Table.Here,Suppose I Want To Add Rows To The Table Dynamically On Clicking The “Ok” Button On My Form. Here Is My Simplest Html Form //Starting Of HTML Form <html> <title>HTML FORM</title> <head> <script type=”text/javascript” src=”Scripts/jquery-1.7.2.min.js”></script> <script type=”text/javascript” src=”Scripts/jquery-ui-1.8.19.custom.min.js”> </script> <script type=”text/javascript”> //Entry Point […]

Change Image source on clicking using JQuery

Posted on November 23rd, 2015 by Tapan Kumar

If you are trying to change the image source whenever somebody click on it then here is the best way to achieve this. Just two line of code and your headache is gone. First of all I am taking a HTML image tag and specify a class name for that image tag. In JQuery find […]

jQGrid -To show some columns and hide some columns

Posted on November 23rd, 2015 by Palash Mondal

Here is a simple tip on jqGrid. Sometimes in jqGrid, there might be a requirement that we need to show some columns and hide some columns, let’s say, after save button is clicked. Here is the code for that. HTML: <input type=”button” id=”btnShowHide” value=”Show/Hide Column” onclick=”ShowHideColumn();” /> SCRIPT: … jQuery(“#list”).jqGrid({ url:’Search.aspx?q=1′, datatype: “json”, colNames:[‘Inv No’,’Date’, […]

Select Multiple Radio Button in Aspx Radiobuttonlist

Posted on November 23rd, 2015 by Sibasis Jena

We can select multiple radio button using jquery. Inside document ready function remove the name attribute from each radio button inside the list $(document).ready(function () { $(“#rblIntrestedTechnology input”).each(function () { $(this).removeAttr(“name”); }); }); Put your radiobuttonlist id in place of “rblIntrestedTechnology”

Select the previous or next row of the grid on button click

Posted on November 23rd, 2015 by Palash Mondal

Here is a simple tip on jqGrid. Sometimes in jqGrid, there might be a requirement that we need to select the previous or next row of the grid on button click. So, let’s say that you have selected the 2nd row and now you want to go 3rd row. So you can do that by […]

Window.resize event in IE

Posted on November 23rd, 2015 by Puja Kumari

Window.resize event in IE There are some cases when we will have to do something when the user will resize the window. This is very easy to do with the event window.resize() (except in IE). In IE if we will simply bind the window.resize() in JS, then most of the time there is possibility that […]

Hide all tool-tips in jqGrid

Posted on November 23rd, 2015 by Palash Mondal

Here is a simple tip on jqGrid. Some times there are requirements in the project to hide all the tooltips(that is automatically displayed in all the columns) in jqGrid. So, how we do that? We have to go each column and set the attribute like { title: false } in each column of our grid. […]

Can Css3 Transition replace jQuery animation? Part 2

Posted on November 23rd, 2015 by Subodh Mishra

In previous tip Can Css3 Transition replace jQuery animation ?  I mentioned some of the properties of CSS3 transition.Here i am explaining with a example to make make a Horizontal accordion with CSS3. .. Browser support The browsers which support CSS3 Transition properties are Google Chrome 7+,Opera 10+, Mozillafirefox 4.0 beta,Webkit browser Safari.Transition property is […]

Create an Attractive jQuery Menu with Fadein and Fadeout Effect

Posted on November 23rd, 2015 by Sudhir Tiwari

HTML is very simple, just a list of links. <ul id=”navMenu”> <li><a href=”#”>Test 1</a></li> <li><a href=”#”>Test 2</a></li> <li><a href=”#”>Test 3</a></li> <li><a href=”#”>Test 4</a></li> <li><a href=”#”>Test 5</a></li> <li><a href=”#”>Test 6</a></li> </ul>   CSS is little bit complicated this time, therefore, I have put a lot of comments. I hope it will explain everything you need to […]

How To Attach Events To HTML Elements Created Dynamically

Posted on November 23rd, 2015 by Dipak Panda

In one of my recent applications I had to use a jQuery plugin which need to run when the HTML <li> elements are ready. This plugin creates fancy tool tips for HTML elements having title attribute. The <li> elements were created and appended dynamically to document body, by javascript. So I found that the plugin […]