trying to use ui-links

Hi,

I'm trying to use the uilinks Jquery Plugin but for some reason I can't add links dinamically using the plugin.

I created a uilinks Ui component

  <div id="moreSource" class="ui-links" data-maxlinks="0">
    <ul>
        <li><a href="#" >Link 1</a></li>
        <li><a href="#" >Link 2</a></li>
        <li><a href="#" >Link 3</a></li>
        <li><a href="#" data-more>Source</a></li>
        <li><a href="#" data-cancel>Cancel</a></li>
    <ul>
</div>  

And I'm trying to dynamically add a new link as such

<script type="text/javascript" charset="utf-8">
var options = {className: "", selected: true };

var newLink = '<a href="#" style="float: none;">Link 100</a>';

$('#moreSource.ui-links').uilinks('add', newLink, options);
</script>

But nothing seems to work, what am I doing wrong?

Parents
  • I have tested with $(document).ready(function() { ... });). but I get the same result.

  • Test-Widget.xml
    <scriptedContentFragments>
    	<scriptedContentFragment name="Test" version="10.2.0.0" description="" instanceIdentifier="3a1ccf6e7444427cb10dbf19a7c842ae" theme="" isCacheable="false" varyCacheByUser="false" showHeaderByDefault="true" cssClass="" lastModified="2018-11-26 16:00:46Z" provider="7bb87a0cc5864a9392ae5b9e5f9747b7">
    		<contentScript language="Velocity"><![CDATA[<div id="moreSource" class="ui-links" data-maxlinks="0">
        <ul>
            <li><a href="#" >Link 1</a></li>
            <li><a href="#" >Link 2</a></li>
            <li><a href="#" >Link 3</a></li>
            <li><a href="#" data-more>Source</a></li>
            <li><a href="#" data-cancel>Cancel</a></li>
        <ul>
    </div>
    
    <script type="text/javascript">
        $(document).ready(function() {
           $('#moreSource').uilinks('add', '<a href="#" style="float: none;">Link 100</a>', {className: "", selected: true }) 
        });
    </script>]]></contentScript>
    	</scriptedContentFragment>
    </scriptedContentFragments>

    I tested with this widget in 9.2 and 10.2 and it is working in both situations. Is there more code that could be affecting your implementation? Any javascript errors?

Reply
  • Test-Widget.xml
    <scriptedContentFragments>
    	<scriptedContentFragment name="Test" version="10.2.0.0" description="" instanceIdentifier="3a1ccf6e7444427cb10dbf19a7c842ae" theme="" isCacheable="false" varyCacheByUser="false" showHeaderByDefault="true" cssClass="" lastModified="2018-11-26 16:00:46Z" provider="7bb87a0cc5864a9392ae5b9e5f9747b7">
    		<contentScript language="Velocity"><![CDATA[<div id="moreSource" class="ui-links" data-maxlinks="0">
        <ul>
            <li><a href="#" >Link 1</a></li>
            <li><a href="#" >Link 2</a></li>
            <li><a href="#" >Link 3</a></li>
            <li><a href="#" data-more>Source</a></li>
            <li><a href="#" data-cancel>Cancel</a></li>
        <ul>
    </div>
    
    <script type="text/javascript">
        $(document).ready(function() {
           $('#moreSource').uilinks('add', '<a href="#" style="float: none;">Link 100</a>', {className: "", selected: true }) 
        });
    </script>]]></contentScript>
    	</scriptedContentFragment>
    </scriptedContentFragments>

    I tested with this widget in 9.2 and 10.2 and it is working in both situations. Is there more code that could be affecting your implementation? Any javascript errors?

Children
No Data