CODEWITHSUNDEEP
javascriptjquery
user1633800
user1633800

Reputation: 331

How to use jquery noConflict without changing third party library

I need to use some library provided by our third party written in jquery.we end up having conflicts with $ sign within our codebase once i try to incorporate jquery. i was able to resolve the conflict by creating an alias for $ sign and then update the $ sign with alias within third party library as well. Since it's a code written by third part and i am not very familiar with jquery i would prefer to find a workaround which does not involve updating the third party code itself. I also have an inlinne javascript (also provided by third party) that needs to get fired on the page itself.Any ideas how can i do this? below is the example of jquery files i am using:

<!-- jquery libs -->
<script src="/js/jquery-1.11.1.min.js"></script>
<script src="/js/jquery-ui.min.js"></script>

<!-- third party library using jquery code-->
<script  type="text/javascript" src="/js/jqueryTest.js"></script>

<!-- inline javascript that gets fired on the page itself -->
 <script>
  $('#formvalue').jqueryTest({
   subdomain: 'xyz',
   selectData: function (data) {
   $('#formvalue').val(data.value);
   $('#form').submit();
  });
 </script>

Upvotes: 2

Views: 1842

Answers (2)

Troubleshooter
Troubleshooter

Reputation: 101

This way you can code : 

var jq = $.noConflict();
jq(document).ready(function(){
    jq("button").click(function(){
        jq("p").text("jQuery is still working!");
    });
});

For more learning please refer following link http://alexmarandon.com/articles/widget-jquery-plugins/

Hope It helps :)

Upvotes: 3

schellingerht
schellingerht

Reputation: 5796

It isn't a right approach to edit third party libs, because it's not maintainable.

See this code from https://api.jquery.com/jquery.noconflict/:

<script src="other_lib.js"></script>
<script src="jquery.js"></script>
<script>
    $.noConflict();
    // Code that uses other library's $ can follow here.
</script>

Try this:

<!-- jquery libs -->
<script src="/js/jquery-1.11.1.min.js"></script>
<script src="/js/jquery-ui.min.js"></script>

<!-- third party library using jquery code-->
<script type="text/javascript" src="/js/jqueryTest.js">    </script>

<!-- inline javascript that gets fired on the page itself  <script>
$.noConflict();
$('#formvalue').jqueryTest({
    subdomain: 'xyz',
    selectData: function (data) {
        $('#formvalue').val(data.value);
        $('#form').submit();
    }
});
</script>

(You missed a } in your code).

Upvotes: 0

Related Questions