Can't get jQuery stop conflicting

StackOverflow https://stackoverflow.com/questions/21109657

  •  27-09-2022
  •  | 
  •  

Question

Before going to the detail, I'd like to say that I did a lot of searching and tried noConflict() but no luck. Please correct me if I used it not correctly, don't just give me the link to any answered question which suggest the OP to use noConflict().

I have a html form which use two jQuery function, one for styling tooltips, one for uploading file (both of them are downloaded from the internet, I have no idea how to use jQuery). Both of them work perfectly, as long as the other script not included. I'm finding a way to have both function working together.

This is my HTML code: (or check this link: http://yurivn.net/imageuploader/index1.php)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org

/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Google Picasa Image Uploader</title>

<link rel="stylesheet" href="http://yurivn.net/imageuploader/style.css" type="text/css" />
<!-- tooltips styling script --> 
<link rel="stylesheet" href="http://yurivn.net/imageuploader/tooltip.css"/>
<script src="http://yurivn.net/imageuploader/tooltip1.js"></script>
<script src="http://yurivn.net/imageuploader/tooltip2.js"></script>
<!-- upload script --> 
<script  type="text/ecmascript" src="http://yurivn.net/imageuploader/jquery.js?v=3.1"></script>
<script  type="text/ecmascript" src="http://yurivn.net/imageuploader/script_embed.js?v=3.1"></script>
<script>
$(function() {
$( document ).tooltip();
});
</script>
</head>

<body>
<div id="embed" style="display: inline-block;"></div><div id="status" style="display: inline-block;"></div>
<div id="result" style="display:none"></div>
<div><textarea class="primary textbox" id="links" name="onlinelink" readonly></textarea></div>
<input type="text" title="this tooltip should be styled"/>
</body>
</html>

The upload script worked, but tooltip not worked, and vice versa after adding noConflict() like this:

<script>
jQuery.noConflict();
$(function() {
$( document ).tooltip();
})(jQuery);
</script>

What am I missing?

P/s: I used absolute URL for those included script instead of pasting them here, which will make my question become too long. If you want to check those script, please check these URL out, thank you very much!

Was it helpful?

Solution 2

In some situations I have encountered some conflicts such like yours but often found that putting jQuery functions in the end of document right before </body> to be the best practice instead of putting it inside <head>. But the correct formating of code that was suggested by @RobH is the correct snippet.

See working jsfiddle: http://jsfiddle.net/farondomenic/ku7m7/1/

OTHER TIPS

You're using it wrong :)

<script>

    jQuery.noConflict();
    // $ no longer references jQuery.

    (function($) {
        // use $ in here:
        $(function () {
            $(document).tooltip();
        });
    }(jQuery));

</script>
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top