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 happens 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 your scripts stopping working."

So here comes the benefit of the jQuery noConflict() method which releases the hold on the $ shortcut identifier, so that other scripts can use it.
·         This function gives 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 a shortcut for the first library. You'll still be able to use "jQuery" for another 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!!!
Labels:

Comments

Post a Comment

Popular posts from this blog

Error 405 : ASP.NET Core Web API PUT and DELETE Methods not allowed

Recently, while working with .Net core API I came across the issue of “Error 405 — Methods not Allowed” After some research, I found out that both GET and POST requests working fine but neither PUT nor DELETE requests working. Another thing is that the PUT and DELETE request was also working fine on my local machine but failed when we host on our Azure server. When I explored the issue on the web it led me to the conclusion that WebDAVModule seems to set PUT and DELETE request methods disabled by default and due to that PUT and DELETE throw 405 errors. To make the PUT and DELETE requests work, we need to override the WebDAVModule setting in web.config file by adding the below settings under “ system.webServer ”. < system.webServer >   < modules runAllManagedModulesForAllRequests = " false " >     < remove name = " WebDAVModule " />   </ modules > </ system.webServer > There may be 2 web.config files in y...
Post a Comment
Read more

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
4 comments
Read more

How to set Swagger as the default start page for API hosted on the Azure web app?

I created an Asp.Net Core 2.x Web API and configured Swagger on it, below is the code added in Configure method under Startup.cs file, for full swagger configuration, check here //Add swagger configuration app.UseSwagger(); app.UseSwaggerUI(c => {     c.SwaggerEndpoint( "../swagger/v1/swagger.json" , "Test API V1" ); }); On my local machine when I run the API it is automatically redirected to the Swagger page. However, when I hosted this API as an Azure web app it is not redirecting directly to the Swagger and to access the swagger, I had to append /swagger in the URL, for example, https://testapi.azurewebsites.net/swagger/ Solution: Set RoutePrefix to string.Empty under app.UseSwaggerUI like below: app.UseSwaggerUI(c => {     c.SwaggerEndpoint( "../swagger/v1/swagger.json" , "Test API V1" );      c.RoutePrefix = string .Empty; // Set Swagger UI at apps root }); And that’s it, now when you b...
Post a Comment
Read more