I created a jQuery comment preview on a new wordpress blog I have just put up. The part where it takes the email and goes and gets the connected avatar doesn't work. Note: It worked fine on localhost http://www.zenoemusic.com/uncategorized/2012/hello-world/ Here is my footer.php code [COLOR="#CCC"]<footer><h3>POPULAR POSTS</h3><div role="popular"><?php echo popularPosts(4);?></div><p><a class="archive" href="<?php bloginfo('url');?>/archive/">archive </a> | ©2012 | zenoemusic.com</p></footer></div> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> <script>window.jQuery || document.write('<script src="js/libs/jquery-1.7.1.min.js"><\/script>')</script> <script type="text/javascript" src="<?php bloginfo('template_url');?>/fancybox/jquery.fancybox-1.3.4.pack.js"></script> <script type="text/javascript" src="<?php bloginfo('template_url');?>/fancybox/jquery.easing-1.3.pack.js"></script> <link rel="stylesheet" type="text/css" href="<?php bloginfo('template_url');?>/fancybox/jquery.fancybox-1.3.4.css" media="screen" />[/COLOR] <script src="<?php bloginfo(template_url); ?>/js/plugins.js"></script> [COLOR="#CCC"]<script src="<?php bloginfo(template_url); ?>/js/script.js"></script> </body></html>[/COLOR] Code (markup): Here is the plugins.js where the comment preview code resides [COLOR="#CCC"]window.log = function f(){ log.history = log.history || []; log.history.push(arguments); if(this.console) { var args = arguments, newarr; args.callee = args.callee.caller; newarr = [].slice.call(args); if (typeof console.log === 'object') log.apply.call(console.log, console, newarr); else console.log.apply(console, newarr);}}; (function(a){function b(){}for(var c="assert,count,debug,dir,dirxml,error,exception,group,groupCollapsed,groupEnd,info,log,markTimeline,profile,profileEnd,time,timeEnd,trace,warn".split(","),d;!!(d=c.pop());){a[d]=a[d]||b;}}) (function(){try{console.log();return window.console;}catch(a){return (window.console={});}}()); // <![CDATA[ $(document).ready(function(){$("div[role=preview-comment]").slideUp("fast");$("#commentform input, #commentform textarea").focus(function(){$("div[role=preview-comment]").slideDown("slow");});$("#commentform input, #commentform textarea").blur( function(){if( $("#commentform .author").val()=="" && $("#commentform .email").val()=="" && $("#commentform .url").val()=="" && $("#commentform .comment").val()=="" ){$("div[role=preview-comment]").slideUp("medium");}});$("#commentform .author").keyup( function(){$("div[role=p-id] a").text($("#commentform .author").val() + " ") });$("#commentform .author").blur( function(){$("div[role=p-id] a").text($("#commentform .author").val() + " ") });$("#commentform .comment").keyup( function(){$("div[role=preview-comment] p").text($("#commentform .comment").val()) });$("#commentform .comment").blur( function(){$("div[role=preview-comment] p").text($("#commentform .comment").val()) });$("#commentform .url").keyup( function(){$("div[role=p-id] a").attr('href', $("#commentform .url").val());});$("#commentform .url").blur( function(){$("div[role=p-id] a").attr('href', $("#commentform .url").val());});[/COLOR] $("#commentform .email").blur( function(){ $("img#p-avatar").load('http://www.zenoemusic.com/wp-content/themes/ZENOE/js/md5.php?m=' + $("#commentform .email").val());}); }); // ]]> Code (markup): And finally this is the md5.php file <?php $hash = md5($_GET['m']); ?> <script type="text/javascript"> $("img#p-avatar").attr('src','http://www.gravatar.com/avatar/<?php echo $hash ?>'); </script> Code (markup): So I getting this error in firebug when I click out of the email field 301 Moved Permanently When I put the URL in the Address bar I get this error ReferenceError: $ is not defined I know this error message is saying that the jQuery source file isn't loaded but I don't why. I would be grateful for any insight. Thank you
It may be due to Jquery conflict with other libraries http://www.ericmmartin.com/5-tips-for-using-jquery-with-wordpress/