compile html after clicking on a button

Question

Ok. So i have this situation: I want to have a text-area where the user can input HTML code. At the press of the button "Preview" i want that HTML to be opened in a new window. I am using ASP.NET. Can you explain how I could open a new window with the HTML compiled? I have this script:

<script type="text/javascript">    

$(document).ready(function () {
    $(".link-preview").click(generatePreview);
});

function generatePreview2($value) {
    document.getElementById("generatedPreview").innerHTML = $value;
}

function generatePreview() {
    $value = $(".textbox-preview").val();
    generatePreview2($value);
}

</script>

You cant render html to the different tab until you load from the server, you need to save it to server and load using url, however you can load html in the same tab — programtreasures, May 14 '18 at 14:03
Possible duplicate of [How to open a new window and insert html into it using jQuery?](https://stackoverflow.com/questions/9399354/how-to-open-a-new-window-and-insert-html-into-it-using-jquery) — Anh Tú, May 14 '18 at 14:05

hallleron · Accepted Answer · 2018-05-15T07:42:40.207

NOTE: The sample is not working in the code snippet editor here because the document is not recognized. Try this locally and it'll work with any HTML you insert in the textarea.

I modified your generatePreview2() function to receive the value of the textarea and open a new window + writing the textarea value to that new window document.

Does this help you?

$(function () {
  $(".link-preview").click(generatePreview);
});

function generatePreview2($value) {
  var result_window = window.open('#','_blank', 'height=500,width=500');
  result_window.document.write($value);
}

function generatePreview() {
  $(".textbox-preview").each(function(){
    generatePreview2($(this).val());
  });
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<p>Textarea 1</p>
<textarea class="textbox-preview"></textarea>

<p>Textarea 2</p>
<textarea class="textbox-preview"></textarea>

<span class="link-preview">Preview</span>

EDIT: I modified my code sample and added a loop to generatePreview(). You can add as many textareas with the same class name as you want, each will open its own window on blick of the button. HOWEVER: Most browsers block those windows if there is more then one. So you need to allow e.g. Chrome in the top right of the URL bar to open as many windows as it wants. Keep that in mind.

This helps a lot. I am trying to make a multi-language html compiler on browser. I have 2 textareas(for now) but only one button for Preview. With your help I managed to Preview the HTML from the first textarea, but the second one no. Do i need to give each of them an id or i could use the same class for both? — Sami, May 15 '18 at 05:00
Have a look at the updated code and please read the EDIT part underneath the code sample. You have to allow popups for this to work. — hallleron, May 15 '18 at 07:43

score 0 · Answer 2 · answered May 14 '18 at 14:11

0

Html:

<textarea id="myhtmlsnippet" style="width:100%;" rows="10"></textarea>
<button id="gethtml">
    Run Snippet
</button>

JQuery:

$(document).on("click", "#gethtml", function() {
  var h = $("#myhtmlsnippet").val();
  var w = window.open('','','width=600, height=600');
  $(w.document.body).html(h);
});

answered May 14 '18 at 14:11

Yunus Aslam

2,447
4
25
39

I was trying not to give them a specific id but work with the class selector. But thanks :) – Sami May 15 '18 at 05:02
@Sami this was just an example. Ofcourse you can do it with class or ID. Anyway it seems you got this working. Great! – Yunus Aslam May 15 '18 at 08:06

compile html after clicking on a button

2 Answers2