0

Im trying to learn how to create plugins using Wordpress but I stumbled upon this problem:

Whenever I'm trying to run JQuery I get undefined error's and such...

I tried different things I found on the internet like deregister/register/enqueue but nothing seems to work.

The goal is to fill a textarea in the plugin settings page without reloading/saving the page to create a live preview.

This is what I'm doing right now:

class plugin 
{
  public function __construct()
  { 
    add_action("wp_enqueue_scripts", "jquery_enqueue");
    add_action( 'admin_menu', array( $this, 'plugin_page' ) );
    add_action( 'admin_init', array( $this, 'page_init' ) );
  }

  public function jquery_enqueue() 
  {
    wp_deregister_script('jquery');
    wp_register_script('jquery', "http" . ($_SERVER['SERVER_PORT'] == 443 ? "s" : "") . "://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js", false, null);
    wp_enqueue_script('jquery');
  }

  public function plugin_page()
  {
    add_menu_page(
        '...',
        '...',
        '...',
        '...',
         array( $this, 'create_admin_page' )
    );
   }

public function create_admin_page()
    {
        // Set class property
        $this->options = get_option( 'my_option_name' );
        ?>
        <div class="wrap">
            <h2>Test</h2>           
            <form method="post" action="options.php">
            <?php
                // This prints out all hidden setting fields
                settings_fields( '...' );   
                do_settings_sections( '...' );
            ?>
            <script>                
                $( document ).ready(function() {
                    $( "#my_option_name" ).change(function() {
                        $.post( 
                          'classes/dummy.class.php'
                        ).success(function(x){
                            json = $.parseJSON(x);
                            $('textarea').text(json);
                        });
                    });
                });
            </script>
            </form>
            <textarea></textarea>
        </div>
        <?php
    }}

I left some code out and only included the important parts.

1 Answer 1

0

This is a common question. It plagued me when I first started because it doesn't make any sense and it is hard to search for until you know. The problem is that WordPress bundles a version of jQuery that is set to noConflict mode. Therefore, to run scripts you must use noConflict wrappers

jQuery(document).ready(function($) {
    // Inside of this function, $() will work as an alias for jQuery()
    // and other libraries also using $ will not be accessible under this shortcut
});

Update

  1. There's no need to load a different version of jQuery. It just complicates things. Let, WordPress load it's own version. Delete your jquery_enqueue() method.

  2. Next adjust your create_admin_page() to not print the script directly. What I think is happening is that add_menu_page() runs before wp_enqueue_scripts and so jQuery isn't available yet. Hence, error. Instead of printing the scripts, you can print them in the footer by adding a new function to the admin_print_footer_scripts hook.

So modified, your create_admin_page() would now look like this:

public function create_admin_page()
    {
        // Set class property
        $this->options = get_option( 'my_option_name' );
        add_action( 'admin_print_footer_scripts', array( $this, 'footer_scripts' ) );
        ?>
        <div class="wrap">
            <h2>Test</h2>           
            <form method="post" action="options.php">
            <?php
                // This prints out all hidden setting fields
                settings_fields( '...' );   
                do_settings_sections( '...' );
            ?>
            </form>
            <textarea></textarea>
        </div>
        <?php
    }

With your new function being:

public function footer_scripts()
    { ?>
            <script>                
                jQuery( document ).ready(function($) {
                    $( "#my_option_name" ).change(function() {
                        $.post( 
                          'classes/dummy.class.php'
                        ).success(function(x){
                            json = $.parseJSON(x);
                            $('textarea').text(json);
                        });
                    });
                });
            </script>

6
  • I tried this solution but without any luck. Uncaught ReferenceError: JQuery is not defined
    – Script99
    Commented May 7, 2015 at 13:20
  • I would also advise not loading google's jquery. And I would load the script in the footer to be sure that jquery has already loaded. I'll edit here in a second. Commented May 7, 2015 at 13:24
  • I just replaced my code to what you wrote and fiddled some with it but it seems like whatever I do JQuery just doesn't want to load :/
    – Script99
    Commented May 7, 2015 at 13:39
  • You can always keep wp_enqueue_script('jquery'); but jQuery should load by default in the admin. Commented May 7, 2015 at 13:44
  • Got it to work forgot to remove the old jquery script, so when I was inspecting the browser it would give errors. It seemed like placing the script in the footer worked! thanks
    – Script99
    Commented May 7, 2015 at 13:49

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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