get content from textbox place in iframe layer

Question

i am new to jquery so kinda new your help/guide to do this. i got a textbox where i write html tags. now what i want to do is a preview button. it should open a jquery layer/popup with the written html from my textbox so i can se it. is there a way that any of you could guide me to where to find scripts like this or help me out a little? i have searched for this but all i find is how to open up iframes with external sources. i need to pass my own html into the iframe.

thx in advance

Answer 1

This worked for me:

<link href="jquery-ui-1.7.2.custom.css" rel="stylesheet" type="text/css" />

<script src="jquery-1.3.2.min.js" type="text/javascript"></script>
<script src="ui.core.js" type="text/javascript"></script>
<script src="ui.dialog.js" type="text/javascript"></script>

<input type="submit" value="Submit" id="button" />
<input  type="text" id="txtBody" />
<br />

<div id="dialog" style="display: none;">
</div>

<script type="text/javascript">
    $("#button").click(function() {
        $("#dialog").html($("#txtBody").val());
        $("#dialog").dialog().dialog("open");
    });
</script>

Actually, I was wrong about using .html(). The right way was to use .val().

Answer 2

Is it really necessary for you to use an iframe or a pop-up? There are other solutions like http://jqueryui.com/demos/dialog/ which don't force you to have a separate HTML document element. Or you could just use any element for that:

$("#target").html($("#source").html())

Answer 3

Okay, let's say you have a textarea with ID txtBody, a trigger button with ID button and an empty div with ID dialog which will be used for the dialog.
Then you'd have to do it like that:

<script type="text/javascript">
    $("#button").click(function() {
        $("#dialog").html($("#txtBody").html());
        $("#dialog").dialog();
    });
</script>

Just don't forget to include jQuery and jQuery UI in that page.