" Live as if you were to die tomorrow. Learn as if you were to live forever.. "
- Mahatma Gandhi
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 […]
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 […]
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 […]
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 […]
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 […]
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 […]
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, […]
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 […]
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 […]
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 […]
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 […]
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 […]
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 […]
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 […]
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 […]
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 […]
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 […]
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 […]
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, […]
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 […]
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 […]
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 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 […]
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 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” […]
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 […]
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 […]
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 […]
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 […]
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 […]
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 […]
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 […]
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 […]
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 […]
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 […]
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 […]
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 […]
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 […]
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 […]
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 […]
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 […]
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 […]
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 […]
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. […]
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 […]
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 […]
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 […]
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 […]
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 […]
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 […]
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 […]
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. // […]
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 […]
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 […]
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’, […]
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”
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 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 […]
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. […]
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 […]
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 […]
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 […]
Just post your software or programming issues on this innovative platform and get instant and relevant solutions from seasoned professionals.