JotForm conflict with JQuery - javascript

I am trying to use JQuery datepicker along with Jotform in my html page.
but it seems that jquery and jotform dont get along after all .
<script type="text/javascript" src="js/jquery.min.1.8.3.js"></script>
<script src="js/jotform.js" type="text/javascript"></script>
If i eliminate first line of above code the jotform works fine and if i eliminate the second line and keep first line the datepicker will work fine. (Jotform is an online form builder)
There is a conflict record since 2011 but i cant find if that is solved or not.
$(function() {
//-----------------------------------
// Show Picker
$('#startDate').datepicker({
showButtonPanel: true
});
//-----------------------------------
// Show Picker
$('#dueDate').datepicker({
showButtonPanel: true
});
});
The following is part of the section of my code
<link rel="stylesheet" type="text/css" href="css/jNotify.jquery.css" media="screen" />
<script type="text/javascript" src="js/jNotify.jquery.js"></script>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script src="js/jotform.js" type="text/javascript"></script>
<script type="text/javascript" src="js/ajax_load.js"></script>
<script type="text/javascript" src="js/validator.js"></script>
<script type="text/javascript" src="scripts/jquery.ui.core.js"></script>
<script type="text/javascript" src="scripts/jquery.ui.datepicker-cc.js"></script>
<script type="text/javascript" src="scripts/calendar.js"></script>
<script type="text/javascript" src="scripts/jquery.ui.datepicker-cc-ar.js"></script>
<script type="text/javascript" src="scripts/jquery.ui.datepicker-cc-fa.js"></script>
<link type="text/css" href="styles/jquery-ui-1.8.14.css" rel="stylesheet" />
Any tip and help will be highly appreciated

Ok, this is too large to explain in a comment:
Using jQuery noConflict mode
http://api.jquery.com/jQuery.noConflict/
First, add the noConflict script after loading jQuery:
<!-- this is where you are loading jQuery -->
<script type="text/javascript" src="here/you/are/loading/jquery.js"></script>
<!-- and now lets enter in noConflict mode -->
<script type="text/javascript">
$.noConflict();
</script>
This way the $ function is "free" again so other lib can use it (the same name can't be used by two libraries, it's a global var so shit is going to happen).
Well, now on we won't be using $ for jQuery. If you want to use jquery, the new magic word is jQuery (yeah, very original), for example:
jQuery("#menu").show();
So, if you have to use datepicker, just replace $ with jQuery. For example:
jQuery('#startDate').datepicker({
showButtonPanel: true
});
Remember, the keyword $ is no longer attached to jQuery. So you have to use jQuery everywhere. Or you can also use a new alias, for example if you think jQuery is too large:
var j = jQuery.noConflict();
//and now we are going to use it:
j("#menu").show();
There are more examples here: http://api.jquery.com/jQuery.noConflict/

Just use self calling anonymous function and pass jQuery and catch it as $ in your code such as :
(function($){
$(function() {
//-----------------------------------
// Show Picker
$('#startDate').datepicker({
showButtonPanel: true
});
//-----------------------------------
// Show Picker
$('#dueDate').datepicker({
showButtonPanel: true
});
});
})(jQuery);
and modify jquery script inclusion as such(same as TheBronx suggested):
<!-- this is where you are loading jQuery -->
<script type="text/javascript" src="here/you/are/loading/jquery.js"></script>
<!-- and now lets enter in noConflict mode -->
<script type="text/javascript">
$.noConflict();
</script>
This is the only way that uses minimal code change. Thanks.

Related

jquery - How to resolve two jquery conflict

I have a page which includes two jquerys one for slider other for populate dropdawn.The problem is when I put both of them my jqueries are not working together.What should i do?
My index:
<!-- JAVASCRIPTs for slider -->
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/comment-reply.js"></script>
<script type="text/javascript" src="js/jquery.quicksand.js"></script>
<script type="text/javascript" src="js/jquery.tipsy.js"></script>
<script type="text/javascript" src="js/jquery.prettyPhoto.js"></script>
<script type="text/javascript" src="js/jquery.cycle.min.js"></script>
<script type="text/javascript" src="js/jquery.anythingslider.js"></script>
<script type="text/javascript" src="js/jquery.eislideshow.js"></script>
<script type="text/javascript" src="js/jquery.easing.js"></script>
<script type="text/javascript" src="js/jquery.flexslider-min.js"></script>
<script type="text/javascript" src="js/jquery.aw-showcase.js"></script>
<script type="text/javascript" src="js/layerslider.kreaturamedia.jquery-min.js"></script>
<script type="text/javascript" src="js/shortcodes.js"></script>
<script type="text/javascript" src="js/jquery.colorbox-min.js"></script>
<script type="text/javascript" src="js/jquery.tweetable.js"></script>
<script type="text/javascript" src="js/slider-layer.js"></script>
<!-- JAVASCRIPTs for dropdawn -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(document).on('change','.productcategory',function(){
console.log("hmm its change");
var cat_id=$(this).val();
var div=$('#d').parent();
var op=" ";
$.ajax({
type:'get',
url:'{!!URL::to('findProductName')!!}',
data:{'id':cat_id},
success:function(data){
//console.log('success');
//console.log(data);
console.log(data.length);
op+='<option value="0" selected disabled></option>';
for(var i=0;i<data.length;i++){
op+='<option value="'+data[i].id+'">'+data[i].model+'</option>';
console.log(data[i].model);
}
div.find('.productname').html(" ");
div.find('.productname').append(op);
},
error:function(){
}
});
});
});
</script>
I try to add
<script type="text/javascript">
var jQuery = $.noConflict(true);
</script>
but when add this in the end of bouth script then slider work and dropdown not, and when not add this code for conflict works dropdown and slider doesn't work.
I use next links:
Can I use multiple versions of jQuery on the same page?
http://jsfiddle.net/PGLVs/
Any ideas of what I'm doing wrong?
Basically you should release release $ or jQuery variable for newer versions so add noConflict between both versions as below. This will make $ alias available for newer version.
<script src"olderversion"></script>
<script type="text/javascript">
jQuery.noConflict();
</script>
<script src"newerversion"></script>
If in case you have to call any plugin with lot of lines using $ or jQuery using old versions you can folow below approach.
jQuery.noConflict();
(function( $ ) {// if you want to use $
$(function() {
// More code using $ as alias to jQuery
});
})(jQuery);
// Other code using $ as an alias to the other library
jQuery.noConflict();
(function( jQuery ) {// if you want to use $
$(function() {
// More code using jQuery as alias to jQuery
});
})(jQuery);
Please mark it as answer if it meets your requirement.
a quick example:
in the head:
<script type="text/javascript" src="/jqueryV1.js"></script>
<script type="text/javascript">
var $myJQ = jQuery.noConflict();
</script>
<script type="text/javascript" src="/jqueryV2.js"></script>
<!-- the version 2 in now in $ while the 1 is in $myJQ -->
code that uses version 2 can keep the global $.
Now in the rest of your code, you could simply replace all the $ by $myJQ where the version 1 is used, but it means rewriting all, what you can do instead is to use an argument that acts as a local var, to be able to keep $ in the code that uses version 1:
(function($){
//inside this function, using $ means using the global $myJQ
$('#selector')...
})($myJQ);

need to use jquery-1.min.js and jquery.min.js together

I need to use both below files but just one of the can work if both of the use in pae
<script src="jquery.min.js"></script>
<script src="jquery-1.min.js"></script>//just this work
Or if change order
<script src="jquery-1.min.js"></script>
<script src="jquery.min.js"></script>//just this work
I use a drag and drop plugin , this need jquery.min.js and my theme need to jquery-1.min.js for be responsive
You should be able to do this when you use noConflict.
<!-- load jQuery-1 -->
<script type="text/javascript" src="jquery-1.min.js"></script>
<script type="text/javascript">
var jQuery_1_min = $.noConflict(true);
</script>
<!-- load jQuery -->
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript">
var jQuery_min = $.noConflict(true);
</script>
Now whenever you need one of these files you can do this.
//example
$jQuery_min('.selector').live('click', function(){
//do something
});
If it still wont work I dont know anymore... This is the way everybody does it. Quick google search.

Jquery slider doesn't work with own jQuery variable

I am creating a widget that will eventually sit on a clients site, and I need to create my own jQuery variable, so that the jquery versions don't conflict. Currently I have the following code:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script> // Clients own jquery.
<script type="text/javascript" src="sf_content/js/jquery-1.11.2.min.js"></script> // My jQuery.
<script type="text/javascript">
var $sf_jquery = $.noConflict(true);
</script>
Everything else works just fine, but jQuery slider stopped working when I changed to my own jquery:
TypeError: $sf_jquery(...).slider is not a function
Is the problem with the jQuery slider, or am I missing something else here?
Good plain javascript slider -tips are welcome as well!
Edit: Everything the widget needs, is inside function call like this:
$sf_jquery(function(){ // all of the code here });
Edit: The jQuery Ui is imported aswell. Just forgot to add it here. The importing looks like this:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script> // Clients own jquery.
<script type="text/javascript" src="sf_content/js/jquery-1.11.2.min.js"></script>
<script type="text/javascript">
var $sf_jquery = $.noConflict(true);
</script>
<script type="text/javascript" src="sf_content/js/jquery-ui.min.js"></script>
Edit, Solution!
Dummy me didn't think that the slider isn't part of the native jQuery. The noConflict must be after the jQueryUI, like this:
<script type="text/javascript" src="sf_content/js/jquery-1.11.2.min.js"></script>
<script type="text/javascript" src="sf_content/js/jquery-ui.min.js"></script>
<script type="text/javascript">
var $sf_jquery = $.noConflict(true);
</script>
You aren't including jQueryUI code (at least in your example).
Slider is part of jQueryUI and is not native to jQuery alone. (https://jqueryui.com/slider/)
Your "noconflict" function must be called before the second jQuery call.

Error: TypeError: $(...).dialog is not a function

I am having an issue getting a dialog to work as basic functionality. Here is my jQuery source imports:
<script type="text/javascript" src="scripts/jquery-1.9.1.js"></script>
<script type="text/javascript" src="scripts/jquery-ui-1.11.1.js"></script>
<script type="text/javascript" src="scripts/json.debug.js"></script>
Html:
<button id="opener">open the dialog</button>
<div id="dialog1" title="Dialog Title" hidden="hidden">I'm a dialog</div>
<script type="text/javascript">
$("#opener").click(function() {
$("#dialog1").dialog('open');
});
</script>
From the posts around seems like as a library import issue. I downloaded the JQuery UI Core, Widget, Mouse and Position dependencies.
Any Ideas?
Be sure to insert full version of jQuery UI. Also you should init the dialog first:
$(function () {
$( "#dialog1" ).dialog({
autoOpen: false
});
$("#opener").click(function() {
$("#dialog1").dialog('open');
});
});
<script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="https://code.jquery.com/ui/1.11.1/jquery-ui.min.js"></script>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.11.1/themes/smoothness/jquery-ui.css" />
<button id="opener">open the dialog</button>
<div id="dialog1" title="Dialog Title" hidden="hidden">I'm a dialog</div>
if some reason two versions of jQuery are loaded (which is not recommended), calling $.noConflict(true) from the second version will return the globally scoped jQuery variables to those of the first version.
Some times it could be issue with older version (or not stable version) of JQuery files
Solution use $.noConflict();
<script src="other_lib.js"></script>
<script src="jquery.js"></script>
<script>
$.noConflict();
jQuery( document ).ready(function( $ ) {
$("#opener").click(function() {
$("#dialog1").dialog('open');
});
});
// Code that uses other library's $ can follow here.
</script>
If you comment out the following code from the _Layout.cshtml page, the modal popup will start working:
</footer>
#*#Scripts.Render("~/bundles/jquery")*#
#RenderSection("scripts", required: false)
</body>
</html>
Change jQueryUI to version 1.11.4 and make sure jQuery is not added twice.
I just experienced this with the line:
$('<div id="editor" />').dialogelfinder({
I got the error "dialogelfinder is not a function" because another component was inserting a call to load an older version of JQuery (1.7.2) after the newer version was loaded.
As soon as I commented out the second load, the error went away.
Here are the complete list of scripts required to get rid of this problem.
(Make sure the file exists at the given file path)
<script src="#Url.Content("~/Scripts/jquery-1.8.2.js")" type="text/javascript">
</script>
<script src="#Url.Content("~/Scripts/jquery-ui-1.8.24.js")" type="text/javascript">
</script>
<script src="#Url.Content("~/Scripts/jquery.validate.js")" type="text/javascript">
</script>
<script src="#Url.Content("~/Scripts/jquery.validate.unobtrusive.js")" type="text/javascript">
</script>
<script src="#Url.Content("~/Scripts/jquery.unobtrusive-ajax.js")" type="text/javascript">
</script>
and also include the below css link in _Layout.cshtml for a stylish popup.
<link rel="stylesheet" type="text/css" href="../../Content/themes/base/jquery-ui.css" />
I had a similar problem and in my case, the issue was different (I am using Django templates).
The order of JS was incorrect (I know that's the first thing you check but I was almost sure that that was not the case, but it was). The js calling the dialog was called before jqueryUI library was called.
I am using Django, so was inheriting a template and using {{super.block}} to inherit code from the block as well to the template. I had to move {{super.block}} at the end of the block which solved the issue. The js calling the dialog was declared in the Media class in Django's admin.py. I spent more than an hour to figure it out. Hope this helps someone.

Yotpo Reviews Conflict With Jquery Fancy Box

When I add Jquery FancyBox script the reviews on Yotpo would disappear.
Here's the script:
<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.4.js"></script>
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/fancybox/1.3.4/jquery.fancybox-1.3.4.pack.min.js"></script>
but when i removed the above script, the yotpo reviews will appear.
I'm using Bigcommerce.
I manage to solved my issue using jQuery.noConflict. I just put the noConflict code after the conflict script.
<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.4.js"></script>
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/fancybox/1.3.4/jquery.fancybox-1.3.4.pack.min.js"></script>
<script>jQuery.noConflict();</script>
Then always call jQuery with the whole word instead of the $ sign.
<script type="text/javascript">
jQuery(document).ready(function() {
jQuery(".iframe").fancybox({
//codes
});
});
</script>

Categories

Resources