More
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>
[–] 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
[–] ScorpioGlitch 1 points (+1|-0)

All you need to know right here: http://markdalgleish.com/2011/03/self-executing-anonymous-functions/

TL;DR:

(function(){

//Normal code goes here

})();

What you really want to pay attention to is that last part: ();
[–] curious [OP] 1 points (+1|-0)

Solved it like this. https://stackoverflow.com/questions/2194992/jquery-is-not-defined

Example:

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

So my (throwing up error) code became 

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

INSTEAD OF

<script>
 $(function () {
  $('textarea').emoji({place: 'after'});
 })
</script>
[–] pembo210 1 points (+1|-0) Edited

I missed that. I thought he was already past that. Moved onto how to add it.. Good catch
©2016-2022 Phuks LLC. All Rights Reserved.
ToS | Privacy | Changelog | Canary | Donate | Bugs | License
Served by c7693d2284ae