发送HTML到javascript函数

Question

I've created a javascript function to displays a dialog and receives two parameters for title and body, which will be called from links in a slider. The thing is I want the body to be able to display HTML code, so you can display links or whatever. All of this inside a velocity template used in a Liferay portal (just in case it came useful). This is what i have now:

JS :

function displayPopup(title, body) {
        $("#more-popup").html(body);
        $("#more-popup").dialog({
            modal: true,
            title: title
        });
        return false;
    }

VELOCITY :

#if ($slide.displayPopup.data == true)
    #set( $popupBody = $escapeTool.html($slide.popupBody.data) )
    <a href="#" class="moreButton" onclick="displayPopup('$slide.popupTitle.data', '$slide.popupBody.data')">$moreTextString</a>
#elseif ($slide.Link.data)
    <a href="$slide.Link.data" class="moreButton">$moreTextString</a>
#end

I can't come up with a workaround to this. First the html was wrong because of the quotes. After using escaping for HTML entities, the link seems ok, but a javascript exception jumps when clicking on the link: Uncaught exception: Unexpected Identifier Also i don't how to convert back the code to HTML that i can insert in the dialog. Thanks in advance.

Answer 1

A not-so-good solution is to try this:

#if ($slide.displayPopup.data == true)
    #set( $popupBody = $escapeTool.html($slide.popupBody.data) )
    <a href="#" class="moreButton" onclick="displayPopup('$slide.popupTitle.data', "$slide.popupBody.data")">$moreTextString</a>
#elseif ($slide.Link.data)
    <a href="$slide.Link.data" class="moreButton">$moreTextString</a>
#end

Notice the " instead of '.

But the real problem is that you are using an HTML escape function where you need a JS escape function that just escapes ' with \\' for example... Using HTML escape can give you problems when using your dialog (that you don't see yet because of the JS error).

I don't know how to do this in Velocity but you can start by replacing ' with \\'

Answer 2

I finally fixed it with a workaround but not actually passing the HTML to the function, but creating the div to display the popup for each slide that needs it.

Velocity

#if ($slide.displayPopup.data == true)
    <a id="more-popup-button-$velocityCount" href="#" class="moreButton popup-button" >$moreTextString</a>
    <div id="more-popup-$velocityCount" class="more-popup" title="$slide.popupTitle.data">
        $slide.popupBody.data
    </div>
#elseif ($slide.Link.data)
    <a href="$slide.Link.data" class="moreButton">$moreTextString</a>
#end    

JS

$("#slides a.moreButton.popup-button").click(function (event) {
    var number = $(this).attr("id");
    number = number.substr(number.lastIndexOf("-") + 1);
    $("#more-popup-" + number).dialog({
        modal: true
    });
    event.preventDefault();
});