Forum Discussion

jeffshurtliff's avatar
5 years ago

Trying to use jQuery and liaAddScript to add anchor to TKB article

I'm trying to use the liaAddScript directive in a custom component and jQuery to add anchors to TKB articles that have specific CSS classes but it doesn't seem to want to work.

This is what my custom component looks like:

<#-- Add the anchor using jQuery -->
<@liaAddScript>
  ; (function ($) {
	console.log('Adding anchor to article');
    $('<a name="appliesTo"></a>').insertBefore("kbsync-applies-to");
  })(LITHIUM.jQuery);
</@liaAddScript>

The custom component was added to the page's quilt but when loading an article I see violations in the JavaScript console as shown below.

The anchor is also not added to the article.

I thought I was using the correct syntax but is there something I'm missing or doing wrong?

  • Hi jeffshurtliff 

    Please use dot (.) before class name.

    Ex: 

     

    <@liaAddScript>
      ; (function ($) {
    	console.log('Adding anchor to article');
        $('<a name="appliesTo">your link</a>').insertBefore(".kbsync-applies-to");
      })(LITHIUM.jQuery);
    </@liaAddScript>

     

4 Replies

  • 1. Elements can be loaded after your script is executed.  Stop script execution via debugger on start and  check DOM tree for ".kbsync-applies-to".  Try to wrap your code into DOMContentLoaded event listener or similar.

    2. To prevent violation try to create custom component of TKB article list using the override and delegate FreeMarker directives. Or add anchors as id attribute to existing DOM elements.

  • MattV's avatar
    MattV
    Khoros Staff
    5 years ago

    You've made a mistake in your jQuery selector.

     

    $('<a name="appliesTo"></a>')

     

    Should look something more like

     

    $("a[name='appliesTo']")

     

     

  • Hi jeffshurtliff 

    Please use dot (.) before class name.

    Ex: 

     

    <@liaAddScript>
      ; (function ($) {
    	console.log('Adding anchor to article');
        $('<a name="appliesTo">your link</a>').insertBefore(".kbsync-applies-to");
      })(LITHIUM.jQuery);
    </@liaAddScript>