Skip to main content

Using jQuery with Other Libraries - The noConflict() Method of jQuery

As you are already aware that jQuery uses the $ sign as a shortcut for jQuery.
But what if any other JavaScript frameworks like Prototype, MooTools, Knockout, JavaScript MVC, Google Web Toolkit, Google Closure, or Ext JS also use the $ sign as a shortcut or what happen if you are using more than one jQuery library on your page.
"In such cases you have two different frameworks or libraries using the same shortcut, which might result in that your scripts stop working."

So here comes the benefit of jQuery noConflict() method which releases the hold on the $ shortcut identifier, so that other scripts can use it.
·         This function give control of the $ variable back to whichever library first implemented it.
·         This helps to make sure that jQuery doesn't conflict with the $ object of other libraries.

Example 1: Use $ as shortcut for first library. You'll still be able to use "jQuery" for other library to avoid conflict.

<html>
    <head>
        <script src="prototype.js"></script>
        <script src="jquery.js"></script>
        <script>
            jQuery.noConflict();

            // Use jQuery via jQuery(...)
            jQuery(document).ready(function () {
                jQuery("div").hide();
            });

            // Use Prototype with $(...)
            $('txt').hide();
        </script>
    </head>
</html>

Example 2: Use $ as shortcut for first library. If you want another library with shortcut or any other nice name you want instead of writing jQuery, you can do it with noConflict method as:

<html>
    <head>
        <script src="prototype.js"></script>
        <script src="jquery.js"></script>
        <script>
            var $j = jQuery.noConflict();

            // Use jQuery via $j(...)
            $j(document).ready(function () {
                $j("div").hide();
            });

            // Use Prototype with $(...)
            $('txt').hide();
        </script>
    </head>
</html>

Cheers Friends!!!

Popular posts from this blog

C#: Merging Excel cells with NPOI HSSFWorkbook

In this post we’ll see how to merge the two or more cell with each other while creating the excel sheet using NPOI.
Mentioned below is code to merge multiple cells, in this example we are merging first cell to fifth cell of first row (you can adjust row or cell range by passing particular parameters in CellRangeAddress).
//Created new Workbook var hwb = new NPOI.HSSF.UserModel.HSSFWorkbook(); //Create worksheet with name. var sheet = hwb.CreateSheet("new sheet"); //Create row and cell. var row = sheet.CreateRow(0); var cell = row.CreateCell(0); ; //Set text inside cell cell.SetCellValue("This is Merged cell"); cell.CellStyle.WrapText = true; //define cell range address // parameters: -> first row to last and first cell to last cell var cra = new NPOI.SS.Util.CellRangeAddress(0, 0, 0, 4); //Add merged region to sheet. sheet.AddMergedRegion(cra);
Hope this solution helps you J

Read and parse a CSV file into an array of rows and columns in C#

The following PopulateCsvIntoArraymethod used to read the CSV file into a two-dimensional array of strings.
I have included explanation of method lines, wherever needed. ///<summary> /// Populate the CSV file into an array, /// We assume that every line has the same number of fields and there may be blank lines. ///</summary> ///<returns></returns> privatestring[,] PopulateCsvIntoArray() { // Get path of CSV file. var path = Server.MapPath("~/Folder_Name/testfile.csv"); // Get the file's text using ReadAllText method. string fileData = System.IO.File.ReadAllText(path);
// Split CSV data into lines.     fileData = fileData.Replace('\n', '\r'); string[] lines = fileData.Split(newchar[] { '\r' }, StringSplitOptions.RemoveEmptyEntries);
// Get rows and columns counts. int totalRows = lines.Length;

Calculate Sum and average of two or more Textbox values using JQuery

We can calculate sum and average of values entered in textboxes with the help of small piece of jQuery code.
First of all let’s create a HTML form where we’ll ask user to enter marks in each subject, under body section add following HTML:
<tableclass="demo-table"> <trclass="label"> <tdcolspan="2">Please enter marks(0-99):</td> </tr> <tr> <td>English</td> <td> <inputtype="text"class="txtMarks"name="txtMarks"