JQuery function fails to work in Wordpress 3.1.2

Question

TypeError: 'undefined' is not a function (evaluating '$(document)')

I know there is one other topic with a similar issue, but trying the solutions in there didn't resolve the problem.

I'm using WordPress 3.1.2 and I'm trying to get it to load a page, but something in WordPress or what I'm typing doesn't seem to let it work.

<div id=test>
 <b>Great scott</B>
</div>

<div id=recall>
  <b>see you at the party</b>
</div>
<script src=jquery.js>
</script>

<script>
  $(#test).load(search.php);
</script>

That's the code I'm trying to use, it works on a different WP site I worked on, creating the prototype so to speak.

The problem seems to come from pointing it to the jQuery file because not even alerts work. However, when I take out the src the alerts appear as normal.

I also used the jQuery's tutorial on jQuery's website to make sure the jQuery file itself was working and that the page ran the jQuery on there perfectly.

I've tried using JQuery() instead of $(), but when I tried that, search.php still doesn't load and there is no error produced in the error log either (I've been using Firefox to test it)

I also tried wrapping it in a function like similar questions have suggestion but that flags up either the same error or no error at all.

Is there a way to fix this or work around this?

Use jQuery noConflict http://api.jquery.com/jQuery.noConflict/ — jtheman, Sep 04 '12 at 08:53
possible duplicate of [jQuery ready function doesnt work in wordpress](http://stackoverflow.com/questions/1327085/jquery-ready-function-doesnt-work-in-wordpress) — squarecandy, Mar 19 '14 at 04:56

score 1 · Accepted Answer · answered Sep 04 '12 at 08:53

1

You need quotes around the #test:

$('#test').load(search.php);

Undefined means the selectors hasn't found anything.

For more about jQuery selectors, look here: http://api.jquery.com/category/selectors

When debugging - it can help to use firebug in firefox, or the developer console in chrome... and you can type in the javascript directly to see if it runs, or even something like $('#test') to see what is being selected.

answered Sep 04 '12 at 08:53

Sam Mirrado

336
1
2
9

Poo that is mistake on my part, when putting this up I was having some trouble formatting the code to display properly. That part does have quotes around it: `$('#test').load('search.php');` – Amuro Ray Sep 04 '12 at 09:29
Hmmm... It could be something with the URL to your search.php... I'm assuming it's on same server, and in yoursite.com/search.php? Are you using firebug or something equivalent... can you see an error in the network communications? – Sam Mirrado Sep 04 '12 at 09:37
It seems to be a url issue. I was checking the network tab as you said and the path seems to be _www.website.com/currentpage/jquery.js_ Which is really odd because wordpress doesn't create static pages like that. I just tried doing the method I have seen used to go back a folder .../ but instad it just added it onto the URL instead. I have solved it now though but I think I've done it the clunky way, I've typed out the whole URL so it looks like this _www.www.website.com/jquery.js_ I've also updated the other file references. Thanks 4 the firebug tip. BTW do you knw a shrt hnd way of doing it? – Amuro Ray Sep 04 '12 at 11:17
I checked a wordpress theme I'm using that has jQuery, and it does use absolute paths, which make sense to me since the url's are dynamically generated. You might post a new question to see if a guru out there knows a better way! – Sam Mirrado Sep 05 '12 at 08:36

score 0 · Answer 2 · answered Sep 04 '12 at 08:56

Load the function after the DOM is loaded:

 <div id="test">
   <b>Great scott</B>
 </div>

 <div id="recall">
  <b>see you at the party</b>
 </div>
 <script src="jquery.js"></script>

 <script>
 $(function(){
     $("#test").load("search.php");
  });
 </script>

JQuery function fails to work in Wordpress 3.1.2

2 Answers2