Tech Junkie Blog - Real World Tutorials, Happy Coding!: JQuery : jQuery.noConflict(); Resolve the $ Conflict

Friday, May 29, 2015

JQuery : jQuery.noConflict(); Resolve the $ Conflict

The JQuery library by design uses only two global namespace so that it would not conflict with other JavaScript libraries.
  • $ - the dollar is used as a reference to JQuery namespace
    • Also used by Prototype library, YUI and mootools
  • jQuery - is also used to reference to jQuery namespace, this the more unique reference of the two options, but nobody really uses it
So what do you do if you wanted to use jQuey and Prototype on the same page?  Well jQuery can concede the $ sign to the other libraries with the code jQuery.noConflict() function

This sample code shows how jQuery gives up the $ sign to the JavaScript library Prototype




<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<title>JQuery No Conflict</title>
<script src="http://ajax.googleapis.com/ajax/libs/prototype/1.7.2.0/prototype.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript">
   jQuery.noConflict();
   
   jQuery(document).ready(function(){
     alert("jQuery still works!");
});
</script>
</head>
<body>
</body>
</html>


Note: The thing you have to remember is that the $ is no longer referring to JQuery, it now belongs to Prototype, if you try to use Prototype and JQuery on the same page without using jQuery.noConflict(), you will get a broken page with Prototype complaining that the $ does not work. However the error is not very description as you can see below in Firefox console.  You will get the TypeError: element.dispatchEvent is not a function.





Even though we've resolved the conflict, we are now left with type jQuery instead of using the $ every time we want to use jQuery.  Well we can assign the object jQuery to another shorthand variable with the code below.


<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<title>JQuery No Conflict</title>
<script src="http://ajax.googleapis.com/ajax/libs/prototype/1.7.2.0/prototype.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript">
   jQuery.noConflict();
   
   var jq = jQuery;
   
   jq(document).ready(function(){
     alert("jQuery still works!");
});
</script>
</head>
<body>
</body>
</html>

The code above assigns the jQuery namespace to the variable jq. It's not as cool as the $, but at least it's less typing.

4 comments:

  1. https://www.youtube.com/watch?v=j3ZlN0r9dxI

    ReplyDelete
  2. I would like to say that this blog really convinced me to do it! Thanks, very good post. Search Bar Firefox 57 Quantum addon

    ReplyDelete
  3. LEGIT FULLZ & TOOLS STORE

    Hello to All !

    We are offering all types of tools & Fullz on discounted price.
    If you are in search of anything regarding fullz, tools, tutorials, Hack Pack, etc
    Feel Free to contact

    ***CONTACT 24/7***
    **Telegram > @leadsupplier
    **ICQ > 752822040
    **Skype > Peeterhacks
    **Wicker me > peeterhacks

    "SSN LEADS/FULLZ AVAILABLE"
    "TOOLS & TUTORIALS AVAILABLE FOR HACKING, SPAMMING,
    CARDING, CASHOUT, CLONING, SCRIPTING ETC"

    **************************************
    "Fresh Spammed SSN Fullz info included"
    >>SSN FULLZ with complete info
    >>CC With CVV (vbv & non vbv) Fullz USA
    >>FULLZ FOR SBA, PUA & TAX RETURN FILLING
    >>USA I.D Photos Front & Back
    >>High Credit Score fullz (700+ Scores)
    >>DL number, Employee Details, Bank Details Included
    >>Complete Premium Info with Relative Info

    ***************************************
    COMPLETE GUIDE FOR TUTORIALS & TOOLS

    "SPAMMING" "HACKING" "CARDING" "CASH OUT"
    "KALI LINUX" "BLOCKCHAIN BLUE PRINTS" "SCRIPTING"
    "FRAUD BIBLE"

    "TOOLS & TUTORIALS LIST"
    =>Ethical Hacking Ebooks, Tools & Tutorials
    =>Bitcoin Hacking
    =>Kali Linux
    =>Fraud Bible
    =>RAT
    =>Keylogger & Keystroke Logger
    =>WhatsApp Hacking & Hacked Version of WhatsApp
    =>Facebook & Google Hacking
    =>Bitcoin Flasher
    =>SQL Injector
    =>Premium Logs (PayPal/Amazon/Coinbase/Netflix/FedEx/Banks)
    =>Bitcoin Cracker
    =>SMTP Linux Root
    =>Shell Scripting
    =>DUMPS with pins track 1 and 2 with & without pin
    =>SMTP's, Safe Socks, Rdp's brute
    =>PHP mailer
    =>SMS Sender & Email Blaster
    =>Cpanel
    =>Server I.P's & Proxies
    =>Viruses & VPN's
    =>HQ Email Combo (Gmail, Yahoo, Hotmail, MSN, AOL, etc.)

    *Serious buyers will always welcome
    *Price will be reduce in bulk order
    *Discount offers will give to serious buyers
    *Hope we do a great business together

    ===>Contact 24/7<===
    ==>Telegram > @leadsupplier
    ==>ICQ > 752822040
    ==>Skype > Peeterhacks
    ==>Wicker me > peeterhacks

    ReplyDelete

Search This Blog