Forum Discussion

PAULEM's avatar
PAULEM
Advisor
6 years ago

Cannot insert Terms of Service using jQuery

I have struggled with this for several days now -- it's driving me nuts!  I want to get our Terms of Service and add it to the FAQ page.  I have created a new section (id = "terms-service" and headi...
  • AdamN's avatar
    AdamN
    6 years ago

    Hi PAULEM ,

    I would suspect that the resulting JavaScript is not well-formed. Let's say your terms of service is:

    <a href="https://www.khoros.com">Click here to learn more</a>

    When this gets rendered, your resulting JavaScript would be:

    $('.tos').html(<a href="https://www.khoros.com">Click here to learn more</a>);

    which is not valid JavaScript.

    Instead you might try something like this:

    $('.tos').html('${text.format('page.user_signup.terms_of_service')?js_string}');

    The ?js_string is a Freemarker built-in to convert a string to be suitable for output into JavaScript strings. And the surrounding single quotes will allow your JavaScript to treat the rendered TOS as a string.

    End the end, this would render to something like:

    $('.tos').html('<a href=\"https://www.khoros.com\">Click here to learn more</a>');

    Which should give you a better result.

    That said, inserting content via DOM manipulation is a practice we typically advise against. This is the "Help"/"FAQ" pages you're talking about, as in /t5/help/faqpage? The sections of the FAQ should be editable via Studio. So I'd be curious to know more about the issue you're encountering. There may be a better way to approach this.

AdamN's avatar
AdamN
Khoros Oracle

Hi PAULEM ,

I would suspect that the resulting JavaScript is not well-formed. Let's say your terms of service is:

<a href="https://www.khoros.com">Click here to learn more</a>

When this gets rendered, your resulting JavaScript would be:

$('.tos').html(<a href="https://www.khoros.com">Click here to learn more</a>);

which is not valid JavaScript.

Instead you might try something like this:

$('.tos').html('${text.format('page.user_signup.terms_of_service')?js_string}');

The ?js_string is a Freemarker built-in to convert a string to be suitable for output into JavaScript strings. And the surrounding single quotes will allow your JavaScript to treat the rendered TOS as a string.

End the end, this would render to something like:

$('.tos').html('<a href=\"https://www.khoros.com\">Click here to learn more</a>');

Which should give you a better result.

That said, inserting content via DOM manipulation is a practice we typically advise against. This is the "Help"/"FAQ" pages you're talking about, as in /t5/help/faqpage? The sections of the FAQ should be editable via Studio. So I'd be curious to know more about the issue you're encountering. There may be a better way to approach this.

PAULEM's avatar
PAULEM
Advisor
6 years ago

Hi AdamN 

Thanks for your help. Your suggestion didn't work when I tried to use the text key directly but by #assigning it first, it works great!  woo hoo!!  I couldn't have done it without your help!  In case anyone else wants to do this, here's my working solution:

 

<#assign tos>
   ${text.format('page.user_signup.terms_of_service')}
</#assign>

<@liaAddScript>
(function($) {
    $(document).ready(function() {
        $terms = "${tos?js_string}" 
        $('.lia-terms-service').prepend('<div class="tos-text lia-faq-answer"></div>');
        $('.tos-text').html($terms);
    });
})(LITHIUM.jQuery);
</@liaAddScript>

 

RE: I'd be curious to know more about the issue you're encountering. 

We're using the "faq-toggleable-contents" OOTB component.  We want the terms of service to appear when the Level 1 heading (Terms of service) is expanded, and not as an expandable level 2 heading under the level 1 heading (which is the way the FAQpage is designed to work).