Set a json object property to HTML

Question

I am trying something like

var template = new Object();
template.DescriptionHTML ='*html content goes in here*'

This is why:

When the user clicks on a button a popup window opens where he/she can enter html text using a WYSIWYG editor. When they click submit, I want to pass the HTML content to the parent page using jQuery. Now this works if I am passing plain text from pop up to parent. But if I try to pass HTML it breaks. I don't want to escape the HTML characters because in the parent page I want to display the HTML content. How can this be done?

I am aware of alternatives such as posting back the parent page and getting the updated content. But I would appreciate if the responses can be limited to making the above scenario work.

Note: JSON is a string not an object ... you can parse a JSON string to a JavaScript object .... — Manse, Mar 20 '12 at 15:16

score 1 · Answer 1 · answered Mar 21 '12 at 14:41

this works, the important bit is to only have jquery referenced from the main window not the popup and control the popup from there

Main Window

<!DOCTYPE html>
<html>
<head>
    <title>Main Window</title>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>

    <script type="text/javascript">
        $(function () {
            $(".editable").click(function () {
                var 
                    $element = $(this),
                    popupWindow = window.open("popup.html", "popup", "width=525,height=250");

                $(popupWindow).load(function () {
                    var 
                        $editor = $(popupWindow.document).find("#Editor"),
                        $submit = $(popupWindow.document).find("#Submit");

                    $editor.val($element.html());
                    $submit.click(function () {
                        $element.html($editor.val());
                        popupWindow.close();
                    });
                });

                popupWindow.element = this;
            });
        });
    </script>
</head>
<body>

    <div class="editable">
        <p>I'm editable click me</p>
    </div>

    <div class="editable">
        <p>I'm editable as well click me</p>
    </div>

</body>
</html>

Popup window

<!DOCTYPE html>
<html>
<head>
    <title>Popup Window</title>
</head>
<body>
    <textarea id="Editor" rows=10 cols=60></textarea>
    <input id="Submit" value="Submit" type="button" />
</body>
</html>

score 0 · Answer 2 · answered Mar 20 '12 at 15:13

0

Try :

$('#submitbuttonid').click(function() { or $('#formid').submit(function() {
   var html = $('#textarea').html();
   // do what you want with it from here
   template = [];
   template.DescriptionHTML = html;
});

you need to change submitbuttonid to the id of the submit button or formid to the id of the form submitted and #textarea to the WYSIWYG textarea id.

This uses .click(), .html() and .submit()

answered Mar 20 '12 at 15:13

Manse

37,765
10
83
108

Fetching the HTML is not an issue. the problem is that, since the html has special characters, it breaks the code :(. – developer747 Mar 20 '12 at 17:32
@developer747 Try [encoding the HTML](http://stackoverflow.com/questions/1219860/javascript-jquery-html-encoding) – Manse Mar 20 '12 at 19:40

score 0 · Answer 3 · answered Mar 20 '12 at 15:28

0

perhaps you should use an absolutely positioned div (dialog) rather than a popup window? that way your not getting into separate window issues such as permissions an popup blockers

then ManseUK's code above would work for you

answered Mar 20 '12 at 15:28

Anthony Johnston

9,405
4
46
57

I have to add a pop up to be consistent with the rest of the web application :( – developer747 Mar 20 '12 at 17:30

Set a json object property to HTML

3 Answers3