CODEWITHSUNDEEP
javascriptjqueryajax
colmtuite
colmtuite

Reputation: 4491

Dynamically generated script not working

I have a contenteditable div where you type javascript which gets outputted into an empty script tag.

<div contenteditable="true" id="script-generator"></div>
<div id="save-script">Save</div>

<script type="text/shorthand" id="script">
</script>

So you write your script in the div, click save and I have some JS which gets the html of the contenteditable div and adds it to an empty script tag.

$('#save-script').click(function() {
  var script = $('#script-generator').html();
  $('#script').html(script);
});

So far this works. But the generated script has no effect. The browser must not recognise the script because it wasn't there on page load? How do I make the script take effect without reloading the page?

Note: The type/shortand on the script is because I'm using a plugin which converts shortand words into actual Javascript. So the user would just need to write shorthand into the contenteditable div, and the plugin would convert that to JS. This might be adding to the problem?

Upvotes: 0

Views: 112

Answers (3)

Barmar
Barmar

Reputation: 780688

I don't think it works to modify an existing <script> element. If you want the script to be executed you need to add a new element.

$('#save-script').click(function() {
    var script = $('#script-generator').html();
    $("#script").text(script);
    ShortHand.parseScripts();
});

Upvotes: 3

lshettyl
lshettyl

Reputation: 8171

I have set up a test that's similar to what you have been looking for. Take a look and see if that helps.

Working Demo Test code:

<div id="script" style="display:none">
    alert(4+4);
</div>
<input id="sLoad" type="button" value="Load/Execute Script" />

$('#sLoad').click(function(){
    //You may want to append to the head
    $('<script/>').append( $('#script').html() ).appendTo('#script');

});

Upvotes: 0

Mitya
Mitya

Reputation: 34556

Correct - you need to create the script tag to have it execute after load.

$('head').append($('<script />', {html: script}));

...which means you can remove your empty script tag.

Upvotes: 1

Related Questions