2

Fixed It.

(by trial and error)

Upon going to the console I got the $ is not defined error. Googled around and you had to get the jQuery javascript code by running it inside a code block. (Source: https://stackoverflow.com/questions/2194992/jquery-is-not-defined)

Example:

$(document).ready(function () {
  //your code here
});

So my code became

<script>
 $(document).ready(function () 
  {
    $('textarea').emoji({place: 'after'});
  }
);
</script>

INSTEAD OF

<script>
 $(function () {
  $('textarea').emoji({place: 'after'});
 })
</script>

Problem Was

I'm looking at running the following script within the post.html file of the throat/app/html/sub folder so that it picks up an emoji picker and places it below the post comment form. Here's what I'm trying to achieve.

It seems to work locally but goes kaput on the production site. Local pic.

        $(function () {
            $('textarea').emoji({place: 'after'});
        })

Upon digging, I'm told the $(function) won't work and I need to change the lines but not how. And that's it!

To the post.html, I made changes and added the following declarations(?) instead of adding these with the divs. I just copied the block head and super from another file, thinking it would work :p

{% block head %}
{{ super() }}
<script language="JavaScript" src="https://code.jquery.com/jquery-3.4.1.slim.min.js""></script>
<script src="{{url_for('static', filename='js/inputEmoji.js')}}"></script>
{% endblock %}

The inputEmoji is the main javascript file.

I"ve just given up on how to fix the following i.e. rearranging the script - the $ or function etc. Would be great if any of you could share what changes do I need to make to the following for it to work.

        $(function () {
            $('textarea').emoji({place: 'after'});
        })```
## Fixed It. (by trial and error) Upon going to the console I got the **$ is not defined** error. Googled around and you had to get the jQuery javascript code by running it inside a code block. (Source: https://stackoverflow.com/questions/2194992/jquery-is-not-defined) **Example:** ``` $(document).ready(function () { //your code here }); ``` **So my code became** ``` <script> $(document).ready(function () { $('textarea').emoji({place: 'after'}); } ); </script> ``` **INSTEAD OF** ``` <script> $(function () { $('textarea').emoji({place: 'after'}); }) </script> ``` ===== === ##Problem Was === I'm looking at running the following script within the **post.html** file of the **throat/app/html/sub** folder so that it picks up an emoji picker and places it below the post comment form. [Here's what I'm trying to achieve. ](https://www.jqueryscript.net/demo/emoji-picker-input-textarea/) It seems to work locally but goes kaput on the production site. [Local pic](https://i.imgur.com/x5ssvI7.jpg). ``` <script> $(function () { $('textarea').emoji({place: 'after'}); }) ``` Upon digging, I'm told the $(function) won't work and I need to change the lines but not how. And that's it! To the post.html, I made changes and added the following declarations(?) instead of adding these with the divs. I just copied the **block head** and **super** from another file, thinking it would work :p ``` {% block head %} {{ super() }} <script language="JavaScript" src="https://code.jquery.com/jquery-3.4.1.slim.min.js""></script> <script src="{{url_for('static', filename='js/inputEmoji.js')}}"></script> {% endblock %} ``` The **inputEmoji** is the main javascript file. I"ve just given up on how to fix the following i.e. rearranging the script - the **$** or **function** etc. Would be great if any of you could share what changes do I need to make to the following for it to work. ``` <script> $(function () { $('textarea').emoji({place: 'after'}); })```

14 comments

[–] pembo210 1 points (+1|-0) Edited
{% block head %}
{{ super() }}

<script>
     custom javascript...
</script>
{% endblock %}

the super() loads the <head> of the file listed above it (layout.html)

you might have to use normal js to create the emoji div and make each option, then textarea.after(newdiv) to attach it right after. The text area has its own special js code since we don't use a special markdown add-on, ours is builtin. You might have to put it in there. in throat/app/static/js/Editor.js

<script src="{{url_for('static', filename='js/inputEmoji.js')}}"></script> isn't needed if you place the inputEmoji.js file in troat/app/static/js then run npm run build again so it can minify it and include it with the rest of the site's js.

[–] pembo210 1 points (+1|-0) Edited

something like

// make the main div and add a class to it
var emojidiv = document.createElement('div');
emojidiv.setAttribute('class', 'emojidiv');

// make the options and append them into the div
var option1 = document.createElement('span');
emojidiv.setAttribute('data-emoji', '&#x1F642;');
emojidiv.setAttribute('style', 'cursor: pointer; font-size: 20px;');
emojidiv.innerHTML = '🙂';
emojidiv.appendChild(option1);

// locate textarea and attach the div
var txt = document.getElementById('ID_of_textarea_you_want_to_use')
txt.after(emojidiv);

The icon you use can toggle the css of the div from display:none to display:block. Then an eventlistener or another function to place "data-emoji" data into the textarea on click

[–] curious [OP] 1 points (+1|-0)

Apologies. I wasn't elaborate enough.

Permalink to how I solved it. And another question for you too :D