How to Append html code inside dialog using jquery

Question

I have this variable template="<div>...</div>"

I want show this html code inside a dialog:

<div id="dialog" title="Basic dialog">
    <p id="templates"></p>
</div>

<script>
    $("#templates").html(template);
    $( "#dialog" ).dialog({
       height: auto,
       width: 800,
       modal: true,
       // ...
    });
</script>

But it doesn't work.

How I can append my custom html inside a dialog?

You are trying to add "<html><head>...</head></html>" into <p>. Are you serious? You can use <iframe> for this. Or maybe more simplified (just <body> inner HTML) template and <div> instead of <p>. — Regent
– Regent, Commented Oct 30, 2014 at 13:36
"I have this variable template="<html><head>...</head></html>" I want show this html code inside a dialog:" No, you don't want that. I think you've misunderstood what you're trying to accomplish a bit. — sebbzzz
– sebbzzz, Commented Oct 30, 2014 at 14:07

Stan Shaw · Accepted Answer · 2014-10-30 13:57:27Z

2

This should work for your purposes:

function PopModal(StuffToAppearInModal) {
              $('<div>' + StuffToAppearInModal+ '</div>').dialog({
              height: auto,
              width: 800,
              modal: true,
                });
            }

remove the "head" and "html" tags from your variable, and call it like this:

 PopModal("hey this is going to appear in my <font color='Red'>modal</font>.  html controls work, too like this: <input type='text' id='tbTest'/>");

answered Oct 30, 2014 at 13:57

Stan Shaw

3,0541 gold badge14 silver badges27 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Regent · Accepted Answer · 2014-10-30 14:21:32Z

0

You can use wireframes or append code without <html><head>...</head></html> because it is determined as web page.

edited Oct 30, 2014 at 14:21

Regent

5,1743 gold badges23 silver badges36 bronze badges

answered Oct 30, 2014 at 13:43

Alex Filatov

2,3693 gold badges33 silver badges47 bronze badges

Comments

Kaster · Accepted Answer · 2014-10-30 14:38:05Z

0

Only valid html content will be interpreted as parameter inside html function. If not, it will be filtered. In your example filter only leaves "..." in your content.

See example for other (valid) html content.

var template="<table style=\"border:solid red 2px;\"><tr><td><u>Test</u></td></tr></table>";
$("#templates").html(template);
...

answered Oct 30, 2014 at 14:38

Kaster

891 silver badge7 bronze badges

Collectives™ on Stack Overflow

How to Append html code inside dialog using jquery

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related