Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

Python

Mike Nedelko
Mike Nedelko
8,991 Points
Posted by 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
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.