jquery not working in wordpress

Question

Wordpress is not loading jquery - I think it may have something to do with the fact that it is loading the files absolutely, not relatively, and it won't go to the url (firebug is saying access denied to restricted uri). I have tested vanilla javascript and that works, however as soon as i try to do even the most basic function in $(document).ready(function(){}) it stops working.. is there a way to stop wordpress from appending the website uri to the linked files, and reference them relatively instead, as i think this may fix it.

The outputted head is as follows:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head profile="http://gmpg.org/xfn/11">

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

    <title>simplespace &mdash; not quite ready yet</title>



<meta name="generator" content="WordPress 3.0.1" /> <!-- leave this for stats -->

<link rel="stylesheet" href="http://simplespace.co.nz/wp-content/themes/blass2/style.css" type="text/css" media="screen" />

<link rel="alternate" type="application/rss+xml" title="RSS 2.0" href="http://simplespace.co.nz/feed/" />

<link rel="alternate" type="text/xml" title="RSS .92" href="http://simplespace.co.nz/feed/rss/" />

<link rel="alternate" type="application/atom+xml" title="Atom 0.3" href="http://simplespace.co.nz/feed/atom/" />

<link rel="pingback" href="http://simplespace.co.nz/xmlrpc.php" />

<link rel="shortcut icon" href="http://simplespace.co.nz/wp-content/themes/blass2/favicon.ico" />

    <link rel='archives' title='September 2010' href='http://simplespace.co.nz/2010/09/' />

<link rel='stylesheet' id='sociable3-css'  href='http://simplespace.co.nz/wp-content/plugins/sociable-30/sociable.css?ver=5.10' type='text/css' media='all' />
<script type='text/javascript' src='http://simplespace.co.nz/wp-includes/js/jquery/jquery.js?ver=1.4.2'></script>
<script type='text/javascript' src='http://simplespace.co.nz/wp-content/plugins/wordpress-flickr-manager/js/jquery.lightbox.js?ver=3.0.1'></script>
<script type='text/javascript' src='http://simplespace.co.nz/wp-content/plugins/wordpress-flickr-manager/js/wfm-lightbox.php?ver=3.0.1'></script>
<link rel="EditURI" type="application/rsd+xml" title="RSD" href="http://simplespace.co.nz/xmlrpc.php?rsd" />
<link rel="wlwmanifest" type="application/wlwmanifest+xml" href="http://simplespace.co.nz/wp-includes/wlwmanifest.xml" /> 
<link rel='index' title='simplespace' href='http://simplespace.co.nz/' />
<meta name="generator" content="WordPress 3.0.1" />
<script type="text/javascript" src="http://simplespace.co.nz/wp-content/plugins/audio-player/assets/audio-player.js?ver=2.0.4.1"></script>
<script type="text/javascript">AudioPlayer.setup("http://simplespace.co.nz/wp-content/plugins/audio-player/assets/player.swf?ver=2.0.4.1", {width:"400",animation:"yes",encode:"yes",initialvolume:"60",remaining:"no",noinfo:"no",buffer:"5",checkpolicy:"no",rtl:"no",bg:"dcf2fa",text:"333333",leftbg:"dcf2fa",lefticon:"333333",volslider:"666666",voltrack:"cfcfcf",rightbg:"9ee1f7",rightbghover:"dcf2fa",righticon:"333333",righticonhover:"333333",track:"FFFFFF",loader:"9ee1f7",border:"CCCCCC",tracker:"dcf2fa",skip:"666666",pagebg:"FFFFFF",transparentpagebg:"yes"});</script>

<!-- WFM INSERT LIGHTBOX FILES -->
<link rel="stylesheet" href="http://simplespace.co.nz/wp-content/plugins/wordpress-flickr-manager/css/lightbox.css" type="text/css" />
<!-- WFM END INSERT -->


<script type='text/javascript'>
$(document).ready(function() {
  alert('test');
});
</script>
</head>

please add whats you have now in <head></head>. it seems you may be not including jquery file in header just before $(document).ready(function(){}) — Pramendra Gupta
– Pramendra Gupta, Commented Sep 19, 2010 at 3:01

jay.lee · Accepted Answer · 2010-09-19 07:37:46Z

4

Wordpress puts jQuery in no-conflict mode which disabled the $() function. Unless you disable no-conflict mode in jQuery you'll have to use jQuery() instead of $().

answered Sep 19, 2010 at 7:37

jay.lee

19.9k8 gold badges42 silver badges39 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Mangesh Parte · Accepted Answer · 2014-12-24 06:19:44Z

1

Try this:

Full answer for those who are facing same problem

You can wrap your javascript inside a self-invoking function, then pass jQuery as an argument to it, using $ as the local variable name. For example:

(function($) {
   $(document).ready(function(){
      alert('test');
   });
}(jQuery));

The jQuery library included with WordPress is set to the noConflict() mode. This is to prevent compatibility problems with other JavaScript libraries that WordPress can link.

In the noConflict() mode, the global $ shortcut for jQuery is not available.

answered Dec 24, 2014 at 6:19

Mangesh Parte

2,1771 gold badge13 silver badges16 bronze badges

Comments

Chris_O · Accepted Answer · 2010-09-19 07:39:01Z

0

I looked at the site and jquery is loading. This:

<script type='text/javascript'>
$(document).ready(function() {
  alert('test');
});
</script>

wont work because WordPress uses jquery in no conflict mode. This:

jQuery(document).ready(function($){
alert('test');
    });

is how it should be called in no conflict mode. Also the lightbox plugin is throwing an error:

Uncaught TypeError: Object # has no method 'lightBox'

answered Sep 19, 2010 at 7:39

Chris_O

3,4441 gold badge24 silver badges28 bronze badges

Collectives™ on Stack Overflow

jquery not working in wordpress

3 Answers 3

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related