0

I am creating my own code for a live html/js/jquery/css editor. This is the code to simply inject css, html, and javascript(specifically jquery). The css and html work fine, but no matter what i do ican't seem to get the jquery or javascript working... heres my code:

var contents = $('iframe').contents(),
    body = contents.find('body'),
    styleTag = $('<style></style>').appendTo(contents.find('head'));
var makeScript = $('<script class type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"><\/script>');
var scriptTag = $('<script type="text/javascript"><\/script>').appendTo(contents.find('head'));
$ ('textarea').keyup(function() {
    var ths = $(this);
    if (ths.attr('id') === 'html') {
        body.html(ths.val());
    }
    else if (ths.attr('id') === 'css') {
        // it had to be css
        styleTag.text(ths.val());
    }
    else {
        makeScript.appendTo(contents.find('head'));
        scriptTag.text(ths.val());
    }
});

here's my html:

<div>
    <form>
        <h2>HTML</h2>
        <textarea id="html"></textarea>
        <h2>CSS</h2>
        <textarea id="css"></textarea>
        <h2>JS</h2>
        <textarea id="js"></textarea>
    </form>
</div>
<div id="output" style="height: 487px;">
    <iframe src="about:blank"></iframe>
</div>

if any one sees something wrong with my code please help, and if you answer please explain your solution, rather that just typing a block of code....and I tried entering jquery and regular javascript into the html textarea (within a script tag but it still didn't work).

Anonymous
  • 11,748
  • 6
  • 35
  • 57
horrigan97
  • 3
  • 2
  • Have you tried setting the contents of the script element _before_ you append it? (And then on subsequent changes remove the old element and append a new one that includes the changes?) – nnnnnn Apr 23 '14 at 22:11

1 Answers1

0

First I think you spelled this wrong. It should be scriptTag.text(this.val());

I think your issue goes deeper than that. It is my understanding that when you inject a script tag into the dom it gets evaluated immediately but you are waiting to put the actually code in AFTER it has been already added to the page. Reorder it.

scriptTag = $("<script type='text/javascript'>" + this.val() + "</script>")
   .appendTo($('iframe').contents().find('head'));

Note I had to bring out the selector contents because it was in the scope of a different function.

Pierre Tasci
  • 450
  • 2
  • 8
  • i tried what you suggested and it's still not working...i tried looking at how the browser was registering this.val() (using the development tool)when it came to javascript, and between the script tags it either shows nothing or says undefined. ideas? – horrigan97 Apr 24 '14 at 16:34
  • Check this question out [here](http://stackoverflow.com/questions/610995/cant-append-script-element). Looks like you can't add script tags with jQuery because of the way it tries to parse the elements when you append them to the DOM. – Pierre Tasci Apr 25 '14 at 15:59
  • Thanks a lot! Im pretty sure this answers my question. – horrigan97 Apr 26 '14 at 00:51