[Jquery] - get content from textbox place in iframe layer

Question

hi people. 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

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 2

Have a look at the blockUI plugin demos page:

http://malsup.com/jquery/block/#demos

Might anything here help you?

Answer 3

@Ignas R

it dont have to be an iframe or popup, dialog is fine. and yes i want to render the html so i guess that is good.

my thing is i dont know how to do the rest, is it like this. but what about the trigger?

<script type="text/javascript" language="javascript">
    $(document).ready(function() {
        $("#target").html($("#txtBody").html())
    });
</script>

the target what should that be and how is it written? i seen other examples use style="display: none;"

and my trigger could be ? or should i use the button? like i told you im totaly new to jquery so please help me out a bit

Answer 4

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.

Answer 5

@Ignas R

i have try your code but for me it wont work. i work with asp.net but i have try this in plain html for test but it wont trigger. here is the code i use

<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="effects.core.js" type="text/javascript"></script>

<script src="ui.dialog.js" type="text/javascript"></script>

<script src="ui.draggable.js" type="text/javascript"></script>

<script src="ui.resizable.js" type="text/javascript"></script>

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



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

<div id="dialog">
</div>

where im i goin wrong?

Answer 6

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 7

that works great Ignas. is it hard to make the dialog div larger and wider and so on?

really appriciate you taking your time