Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

Python

Mike Nedelko
Mike Nedelko
8,991 Points

Django & JavaScript - Can't figure out what I am doing wrong

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 (http://codepen.io/Regaddi/pen/qZpbRj), 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 Answer

Mike Nedelko
Mike Nedelko
8,991 Points

Ok. So I figured out the answer by reviewing the answer to this question:

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

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

And this one:

window.CP.exitedLoop(1);

Once I took these out it worked.