-2

Hi StackOverflow community

I am doing something wrong but can't figure out what it is. I am having trouble with some Java Script and it seems as though Django just doesn't want it. I am attempting to add the following Java Script to my site, but the code just doesn't want to stick. Here is an example that works, but I can't replicate it in the code below code.

The javascript is supposed to take some tags such as :lol: and automatically convert it to an emoticon inside the editable p tag. It is also supposed to change :somegif: to an animated gif (please see the code via the link above for a workable example). What am I doing wrong?

Here is my HTML:

(function () {
    var $input, emojiMap;
    emojiMap = {
        ':lol:': '😆',
        ':somegif:': '<img src="http://i.giphy.com/pPzjpxJXa0pna.gif" />'
    };
    $input = $('.input');
    $input.on('keyup input', function (ev) {
        var code, range, replacement, selection, text;
        text = $input.html();
        for (code in emojiMap) {
            if (window.CP.shouldStopExecution(1)) {
                break;
            }
            replacement = emojiMap[code];
            text = text.replace(code, replacement);
        }
        window.CP.exitedLoop(1);
        $input.html(text);
        range = document.createRange();
        selection = window.getSelection();
        range.setStart(this, this.childNodes.length);
        range.collapse(true);
        selection.removeAllRanges();
        return selection.addRange(range);
    });
}.call(this));
input,
.input {
  border: 1px solid #ccc;
  display: block;
  font-family: sans-serif;
  font-size: 1em;
  padding: .5em;
  width: 50vh;
  background-color: white;
}
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
    {% load static from staticfiles %}
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
    <title>Bootstrap 101 Template</title>

    <!-- Bootstrap core CSS -->
    <link href="{% static 'css/bootstrap.css' %}" rel="stylesheet">

    <!-- Custom Styles CSS -->
    <link href="{% static 'css/styles.css' %}" rel="stylesheet">

    <!-- jQuery Implementation-->
    <script src="{% static 'js/jquery-1.12.2.min.js'%}"></script>
    <script src="{% static 'js/rango-jquery.js' %}"></script>
    <script src="{% static 'js/bootstrap.min.js' %}"></script>
  </head>
  <body id="body_color">
    <div class="container" id="top_container">
        <div class="row"> <!-- Major Row containing both the chat window and the autoring window -->
            <div class="col-lg-4 center-block">
                <h1>{{secretDisplay.secretTitle}}</h1>
                    <div class="row">
                        <div class="col-ls-12"> 
                            <p contenteditable="true" class="center-block input"></p>
                        </div>
                    </div>
            </div>
         </div>
    </div>

    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
  </body>
1
  • You've forgotten to tell us what the problem is
    – Sayse
    Apr 11, 2016 at 13:45

1 Answer 1

0

Ok. So I figured out the answer by reviewing the answer to this question: Strange JavaScript behavior in CodePen with humongous arrays

The problem was two snippets of code, which Code Pen injects into loops.

if (window.CP.shouldStopExecution(1)) {
            break;
}

And this one:

window.CP.exitedLoop(1);

Once I took these out it worked.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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