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

[–] 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>

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

you can tell by checking the routes in app/__init__.py

the link "/u/<user>/comments" goes to https://phab.phuks.co/source/throat/browse/master/app/__init__.py$518:

return render_template('usercomments.html', user=user,..... "render_template" goes to the app/templates folder


the link "phuks.co/settings/subs" goes to https://phab.phuks.co/source/throat/browse/master/app/__init__.py$524:

return engine.get_template('user/topbar.html').render({}) "engine.get_template" goes to the wheezy app/html folders

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

ahh yes, those app/html are wheezy templates, they use @extends("shared/layout.html") and @import "shared/post.html" to import stuff from from within those local html folders or @{url_for('static', filename='XXXX')} to call that app/static folder globally. You kinda caught us between transitioning from the older flask templates in app/templates to the newer wheezy templates in app/html. They're a lot faster but call the files internally a little differently.