jQuery conflict

Question

I am trying to run the following jQuery to change the text of my username and password boxes so that they do not need a label (inside <script> tags):

jQuery(document).ready(function($) {
    $('#user_login1').val('Username');
    $('#user_pass1').val('Password');
    $('#user_login1').focus(function(){
        $('#user_login1').val('');
    });​​​​​​​​​​​​​​​​​​​​​​​​​​​​​
    $('#user_pass1').focus(function(){
        $('#user_pass1').val('');
    });​
});​ 

The code works on jsFiddle [updated] (proving it's a WP issue not a jQuery issue).

I have tried without the function($) modifier and replacing the $ with jQuery but to no avail.

I am "trusting" the folks that code Use Google Libraries to sort the jQuery out on my site meaning my jQuery include looks like this: <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>

EDIT 1

Now not calling it at all, as when I add wp_enque_script('jquery'); it breaks the admin pages showing nothing but a blank white page. Never the less jQuery gets called like so:

<script type="text/javascript" src="http://elitetradersgroup.com.au/wp-includes/js/jquery/jquery.js?ver=1.7.1"></script>

END EDIT 1

EDIT 2

• Changed spelling to wp_enqueue_script('jquery');
• Changed $ in jQuery to jQuery
• It has become apparent that jQuery is broken site wide, save wp-admin

Still not working.

The above location (edit 1) that the jQuery is called from does exist.

I noticed that it calls jQuery.noConflict() twice. Once in the output of the page, and once at the bottom of the jQuery file.

END EDIT 2

EDIT 3

In response to Chip Bennett here is the call found in functions.php of my theme.

wp_deregister_script('jquery');
wp_enqueue_script('jquery');

It also occured to me I had not posted up my website for testing, outside of the jsfiddle code. The form I am trying to get working is on the top right of this page:

http://elitetradersgroup.com.au/

END EDIT 3

EDIT 4

Replaced the jQuery in edit 3 with the following based off of chip bennett's answer

function wpse45377_enqueue_scripts() {
    wp_enqueue_script('jquery');
}
add_action( 'wp_enqueue_scripts', 'wpse45377_enqueue_scripts' );

I also thought to look at the console output in Chrome's dev tools and got this:

Uncaught ReferenceError: jQuery is not defined   Line:25
    (anonymous function)

The code it is referencing is this

25: <script type='text/javascript'>jQuery.noConflict();
26: /* <![CDATA[ */
27: var tb_pathToImage='http://elitetradersgroup.com.au/wp-includes/js/thickbox/loadingAnimation.gif';
28: var tb_closeImage='http://elitetradersgroup.com.au/wp-includes/js/thickbox/tb-close.png';
29: /* ]]> */
30: </script>

END EDIT 4

Which is the same version of jQuery that jsFiddle uses so I can't understand why this isn't working. A little help would be much appreciated.

Answer 1

Based on your Edit 3:

In response to Chip Bennett here is the call found in functions.php of my theme.

wp_deregister_script('jquery');
wp_enqueue_script('jquery');

I see two issues:

1. You need to put your enqueue inside a callback, hooked into wp_enqueue_scripts (for the frontend) or admin_enqueue_scripts (for the admin back-end), like so:

   <?php
   function wpse45377_enqueue_scripts() {
       wp_deregister_script('jquery');
       wp_enqueue_script('jquery');
   }
   add_action( 'wp_enqueue_scripts', 'wpse45377_enqueue_scripts' );
   ?>
   

2. You're deregistering jQuery, without re-registering it. I would recommend not de-registering jQuery; but if you must (and only if you absolutely must), you have to register it again before you can use it. I would recommend simply removing the deregister_script() call entirely:

   <?php
   function wpse45377_enqueue_scripts() {
       wp_enqueue_script('jquery');
   }
   add_action( 'wp_enqueue_scripts', 'wpse45377_enqueue_scripts' );
   ?>
   

That should fix your problem, and would explain why jQuery seems to have just "disappeared": you made it disappear, by de-registering it. :)

Edit

Looking at your source, you've got jQuery scripts outputting in your document head before your jQuery is being linked:

<script type='text/javascript'>jQuery.noConflict();
/* <![CDATA[ */
var tb_pathToImage='http://elitetradersgroup.com.au/wp-includes/js/thickbox/loadingAnimation.gif';
var tb_closeImage='http://elitetradersgroup.com.au/wp-includes/js/thickbox/tb-close.png';
/* ]]> */
</script>

<!-- iMember360 -->
<meta name='generator'   content='iMember360 (v3.3.012) for WordPress 3.3.1' />
<link title='Membership site system for WordPress and Infusionsoft' type='text/html' rel='help' hreflang='en' href='http://www.iMember360.com' />
<script type='text/javascript'>
var tb_pathToImage='http://elitetradersgroup.com.au/wp-includes/js/thickbox/loadingAnimation.gif';
var tb_closeImage='http://elitetradersgroup.com.au/wp-includes/js/thickbox/tb-close.png';
function payf_popup() {
  tb_show('Notice:','#TB_inline?height=300&amp;width=400&amp;inlineId=PayfInfoDiv');
}
</script>
<!-- /iMember360 -->

<link rel="alternate" type="application/rss+xml" title="Elite Traders Group &raquo; Feed" href="http://elitetradersgroup.com.au/feed/" />
<link rel="alternate" type="application/rss+xml" title="Elite Traders Group &raquo; Comments Feed" href="http://elitetradersgroup.com.au/comments/feed/" />
<link rel="alternate" type="application/rss+xml" title="Elite Traders Group &raquo; Home Comments Feed" href="http://elitetradersgroup.com.au/home/feed/" />
<link rel='stylesheet' id='thickbox-css'  href='http://elitetradersgroup.com.au/wp-includes/js/thickbox/thickbox.css?ver=20111117' type='text/css' media='all' />
<link rel='stylesheet' id='theme-my-login-css'  href='http://elitetradersgroup.com.au/wp-content/plugins/theme-my-login/theme-my-login.css?ver=6.1.4' type='text/css' media='all' />
<script type='text/javascript' src='http://elitetradersgroup.com.au/wp-includes/js/jquery/jquery.js?ver=1.7.1'></script>

Notice that you have scripts outputting before the last line of the above code, which is:

<script type='text/javascript' src='http://elitetradersgroup.com.au/wp-includes/js/jquery/jquery.js?ver=1.7.1'></script>

Where/how are you adding the jQuery scripts to your document head? If they are hard-coded in your document head, that's your problem. You need to enqueue them, and make jQuery a dependency.

Answer 2

This is what I had to do to get it to work

Add the following right after <head> in header.php

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>

Rem out any reference to wp_enqueue_script('jquery')

Add this script just before the ''

    <script type="text/javascript">
        jQuery(document).ready(function($) {
            $('#user_login1').val('Username');
            $('#user_pass1').val('Password');
            $('#user_login1').focus(function(){
                var un = $('#user_login1').val();
                if(un == 'Username'){
                    $('#user_login1').val('');
                }
            });
            $('#user_pass1').focus(function(){
                var pwd = $('#user_pass1').val();
                if(pwd == 'Password'){
                    $('#user_pass1').val('');
                }
            });
            $('#user_login1').focusout(function(){
                if($('#user_login1').val().length < 1){
                    $('#user_login1').val('Username');
                }
            });
            $('#user_pass1').focusout(function(){
                if($('#user_pass1').val().length < 1){
                    $('#user_pass1').val('Password');
                }
            });
        });
    </script>

I may have gone a a little crazy on the remming, but I needed it to work and now it does.