jquery.min.js Conflicts - javascript

When I add the below script ,it effecting other functionality of the project(Spring Application)
<script type="text/javascript" src="${ctx}/js/jquery-1.3.2.min.js"></script>
My Code
<script type="text/javascript" src="${ctx}/js/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="${ctx}/js/easy.notification.js"></script>
<script type="text/javascript">
$.noConflict();
$(function() {
$("input[type='text']").blur(function() {
if (this.value === '') {
$.easyNotificationEmpty('Warning : You left this field empty !');
} else {
$.easyNotification('Saved Successfully !');
}
})
});
</script>
I suspect that it because of the conflict of jquery-1.3.2.min.js
I have tried $.noConflict();, but am not getting desired results.
Please help me to resolve this problem,
Thanks in advance.

Try this,
jQuery(function($) {
$("input[type='text']").blur(function() {
if (this.value === '') {
$.easyNotificationEmpty('Warning : You left this field empty !');
} else {
$.easyNotification('Saved Successfully !');
}
})
});

Use $.noConflict(); before you include new jquery plugin like below,
//your old plugin here
<script type="text/javascript">
$.noConflict();
</script>
// new plugin here
//new script here

Try implementing jQuery.noConflict on the alias you'll be using on the script that causes other scripts to break.
var someAlias = $.noConflict();
And use someAlias instead of $ on the script that causes the problem.

You could test that and see if this makes any difference:
(function ($) {
$(function() {
$("input[type='text']").blur(function() {
if (this.value === '') {
$.easyNotificationEmpty('Warning : You left this field empty !');
} else {
$.easyNotification('Saved Successfully !');
}
})
});
})(jQuery.noConflict(true))
For example:
http://jsfiddle.net/6zXXJ/

I use with TRUE,... this work!:
//your old plugin here
<script type="text/javascript">
$.noConflict(true);
</script>
// new plugin here

Related

How to include a jquery plugin in your code

This may be a really dumb question but I'm having trouble including a jquery plugin in my code.
The plugin I'm referring to is: http://davidlynch.org/projects/maphilight/docs/
I want to mimic something very similar to the following:
http://jsfiddle.net/keith/PVpgK/
But when I copy the code over, I keep getting error messages saying "maphilight is not a function"
How do I use a jquery plugin in my code? Thank you
$(function() {
//using the jquery map highlight plugin:
//http://davidlynch.org/js/maphilight/docs/
//initialize highlight
$('.map').maphilight({strokeColor:'808080',strokeWidth:0,fillColor:'00cd27'});
//hover effect
$('#maplink1').mouseover(function(e) {
$('#map1').mouseover();
}).mouseout(function(e) {
$('#map1').mouseout();
}).click(function(e) { e.preventDefault(); });
// initialize tabbing
$(".tabs area:eq(0)").each(function(){
$(this).addClass("current");
});
$(".tab-content").each(function(){
$(this).children(":not(:first)").hide();
});
//map clicks
$(".tabs area").click(function(){
//This block is what creates highlighting by trigger the "alwaysOn",
var data = $(this).data('maphilight') || {};
data.alwaysOn = !data.alwaysOn;
$(this).data('maphilight', data).trigger('alwaysOn.maphilight');
//there is also "neverOn" in the docs, but not sure how to get it to work
if ($(this).hasClass("current") == false)
{
var thisTarget = $(this).attr("href");
$(this).parents(".tabs").find('area.current').removeClass('current');
$(this).addClass('current');
$(this).parents(".tabs").nextAll(".tab-content").children(":visible").fadeOut(1, function() {
$(thisTarget).fadeIn("fast");
});
}
return false;
});
});
You need to include the link to jquery in your html header.
1) Download jquery from jQuery.com
2) Link to downloaded file in your header
Like so:
<head>
...
<script src="/path/to/jquery-1.11.3.min.js"></script>
...
</head>
As the previous answer. But put them in the bottom of the body tag.
<html>
<head>
</head>
<body>
<script src="../path/to/jquery-1.11.3.min.js"></script>
<script src="http://davidlynch.org/js/maphilight/jquery.maphilight.min.js"></script>
</body>
</html>
you need to add the following to the header of your html code
<script type="text/javascript" src="http://davidlynch.org/js/maphilight/jquery.maphilight.min.js">
</script>

Loading a navigation menu, and then selecting the active class with JQuery, but it's not working

I have a file, header.html, with my navigation menu. I have the following code:
<head>
<script>
$(function(){
$("#header").load("header.html");
console.log("loaded");
});
</script>
</head>
<body>
<div id="header"></div>
...
</body>
And then I have the following code to add the class "active" to the current tab:
function selectActive()
{
var pgurl = window.location.href.substr(window.location.href.lastIndexOf("/")+1);
$(".inactive").each(function(){
if($($(this).children("a")[0]).attr("href") == pgurl || $($(this).children("a")[0]).attr("href") == '' )
{
$(this).addClass("active");
}
});
};
I've tried to run selectActive() several ways, including $(window).load and $(window).ready and neither seems to work. There is a function call to selectActive(), but neither makes the change. (I've tried selectActive() from the console and it works as expected).
So you just need that function to run on load? use $(document).ready() as mentioned in comments. :)
$(document).ready(function selectActive() {
var pgurl = window.location.href.substr(window.location.href.lastIndexOf("/") + 1);
$(".inactive").foreach(function () {
if ($(this).children("a")[0].attr("href") === pgurl ||
$(this).children("a")[0].attr("href") === '')
{
$(this).addClass("active");
}
});
});
If you have already tried this with no success, make sure you are referencing JQuery somewhere, as that is required for this to work.

$(document).ready(function () { ... won't fire

I have the following code at the end of one of my Views:
#section Scripts {
<script type="text/JavaScript">
$(document).ready(function () {
alert("!!!");
});
</script>
}
What ever I do, I can't get it to fire. I have checked and further up in the code JQuery is included. Using the suggestion here I changed my code to the following to confirm that jquery was correctly loaded. This gives the 'Yeah!' alert when loading the page.
#section Scripts {
<script type="text/JavaScript">
window.onload = function () {
if (window.jQuery) {
// jQuery is loaded
alert("Yeah!");
} else {
// jQuery is not loaded
alert("Doesn't Work");
}
}
</script>
}
The end of the source in my page looks like:
<script src="/Scripts/jquery-1.9.1.js"></script>
<script src="/Scripts/jquery-ui-1.8.24.js"></script>
<script src="/Scripts/bootstrap.js"></script>
<script src="/Scripts/breakpoints.js"></script>
<script src="/Plugins/jquery-unveil/jquery.unveil.js"></script>
<script src="/Plugins/jquery-fademenu/jquery.fademenu.js"></script>
<script src="/Plugins/jquery-block-ui/jqueryblockui.js"></script>
<script src="/Plugins/jquery-slimscroll/jquery.slimscroll.js"></script>
<script src="/Plugins/bootstrap-select2/select2.js"></script>
<script src="/Plugins/bootstrap-datepicker/js/bootstrap-datepicker.js"></script>
<script src="/Plugins/dropzone/dropzone.js"></script>
<script src="/Scripts/core.js"></script>
<script type="text/JavaScript">
$(document).ready(function () {
alert("!!!");
});
</script>
<!-- Visual Studio Browser Link -->
<script type="application/json" id="__browserLink_initializationData">
{"appName":"Chrome","requestId":"6301d560dc274f4ea5ec24b8e0c2a19f"}
</script>
<script type="text/javascript" src="http://localhost:50280/1cd42285f06243669b1fd5837f1f05c3/browserLink" async="async"></script>
<!-- End Browser Link -->
</body>
</html>
I can't work out where I am going wrong...
if this coode works properly
window.onload = function () {
if (window.jQuery) {
// jQuery is loaded
alert("Yeah!");
} else {
// jQuery is not loaded
alert("Doesn't Work");
}
}
and this code doesn't :
$(document).ready(function () {
alert("!!!");
});
your likely problem is that there is a conflict with the dollar sign $
I would type out jQuery instead of using the dollar sign , or of course you can do something like this:
var j = jQuery.noConflict();
then you can do use the j where you used to use $
OR... there is simply just an error in the console that you still have not responded about , if that is the case I will update answer
EDIT::
The reasons that you code was not executing was because javascript is weird in the sense that if there is an error anywhere in the block of javascript code then nothing below it will be executed. That is why I asked if there were any console error's. Checking the console is the first step to solving any javascript error.
remove #section Scripts block put script block only and try... if not then remove all js use only jquery and try it will definatly. now add one by one script and find one which is conflicting. .

Jquery TypeError: $ is not a function

I got this script:
<script>
$(document).ready(function () {
$('a[#href^= ""] img').parent().click(function () {
var linkz = $(this).attr("href");
if(linkz.toLowerCase().indexOf("http: //www.website.com") >= 0) {
window.open($(this).attr("href"));
return false;
} else {
window.open("http://www.website.com/p/img.html?img=" + $(this).attr("href "));
return false;
}
});
});
</script>
To open all images in a new page passing the image url in the new link. but i'm getting
TypeError: $ is not a function.
I've tried to add jQuery(document) instead of the $(document) but then i got the
$('a[#href^=""] img') TypeError: $ is not a function
here.
Either you didn't include jQuery, or else you ran noConflict() and it released control of $.
http://api.jquery.com/jQuery.noConflict/
If you used noConflict, you just need to use jQuery() throughout, including jQuery('a[#href^=""] img').
It looks like you're not including jQuery correctly as the browser doesn't know what $ is. Make sure you include something like this in <head> to include jQuery:
<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
you havent added the jquery add this at <head></head>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
if you are testing locally , and you have a llow bandwith , then download the script one time **
http://code.jquery.com/jquery-1.9.1.min.js **to your folder and
use <script src="jquery-1.9.1.min.js"></script>
Try this;
<script language="JavaScript" type="text/javascript" src="jquery/jquery.js"></script>
<script>
jQuery.noConflict();
(function ($) {
function readyFn() {
// Set your code here!!
}
$(document).ready(readyFn);
})(jQuery);
</script>
Or in your case:
<script language="JavaScript" type="text/javascript" src="jquery/jquery.js"></script>
<script>
jQuery.noConflict();
(function ($) {
function readyFn() {
$('a[#href^= ""] img').parent().click(function () {
var linkz = $(this).attr("href");
if(linkz.toLowerCase().indexOf("http: //www.website.com") >= 0) {
window.open($(this).attr("href"));
return false;
} else {
window.open("http://www.website.com/p/img.html?img=" + $(this).attr("href"));
return false;
}
});
}
$(document).ready(readyFn);
})(jQuery);
</script>

Hide div if URL contains word

I need to hide a div if the url of the page contains a certain word. Thanks to this site I have been able to successfully find if the url contains the word. This code works:
<script type="text/javascript">
if (window.location.href.indexOf("Bar-Ends") != -1) {
alert("your url contains bar ends");
}
</script>
but for some reason it will not work to hide a div, like this:
<script type="text/javascript">
if (window.location.href.indexOf("Bar-Ends") != -1) {
$("#notBarEnds").hide();
}
</script>
<div id="notBarEnds">this is not bar ends</div>
Anyone have any idea what is wrong with this code?
Any help is greatly appreciated
Thanks
Notice the reorder:
<div id="notBarEnds">this is not bar ends</div>
<script type="text/javascript">
if (window.location.href.indexOf("Bar-Ends") != -1) {
$("#notBarEnds").hide();
}
</script>
Or
<script type="text/javascript">
$(document).ready(function () {
if (window.location.href.indexOf("Bar-Ends") != -1) {
$("#notBarEnds").hide();
}
}
</script>
Waiting for the entire document to be "ready"
Try:
$(document).ready(function () {
if (window.location.href.indexOf("Bar-Ends") != -1) {
$("#notBarEnds").hide();
}
});
Your div hasn't necessarily loaded yet when the script runs.
You're running an inline script as the HTML is being constructed, there isn't a div named #notBarEnds at the time that the script runs, you need to run it as a function after the document has loaded.
i write it without checking it, if doesn't work change de regex :D
$(document).on('ready', function()
{
if(window.location.href.match(/Bar\-Ends/i))
$("#notBarEnds").hide();
});

Categories

Resources