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 heading exists with class of "lia-terms-service").  I have tried about 20 different ways to insert our TOS. 

This is where I gave up and posted this plea for help!

 

$('.lia-terms-service').prepend('<div class="tos lia-faq-answer"></div>');
$('.tos').html(${text.format('page.user_signup.terms_of_service')});

 

 

If I comment out the second line, the new DIV is prepended and all is good -- but it has nothing in it. When I include the insertion, it falls over.  

Does anyone have any ideas?  I'm sure there's a way but it has so far evaded capture!

Thanks

  • 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
    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.

    • 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).