How to avoid jquery library conflicts?

Asked

Viewed 1,067 times

2

Boas, I’ll try to explain why I’m a rookie. Well I need to use a new library, and

this code works perfectly when alone with Oin this example:

< script src="//code.jquery.com/jquery-1.10.2.js">< /script >
<script>
  meu codigo
< /script >

But if need be add more "jquersxxx.js"

form:699 Uncaught TypeError: $(...).minicolors is not a function
common-scripts.js?1455274914:87 Uncaught TypeError: $(...).niceScroll is not a function
sparkline-chart.js?1449132462:21 Uncaught TypeError: $(...).sparkline is not a function

So searching on Google friend, I found the following option:

< script src="//code.jquery.com/jquery-1.10.2.js" >
jQuery.noConflict(); 

meu código

< /script >

But the error continues, all the java of the page simply stops working the same way... I just don’t know how to use this feature

Please can someone show me how to avoid/adjust this? the examples of the net are always theoretical... I’ve been searching for this for 3 days...

Obs: Examples of how to use are always very welcome!

javascript jquery
  • 1

    Note: Not to confuse Java with Javascript, are different things.

  • Have you checked if it’s not javascript that’s disabled? try doing something simple in pure js like alert('js funcionando');.

  • did the test, Javascript works fine! and my local code. in a arqui.html looks good too. But when I put it on the server... where you have more code from other participants... all Javascript for... good, if you have more tips!

  • @Robervalsena 山 本 if the code does not work online the problem may be that your plugins are not being loaded correctly. The error $(...).niceScroll is not a function indicates that your plugin was not inserted in jQuery. Are you including these plugins before or after jQuery? Does your code come before or after plugins scripts? Remonte the part of your code in jsbin and put the link in the question so we can better analyze if the problem is in your code or plugins.

2 answers

2

If you look at documentation of .noConflict() will see that it serves only to avoid conflict with other libs that use the symbol $.

In your case, I think the problem is in the script tag. Script tags with the attribute src should be empty, so remove the code from within and put in another tag, like this:

<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script>
   // seu código aqui 
</script>

  • Ola Guilherme, I edited the question, because Now what is so clearer... could comment again, please? could I explain myself?

1

Place your Jquery code inside a wrapper Jquery:

May be the following:

jQuery(document).ready(function( $ ) {
    // Código JQuery aqui
});

Or else:

jQuery.noConflict();
 
(function( $ ) {
    //Codigo JQuery aqui
})( jQuery );

My favorite is:

$(function(){
    //Codigo JQuery aqui
});

Remember that the symbol $ (syntactic sugar) is a shortcut to an object JQuery().

Example:

<!DOCTYPE html>
<html>
    <head>
        <title>JQuery Teste</title>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
        <script>
            $(function(){
                var resultado = $('#select option:selected').text();
                alert(resultado);
            });
        </script>
    </head>
    <body>
        <select id="select">
            <option selected>Olá, mundo!!!</option>
        </select>
    </body>
</html>

  • No, no. I will edit and put an example.

  • Take a look now

Browser other questions tagged javascript jquery

You are not signed in. Login or sign up in order to post.