How do I use multiple jquery version on a single page? I have two different jquery version and both are necessary for different functions but both versions are conflicting each other.if i will use jquery noconflict then products scripts won't be work?
<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
oldjq = jQuery.noConflict(true);
</script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js">
</script>
Jquery 1.9.1 Need To Run This Script
<script>
$(document).ready(function () {
$('input:checkbox').click(function(){
var $inputs = $('input:checkbox')
if($(this).is(':checked')){
$inputs.not(this).prop('disabled',true);
}else{
$inputs.prop('disabled',false);
}
})
})
</script>
<input type="checkbox">
<input type="checkbox">
<input type="checkbox">
<input type="checkbox">
<input type="checkbox" />
Jquery 1.4.2 Need To Run These Scripts
<script type="text/javascript" src="products2/js/prototype.js"></script>
<script type="text/javascript" src="products2/js/common.js"></script>
<script type="text/javascript" src="products2/js/menu.js"></script>
<script type="text/javascript" src="products2/js/banner_pack.js"></script>
<script type="text/javascript" src="products2/js/light_box.js"></script>
<script type="text/javascript" src="products2/js/cloud-zoom.1.0.2.js"></script>
<script type="text/javascript" src="products2/js/jquery.easing.1.3.js"></script>
<script type="text/javascript" src="products2/js/jquery.mix.js"></script>
Problem is Solved Now Here THe Final COde
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript">
(function ($) {
$(document).ready(function () {
$('input:checkbox').click(function(){
var $inputs = $('input:checkbox')
if($(this).is(':checked')){
$inputs.not(this).prop('disabled',true); // <-- disable all but checked one
}else{
$inputs.prop('disabled',false); // <--
}
})
});
})(jQuery);
</script>
<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="products2/js/prototype.js"></script>
<script type="text/javascript" src="products2/js/common.js"></script>
<script type="text/javascript" src="products2/js/menu.js"></script>
<script type="text/javascript" src="products2/js/banner_pack.js"></script>
<script type="text/javascript" src="products2/js/light_box.js"></script>
<script type="text/javascript" src="products2/js/cloud-zoom.1.0.2.js"></script>
<script type="text/javascript" src="products2/js/jquery.easing.1.3.js"></script>
<script type="text/javascript" src="products2/js/jquery.mix.js"></script>
Since it's only a few lines of code, I would suggest amending the chunk which requires jQuery 1.9.1 so that it works with jQuery 1.4.2
I've updated it below to work with jQuery 1.4.2. I use the attr method rather than prop to manipulate the disabled property (you can check the docs here to see if this is likely to cause any issues). This solution avoids running two instances of jquery and avoids having to find updated versions of all the libraries / plug-ins you're already using.
$(document).ready(function () {
$('input:checkbox').click(function(){
var $inputs = $('input:checkbox')
if($(this).is(':checked')){
$inputs.not(this).attr('disabled',true);
}else{
$inputs.attr('disabled',false);
}
})
})
See fiddle here.
Yes, after you load your first version, do this
var $j = jQuery.noConflict();
Load your second version of jQuery.
Refer to the first version with $j and the second as $
OK, here is one possible solution - you could bind new version of jQuery to the closure.
But my advice is DON'T DO THAT, it is like shooting yourself to your own leg.
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
// Jquery 1.9.1 Need To Run This Script:
<script type="text/javascript">
(function ($) {
$(document).ready(function () {
// code that uses jQuery 1.9.1
});
})(jQuery);
</script>
// ...
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
//Jquery 1.4.2 Need To Run These Scripts:
<script type="text/javascript" src="products2/js/prototype.js"></script>
<script type="text/javascript" src="products2/js/common.js"></script>
// ...
Related
I have a problem loading jQuery into laravel app. I tried checking if it's installed in the first place and I get success. Using this:
if (typeof jQuery == "undefined") {
alert("JQuery is not installed");
} else {
alert("JQuery is installed correctly!");
}
But then I tried checking if it's loading with code:
window.onload = function() {
if (window.jQuery) {
// jQuery is loaded
console.log("jQuery has loaded!");
} else {
// jQuery is not loaded
console.log("jQuery has not loaded!");
}
}
I get no response at all. What could be the problem?
This is my scripts in file (last 2 lines):
<script src="assets/bootstrap/js/bootstrap.min.js"></script>
<script src="assets/js/bs-init.js"></script>
<script src="assets/js/4-Col-Small-Slider.js"></script>
<script src="assets/js/A-working-Rating-option-for-Contact-Forms.js"></script>
<script src="assets/js/Add%20an%20upsell.js"></script>
<script src="assets/js/add%20to%20cart%20button.js"></script>
<script src="assets/js/ask%20payment%20method.js"></script>
<script src="assets/js/cheque.js"></script>
<script src="assets/js/currency.js"></script>
<script src="assets/js/easings.js"></script>
<script src="assets/js/flickity%20pkgd.js"></script>
<script src="assets/js/flickity.js"></script>
<script src="assets/js/meals%20sizes.js"></script>
<script src="assets/js/menu.js"></script>
<script src="assets/js/modal.js"></script>
<script src="assets/js/plans.js"></script>
<script src="assets/js/realtime%20typing%20card%20expires.js"></script>
<script src="assets/js/realtime%20typing%20card%20number.js"></script>
<script src="assets/js/realtime%20typing%20cardholder%20cvc.js"></script>
<script src="assets/js/realtime%20typing%20cardholder.js"></script>
<script src="assets/js/realtime%20typing.js"></script>
<script src="assets/js/remove%20product%20from%20cart.js"></script>
<script src="assets/js/section%20click.js"></script>
<script src="assets/js/SlideShow.js"></script>
<script src="assets/js/Swiper-Slider-Card-For-Blog-Or-Product.js"></script>
<script src="assets/js/Swiper-Slider.js"></script>
<script src="assets/js/swiper.js"></script>
<script src="assets/js/swipermin.js"></script>
<script src="assets/js/switches%20on%20add%20a%20meal%20page.js"></script>
<script src="assets/js/theme.js"></script>
<script src="assets/js/time.js"></script>
<script src="assets/js/upsell.js"></script>
<script src="{{ asset('js/app.js') }}"></script>
<script src="assets/js/jquery.min.js"></script>
I'm using Laravel mix, it seems there's problem somewhere in app.js I suppose.
I managed to load jQuery, I get success message, but it still doesn't work. For example:
$(document).ready(function () {
$("#category_image").on("change", function () {
var image = $("#category_image");
var preview = $("#preview-image");
var objectURL = URL.createObjectURL(e.target.files[0]);
preview).css("background-image", 'url('+objectURL+')');
})
});
This code doesn't work, unless I messed something up. If I use plain javascript onchange and I use jQuery id selector it works. Am I doing this function wrong?
I am trying convert the html div element to pdf file using jspdf. i have included all js script including form_html.js. still i am getting "TypeError: doc.fromHTML is not a function".
<script type="text/javascript" src="jsPDF-master/jspdf.js"></script>
<script type="text/javascript" src="jsPDF-master/jspdf.plugin.addimage.js"></script>
<script type="text/javascript" src="jsPDF-master/jspdf.plugin.cell.js"></script>
<script type="text/javascript" src="jsPDF-master/jspdf.plugin.ie_below_9_shim.js"></script>
<script type="text/javascript" src="jsPDF-master/jspdf.plugin.javascript.js"></script>
<script type="text/javascript" src="jsPDF-master/jspdf.plugin.from_html.js"></script>
<script type="text/javascript" src="jsPDF-master/libs/FileSaver.js/FileSaver.js"></script>
<script type="text/javascript" src="jsPDF-master/jspdf.plugin.sillysvgrenderer.js"></script>
<script type="text/javascript" src="jsPDF-master/jspdf.plugin.split_text_to_size.js"></script>
<script type="text/javascript" src="jsPDF-master/jspdf.plugin.standard_fonts_metrics.js"></script>
<script type="text/javascript" src="jsPDF-master/jspdf.PLUGINTEMPLATE.js"></script>
<script src="jspdf.debug.js"></script>
<script src="jspdf.plugin.from_html.js"></script>
and javascript is
jQuery(function($) {
$("#button1").click(function(){
var doc = new jsPDF();
var specialElementHandlers = {
'#simple': function (element, renderer) {
return true;
}
};
var source = $('#simple').html();
doc.fromHTML(source, 0.5, 0.5, {
'width': 75,'elementHandlers': specialElementHandlers
});
doc.output("dataurlnewwindow");
});
});
Pls help me in fixing this
i might be wrong because i have not run your code but i notice is you have not included a jquery library into the script tag and you are using a jquery function. Try including Jquery and retry hope that solves your problem..
I downloaded two scripts from the net,
one looks like this
<script src="jqzoom/js/jquery-1.6.js" type="text/javascript"></script>
<script src="jqzoom/js/jquery.jqzoom-core.js" type="text/javascript"></script>
<link rel="stylesheet" href="jqzoom/css/jquery.jqzoom.css" type="text/css">
<script>
$(function () {
$('.jqzoom').jqzoom({
zoomType: 'standard',
lens:true,
preloadImages: false,
alwaysOn:true
});
});
</script>
and the other
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script> window.jQuery || document.write('<script src="booklet/jquery-2.1.0.min.js"><\/script>') </script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
<script> window.jQuery.ui || document.write('<script src="booklet/jquery-ui-1.10.4.min.js"><\/script>') </script>
<script src="booklet/jquery.easing.1.3.js"></script>
<script src="booklet/jquery.booklet.latest.js"></script>
<script>
$(function () {
$("#mybook").booklet();
});
</script>
When I place both in one page only the latter works, however individually they work fine.
I understand you can't call jQuery twice within the same page, but when I remove all the jQuery additions and just use /jquery.js none of them work. This is the scripts as I downloaded them, I figured the HTML between them is not needed to post here.
How can I make both work on one page?
You are adding 2 js libraries in first script and 4 to the second script. All the libraries essential to run their respective scripts.
One problem here is, you are adding jQuery twice which is 1.6 and 2.1. Which is unnecessary.
Try doing like this:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script> window.jQuery || document.write('<script src="booklet/jquery-2.1.0.min.js"><\/script>') </script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
<script> window.jQuery.ui || document.write('<script src="booklet/jquery-ui-1.10.4.min.js"><\/script>') </script>
<script src="booklet/jquery.easing.1.3.js"></script>
<script src="booklet/jquery.booklet.latest.js"></script>
//required for first script
<script src="jqzoom/js/jquery.jqzoom-core.js" type="text/javascript"></script>
<link rel="stylesheet" href="jqzoom/css/jquery.jqzoom.css" type="text/css">
//-------------
<script>
$(function () {
//this is your second script
$("#mybook").booklet();
//this is your first script
$(function () {
$('.jqzoom').jqzoom({
zoomType: 'standard',
lens:true,
preloadImages: false,
alwaysOn:true
});
});
</script>
This should keep your second script running. And if first doesn't run then it means 'jqzoom' plugin is not compatible with jquery 2.1
Most problems from older jQuery versions are solved in their Migrate Plugin, you should check that out.
Just add the newest version and that plugin and your scripts should theoretically work.
with all other library include j query standard librery at once.
<script src="jqzoom/js/jquery-1.6.js" type="text/javascript"></script>
<script src="jqzoom/js/jquery.jqzoom-core.js" type="text/javascript"></script>
<link rel="stylesheet" href="jqzoom/css/jquery.jqzoom.css" type="text/css">
<script> window.jQuery || document.write('<script src="booklet/jquery-2.1.0.min.js"><\/script>') </script>
<script> window.jQuery.ui || document.write('<script src="booklet/jquery-ui-1.10.4.min.js"><\/script>') </script>
<script src="booklet/jquery.easing.1.3.js"></script>
<script src="booklet/jquery.booklet.latest.js"></script>
<script>
$(function () {
$('.jqzoom').jqzoom({
zoomType: 'standard',
lens:true,
preloadImages: false,
alwaysOn:true
});
$("#mybook").booklet();
});
</script>
I put it all in one page and it should work and is not working:
<html>
<head> <link href="css_js/styles.css" rel="stylesheet" type="text/css">
<script language="JavaScript1.2" src="css_js/jquery-1.7.1.min.js" type="text/javascript"></script>
<script language="JavaScript1.2" src="css_js/jquery-ui-1.8.17.custom.min.js" type="text/javascript"></script>
<script language="JavaScript1.2" type="text/javascript">
function popup() {
alert('test');
var popup = $('.newpopup');
popup.draggable();
popup.resizable();
popup.html('<p>Where is pancakes house?</p>');
popup.show('fast');
}
$('button').click(popup);
</script>
</head>
<body>
<div class='newpopup'></div>
<button>popup</button>
</body>
</html>
I want to make a simple popup / dialog with Jquery but it is not working at all. What is wrong with it?
Call the function on document.ready
$(document).ready(function(){
$('button').click(function(){
popup();
});
})
OR
$(function(){
$('button').click(function(){
popup();
});
})
You should run your function in jQuery style:
$('button').click(function() {
popup();
return false; //optional
}
Are you sure the src reference is valid when you're including jquery? I've got your code working fine on this jsfiddle using the Google-hosted versions of JQuery and JQuery-ui.
I use BBC carousel http://www.bbc.co.uk/glow/docs/1.7/furtherinfo/widgets/carousel/. Here is my script code
<script src="/themes/javascript/glow/1.7.7/core/core.js" type="text/javascript"></script>
<script type="text/javascript">
glow.ready(function() {
var carousel4 = new glow.widgets.Carousel("#snapwrap",{
loop: true,
});
});
</script>
it generates Error: glow.widgets is undefined. What am I doing wrong?
Ok, I figured out the problem: You're not including the widgets script or css, per the Widgets section of http://www.bbc.co.uk/glow/docs/articles/getting_started.shtml
So, to resolve your error, you need to modify your script so that it looks like this:
<script src="/themes/javascript/glow/1.7.7/core/core.js" type="text/javascript"></script>
<script src="/themes/javascript/glow/1.7.7/widgets/widgets.js" type="text/javascript"></script>
<link href="/themes/javascript/glow/1.7.7/widgets/widgets.css" type="text/css" rel="stylesheet" />
<script type="text/javascript">
glow.ready(function() {
var carousel4 = new glow.widgets.Carousel("#snapwrap",{
loop: true,
});
});
</script>