Take the 2-minute tour ×
WordPress Development Stack Exchange is a question and answer site for WordPress developers and administrators. It's 100% free, no registration required.

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.

share|improve this question
    
Why don't you try wp_enqueue_script to enqueue jQuery, which is in the /includes folder of WordPress installation? –  Rutwick Gangurde Mar 13 '12 at 3:53
    
I have previously tried that. My installation was loading it by default until I installed the plugin in an attempt to circumvent my problem. I have no real qualms reverting though –  Joshua Mar 13 '12 at 5:16
    
Have edited post to display additional findings –  Joshua Mar 13 '12 at 5:27
1  
You misspelled enqueue, it should be wp_enqueue_script('jquery'). And you should probably check if the jQuery gets loaded on the appropriate page, which is the login page. –  Rutwick Gangurde Mar 13 '12 at 5:37
    
Also try replacing $ with jQuery –  Jeremy Jared Mar 13 '12 at 11:23
show 3 more comments

2 Answers 2

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.

share|improve this answer
    
copied and pasted both. the top one 500 error'd me and the bottom didn't fix. Added some additional info to OP. –  Joshua Mar 14 '12 at 4:28
    
Yeah, there was a typo. I had put deregister_script() instead of wp_deregister_script(). (Note: always check code snippets; don't blindly copy-pasta.) Also: if the second one didn't work: are you trying to enqueue on the front end or in the admin? –  Chip Bennett Mar 14 '12 at 4:33
    
Also, saying "didn't fix..." isn't nearly descriptive enough. Did the script get enqueued (you can tell by viewing source)? –  Chip Bennett Mar 14 '12 at 4:34
    
trying to get it for the front end. also, op is now sorted. Commented then edited. –  Joshua Mar 14 '12 at 4:34
    
still no luck with the deregister script. it is calling the script here: <script type="text/javascript" src="http://elitetradersgroup.com.au/wp-includes/js/jquery/jquery.js?ver=1.7.1">‌​</script> it seems it's called after the jQuery.noConflict() though.. –  Joshua Mar 14 '12 at 4:39
show 5 more comments
up vote -4 down vote accepted

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.

share|improve this answer
3  
This method may have worked for you, but this will break other Plugins, as you 1) are using a non-core-bundled version of jQuery, and 2) may end up with jQuery being enqueued twice, since you're hard-coding the script link, rather than enqueueing. –  Chip Bennett Mar 20 '12 at 14:35
    
the jquery breaks whenever I use the wp_enqueue_script tag. I know this is not best practice, but it works as opposed to what should work. For some reason wp_enqueue_script get's called too far down even when I set priority 1 so it breaks the js on my site. –  Joshua Mar 20 '12 at 23:34
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.