I have contact form problem. The form fails to deliver a message. The source of the problem is two conflicting script libraries. Both libraries are needed for different effects.
The fancy box scripts works with the image display mechanism.
<script type="text/javascript" src="./fancybox/lib/jquery-1.10.1.min.js"></script>
The jquery scripts works with contact form mechanism
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
If I remove the fancy box script the contact form works but lose the fancybox interactive image display features.
If I remove the googleapi script I loos the form functionality.
Changing the order of the scripts or loading them asynchronously has not worked.
Is the away to deal with this script conflict?
You should use noConflict() jquery method.
The $other variable now has the "ajax google api jquery.min.js", $other is now an alias to the jQuery function; creating the new alias is optional.
The $ variable now has the "jquery-1.10.1.min.js", which is a shortcut for
document.getElementById(). mainDiv below is a DOM element, not a jQuery object.
solution for remove conflict in different jquery version
<!-- Putting jQuery into no-conflict mode. -->
<script src="./fancybox/lib/jquery-1.10.1.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script>
var $other = jQuery.noConflict();
$other(document).ready(function() {
$other("div").hide();
});
window.onload = function() {
var main = $("main");
}
</script>
Related
I am using a combination of prototype and script.aculo.us to implement a lightbox effect in my asp.net page.I have also jquery included in my page.I have several DIV tags in my page,But after including the prototype file in my head of the page,I am not able to read the divs in my javascript using jquery
var div = $("#divLeftSideModelsList");
alert(div)
gives me an error saying that the object is null
But
var div = document.getElementById("divLeftSideModelsList")
is giving me the object.
Is this becuase there is some conflicts between jQuery and other frameworks ?
PLEASE advice
Have a read of this: http://docs.jquery.com/Using_jQuery_with_Other_Libraries
Shows good examples :)
OVERRIDING THE $-FUNCTION
However, you can override that default by calling jQuery.noConflict() at any point after jQuery and the other library have both loaded. For example:
<html>
<head>
<script src="prototype.js"></script>
<script src="jquery.js"></script>
<script>
jQuery.noConflict();
// Use jQuery via jQuery(...)
jQuery(document).ready(function(){
jQuery("div").hide();
});
// Use Prototype with $(...), etc.
$('someid').hide();
</script>
</head>
<body></body>
</html>
This will revert $ back to its original library. You'll still be able to use "jQuery" in the rest of your application.
Additionally, there's another option. If you want to make sure that jQuery won't conflict with another library - but you want the benefit of a short name, you could do something like this:
<html>
<head>
<script src="prototype.js"></script>
<script src="jquery.js"></script>
<script>
var $j = jQuery.noConflict();
// Use jQuery via $j(...)
$j(document).ready(function(){
$j("div").hide();
});
// Use Prototype with $(...), etc.
$('someid').hide();
</script>
</head>
<body></body>
</html>
You should use jQuery in noConflict mode. And then use jQuery() instead of $().
Strange bug. Anyways, both prototype and jQuery redefine the global variable $.
Please read this to know how jQuery can play nice with other libraries.
It basically says that calling jQuery.noConflict() leaves the $ variable alone for the other libs to use
Does this code work:
var div = jQuery("#divLeftSideModelsList");
alert(div);
I have recently discovered the new trend of including all .js script at the end of the page.
From what i have read so far seems pretty ok and doable with an exception.
The way I am working is using a template like:
<html>
<head>
<!-- tags, css's -->
</head>
<body>
<!-- header -->
<div id="wrapper">
<?php
include('pages/'.$page.'.php');
?>
</div>
<!-- footer -->
<!-- include all .js -->
</body>
</html>
Now, if I want to use this example on my page http://www.bootply.com/71401 , I would have to add the folowing code under my jquery inclusion.
$('.thumbnail').click(function(){
$('.modal-body').empty();
var title = $(this).parent('a').attr("title");
$('.modal-title').html(title);
$($(this).parents('div').html()).appendTo('.modal-body');
$('#myModal').modal({show:true});
});
But that would mean I either use that in every page - even if I do not have use for it, either generate it with php in the $page.'php' file and echoing it in the template file, after the js inclusion.
I am sure though, better methods exist and I don't want to start off by using a maybe compromised one.
Thanks!
Please avoid using inline scripts as they are not good maintainable and prevent the browser from caching them. Swap your inline scripts in external files.
Fore example you could put all your JavaScript in one file an check the presence of a specific element before initialize the whole code. E.g.:
$(document).ready(function(){
if($('.thumbnail').length) {
// your thumbnail code
}
});
A better way to execute "page specific" JavaScript is to work with a modular library like requirejs. You can modularize your scripts depending on their functionality (like thumbnails.js, gallery.js etc.) and then load the necessary script(s) depending e.g. on the existence of an element:
if($('.thumbnail').length) {
require(['ThumbnailScript'], function(ThumbnailScript){
ThumbnailScript.init();
});
}
The best way you can go is create a separate file for this code.
Let's name it app.js. Now you can include it under the jQuery inclusion.
<script type="text/javascript" src="app.js"></script>
This will prevent code repeat.
One more thing, pull all the code in $(document).ready(). Here is an example. So your app.js file will look like this:
$(document).ready(function(){
$('.thumbnail').click(function(){
$('.modal-body').empty();
var title = $(this).parent('a').attr("title");
$('.modal-title').html(title);
$($(this).parents('div').html()).appendTo('.modal-body');
$('#myModal').modal({show:true});
});
})
I am trying to add the flipcounter to the home page of my Magento site from here.
After adding the following scripts, the newsletter button in the footer won't work.
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js" type="text/javascript"></script>
<script src="js/jquery.easing.1.3.js" type="text/javascript"></script>
<script src="js/jquery.flipCounter.1.2.pack.js" type="text/javascript"></script>
I have tried adding using following in jquery.flipCounter.1.2.pack.js, but still doesn't work:
(function($) {
$(function() {
// more code using $ as alias to jQuery
});
})(jQuery);
// other code using $ as an alias to the other library
I noticed Magento already has jQuery 1.8.2, so do I still need to add jQuery 1.6.2?
Try to add this jQuery in ready function its giving error in console I hope it fixed your issue.
$('.vid_trigger').click( function(e){
e.preventDefault();
$( "#showSlideshowVideo" ).remove();
var URL = $(this).attr('videoLink');
var htm = '<iframe width="640" height="360" style="width:640px;height:360px;" src="http://www.youtube.com/embed/' + URL + '?autoplay=1" frameborder="0" allowfullscreen ></iframe>';
$('#lightVideoBox').append(htm);
return false;
});
You need to begin the script with jQuery.noConflict(); and change the '$'s to 'jQuery's or else the script wont play nicely with the native Prototype framework.
jQuery.noConflict();
(function(jQuery) {
jQuery(function() {
// ... No $s
});
})(jQuery);
// ... No $s
As for the jQuery library, I think Magento only calls it on specific pages for specific functions — like the image zoom if enabled. You will therefore need to call the jQuery library into your home page. Best practice would be to add the following to your local.xml ...
<cms_index_index><!-- Handle pinpoints the home page -->
<reference name="head"><!-- Identifies the head block -->
<action method="addItem">
<type>skin_js</type>
<name>js/jquery.min.js</name><!-- specify your library location and file name within skin/js -->
</action>
</reference>
</cms_index_index>
You can always use the layout updates for the page in CMS Page Management by entering the same XML but leave out the layout handle.
I'm having trouble implementing Pagify in Wordpress.
First I tried this tutorial to register the script in function.php. It worked, the pagify.js is included, and the jQuery too. FYI, I'm using wp-foundation themes, its has built-in jQuery.
and then I put the script to call pagify in the header.php before wp_head() and also i try after wp_head():
$('#page_holder').pagify({
pages: ['home', 'about', 'contact'],
default: 'home' // The name of a page or null for an empty div
});
I created HTML just like in pagify tutorial, and my div container id is also named page_holder. but it doesn't work.
Second I tried to register the script above to function.php, but still didn't work.
Third, I modified pagify.js, add noConflict() but still not work.
I am always facing issues with adding jquery scripts to my WP sites and still don't find a general way to resolve them, so I do like you, I try the different possibilities: nonConflict, register scripts and enqueue them, call them in simple script tags before wp_head or before wp_footer in header.php and footer.php respectively....
The last situation was to try to implement the Tag-it jquery plugin with my wordpress site and I resolved it by calling the script in my footer.php (I tell you beacause you didn't mention you tried this option in your question).
Example with Tag-it plugin:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js" type="text/javascript" charset="utf-8"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.12/jquery-ui.min.js" type="text/javascript" charset="utf-8"></script>
<script src="<?php echo get_bloginfo('template_directory'); ?>/js/tag-it.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#myTags").tagit(
{
fieldName: "tages[]"
}
);
});
</script>
<?php
/* Always have wp_footer() just before the closing </body>
* tag of your theme, or you will break many plugins, which
* generally use this hook to reference JavaScript files.
*/
wp_footer();
?>
While using jquery or javascript code most of the time i have to face the problem of jquery or javascript conflict.
Still i haven't got the reason why this stuff get conflict with other code?
Any one have any idea about this?
And any solution so that next time this issue will not occur while project development.
I have one solution to stop the conflict of jquery files that is,
<script>
var j$=jQuery.noConflict();
</script>
but all the time this code is not working.
If you are using another JavaScript library that uses the $ variable, you can run into conflicts with jQuery. In order to avoid these conflicts, you need to put jQuery in no-conflict mode immediately after it is loaded onto the page and before you attempt to use jQuery in your page.
Method 1:
When you put jQuery into no-conflict mode, you have the option of assigning a variable name to replace $. ( only once )
<script src="prototype.js"></script>
<script src="jquery.js"></script>
<script>var $j = jQuery.noConflict();</script>
Method 2
You can continue to use the standard $ by wrapping your code in a
self-executing anonymous function; this is a standard pattern for
plugin authoring, where the author cannot know whether another library
will have taken over the $.
<script src="jquery.js"></script>
<script>
jQuery.noConflict();
(function($) {
// your code here, using the $
})(jQuery);
</script>
Method 3:
use jQuery instead of $
there few other ways to do so
reference
For jQuery, it's explained in noConflict's API page; basically, many JS frameworks use $ as a function name, and so they may conflict if more than one is used. Which it shouldn't anyway.
Try placing this in your header:
<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.1/jquery-ui.min.js"> </script>
Try to give an alert when DOM is ready and find it alerts or not if not there is a conflict
<script>
$(document).ready(function () {
alert("Hello!");
});
</script>
I there is conflict try this:
<script type="text/javascript" src="other_lib.js"></script>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$.noConflict();
jQuery(document).ready(function($) {
// Code that uses jQuery's $ can follow here.
});
// Code that uses other library's $ can follow here.
</script>