Wordpress core jquery version file not loaded?

Question

I try to put a simple <textarea> with an emoji picker (https://github.com/mervick/emojionearea) in my wordpress site (with buddypress installed, actually I put this in buddypress messages). The basic code is very simple.

Exemple: https://jsfiddle.net/fqo1za9u/

In a glance:

HTML head:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
<script type="text/javascript" src="https://rawgit.com/mervick/emojionearea/master/dist/emojionearea.js"></script>
<link rel="stylesheet" href="https://rawgit.com/mervick/emojionearea/master/dist/emojionearea.css">

HTML body:

<textarea class="emojitextarea"></textarea>
<script type="text/javascript">
  $(document).ready(function() {
    $(".emojitextarea").emojioneArea({
    pickerPosition: "bottom"
    });
  });
</script>

In my function.php (I already checked the folder path, it’s ok):

function my_add_scripts_style_emoji()
{
    wp_register_script('my-script-emojionearea', get_stylesheet_directory_uri() . '/emoji/emojionearea.js', array('jquery'), '1.0', false);
    wp_enqueue_script('my-script-emojionearea');

    wp_enqueue_style('my-styles-emojionearea', get_stylesheet_directory_uri() . '/emoji/emojionearea.css', array(), '1.0');
}

add_action('wp_enqueue_scripts', 'my_add_scripts_style_emoji');

In my file with textarea:

<textarea class="emojitextarea"></textarea>
<script type="text/javascript">
    jQuery(document).ready(function() {
        $(".emojitextarea").emojioneArea({
        pickerPosition: "bottom"
        });
    });
</script>

It doesn’t work.

If I manually add jquery 1.12.4 (same version is used by core WP: my-site/wp-includes/js/jquery) in enqueue scripts, it works. Like this:

function my_add_scripts_style_emoji()
{
    wp_register_script('my-script-jquery', 'https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js', array('jquery'), '1.0', false);
    wp_enqueue_script('my-script-jquery');

    wp_register_script('my-script-emojionearea', get_stylesheet_directory_uri() . '/emoji/emojionearea.js', array('jquery'), '1.0', false);
    wp_enqueue_script('my-script-emojionearea');

    wp_enqueue_style('my-styles-emojionearea', get_stylesheet_directory_uri() . '/emoji/emojionearea.css', array(), '1.0');
}

add_action('wp_enqueue_scripts', 'my_add_scripts_style_emoji');

So, if I understand well, the problem is that a core jquery version file is not loaded correctly. But I thought, core jquery file is loaded by default in my WP header?

I also tried this (manuel enqueue core jquery file), with no succes:

function my_add_scripts_style_emoji()
{
    wp_enqueue_script('jquery');

    wp_register_script('my-script-emojionearea', get_stylesheet_directory_uri() . '/emoji/emojionearea.js', array('jquery'), '1.0', false);
    wp_enqueue_script('my-script-emojionearea');

    wp_enqueue_style('my-styles-emojionearea', get_stylesheet_directory_uri() . '/emoji/emojionearea.css', array(), '1.0');
}

add_action('wp_enqueue_scripts', 'my_add_scripts_style_emoji');

If I understand well, it’s always a best practice to use WP core jquery version rather than put your own jquery version. So, why this not working here and only way to make it work is to load your own version of jquery? Any ideas?

Answer 1

OK, problem was in WP jquery noConflict. Basically it must work if you replace first $ with jQuery, but in this case needed to replace second $ too. So, answer is to change second $ by jQuery.

<textarea class="emojitextarea"></textarea>
<script type="text/javascript">
    jQuery(document).ready(function() {
        jQuery(".emojitextarea").emojioneArea({
        pickerPosition: "bottom"
        });
    });
</script>