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

We don't use external javascript or jquery for safety and faster load times. We purposely removed google scripts, font-awesome icons, and captchas. You risk breaking several functions, breaking future compatibility, and allowing an external site to be able to inject code into your site and track your users activity at any time.

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

I thought it was just adding 2 lines of scripts and a function so I thought it'd be harmless *HUGE grin*

The said scripts:

<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script src="https://www.jqueryscript.net/demo/emoji-picker-input-textarea/inputEmoji.js"></script>

Nevertheless, 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 it became

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

INSTEAD OF

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

A question here @pembo210 , I want to place this inputEmoji.js file in a throat/app/html/sub/js folder instead of calling it from jqueryscript.net. How would my <script src=...> in the following line of code change?

<script src="https://www.jqueryscript.net/demo/emoji-picker-input-textarea/inputEmoji.js"></script>

Would it be the following? Since post.html file is also in the throat/app/html folder

<script src="{{url_for('static', filename='/js/inputEmoji.js')}}"></script>

Structure of my app/html/sub folder (PIC). The js folder is where I intend to place the inputEmoji.js file.

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

{{url_for('static', filename='XXXXX')}} is setup to call stuff in the throat/app/static folder.

so <script src="{{url_for('static', filename='/js/inputEmoji.js')}}"></script> will call the inputEmoji.js file if it is put in throat/app/static/js folder.

also <link rel="stylesheet" href="{{url_for('static', filename='/css/customFile.css')}}" type="text/css" /> in the head block, you can link to a customFile.css file in the throat/app/static/css folder for css

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

Thanks so much! The following did the trick. I'm in the html/sub folder /home/app/throat/app/html/sub with js being a subfolder of sub.

<script src="@{url_for('static', filename='js/inputEmoji.js')}"></script>