0

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?

  • Welcome aboard. I want to ask a question, in your code you have this is not a thing in coding. Can you change wp_register_script('my-script-emojionearea', get_stylesheet_directory_uri() . '/emoji/emojionearea.js', array(‘jquery'), '1.0', false); to wp_register_script('my-script-emojionearea', get_stylesheet_directory_uri() . '/emoji/emojionearea.js', array('jquery'), '1.0', false); ps. edit : comment... – Serkan Algur Dec 23 '19 at 19:03
  • Thanks!!! I changed it!!! – ag_1812 Dec 23 '19 at 19:19
  • 1
    It seems this ` ‘ ` autochanged when I copy pasted my code, because in my initial code I don’t have this sign. – ag_1812 Dec 23 '19 at 19:40
0

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>
|improve this answer|||||

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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