How to display HTML generated text instead of the tags

Question

I am using JQuery Dialog to display some text which has HTML tag included:

<div id="dialog" style="display: none">
    <p id='infoShow'></p>
</div>

The JQuery which displays the data is:

function test(element) {

        $("#infoShow").html($(".gLine", $(element).closest("tr")).html());
        $("#dialog").dialog({
            title: "View Guideline",
            buttons: {
                Ok: function () {
                    $(this).dialog('close');
                }
            },
            modal: true,
            width: "450px"
        });

    }

It is invoked by an ASP LinkButton:

<asp:LinkButton runat="server" ID="btnShow3" CssClass="btnSearch3" Text="VIEW" OnClientClick="javascript:test(this);return false;"></asp:LinkButton>

Although I am using the .html() to display the output, it is still showing the HTML tags instead of the output:

How can I modify the code so it generates the HTML tag instead of just displaying as plain text?

Zambia

I removed your "Also, the "x" is missing to close the window." since you should only ask one question per question. – Bahamas

BTW, I suggest you break that .html statement into smaller pieces, run in the debugger and see what's what. In particular, how did a .closest("tr") bring back the entire document? Where did the html tag come from? – Bahamas

I actually got it work... i replaced .html() to .text() on the last entry and it's working :) Thanks. – Zambia

Answer 1

Remove the "dialog" div and "infoShow" tags since you don't need them.

Then, instead of writing to an existing div, just append a fresh div to the body element as a dialog, like so:

function test(element) {

    $("<div></div>").appendTo('body')
    .html($(".gLine", $(element).closest("tr")).html())
    .dialog({
        title: "View Guideline",
        buttons: {
            Ok: function () {
                $(this).dialog('close');
            }
        },
        modal: true,
        width: "450px"
    });

}

Or, you could do it like this:

function test(element) {

    $("<div>" + $(".gLine", $(element).closest("tr")).html() + "</div>").appendTo('body')
    .dialog({
        title: "View Guideline",
        buttons: {
            Ok: function () {
                $(this).dialog('close');
            }
        },
        modal: true,
        width: "450px"
    });

}

Mate

I need the Dialog DIV for the JQuery dialog. – Zambia

No, you don't. You can create a div, append it to the body and use THAT for your jQuery dialog. The div does not have to be hard coded - I use jQuery dialogs a lot - try it before you tell me it can't be done :) – Mate

:P I was just curious... can be done I am sure :) I will test it out. – Zambia

/i can just use the later js code and delete the rest of them? – Zambia

I'm not sure I understand your question? – Mate

I was wondering if I can use the second function, but I think I have got it to work. Thanks for the help. – Zambia

Answer 2

Try this:

$("#infoShow").append( $( HTML_TEXT_STRING));

Pubilis

/this almost helped me... Thank you :) – Zambia

I don't want to append everytime. I want to make it new everytime. Can I change the append to .TEXT()? – Zambia

use $("#infoShow").html(""); and then append :) – Pubilis

Answer 3

in your span id "whatever the id is"

you can use .text():

$('#your-span-id').text($('#your-span-id').text());

this will strip all the html tags and then you can display it on your modal. you have to use your span id twice because the nature of the mechanism. this should work.

Stapes

Answer 4

$(".gLine", $(element).closest("tr"))

This syntax is wrong. You can't separate a class name and a jquery element with a comma, and wrap it with '$'. The comma is for css selectors like .gLine, .herpDerp

Lobation

What are you trying to get with that statement? It doesn't make sense. – Lobation

@NickManning he is using the jQuery( selector [, context ] ) notation; it is not the most efficient, but it works. – Rhinoceros