...but I think it may be to do with the jquery selector you have with the $ in it.  The error is basically saying it can't translate what you have got into a selector.

What Rob said..

jQuery does not like it's with a colon.  Which is what XPages will turn that into.  Mark Roden has a snippet on OpenNTF...  it's also been incorporated into the latest Ext. library.  you replace the $ with x$ and that just strips the colons out so jQuery stays happy.

 

I already have the snippet actually, and tried replacing $ with x$ with the same error....

<script>
            XSP.addOnLoad(function(){
                x$("#[id$='viewPanel1'] tr td:nth-child(6)").trunk8({
                    fill: '<a href="#">&#160;read more </a>',
                    lines: 3,
                    side: 'right',
                    tooltip: true,
                    width: 'auto'
                });    
            })
        </script>  

Well this doesn't look right:    

("#[id$='viewPanel1'] tr td:nth-child(6)").trunk8({

Specifically the part were you want your id to convert to what will be rendered to the browser.  

Check out this article from xpageswiki.com on how to work with client side:
http://xpageswiki.com/web/youatnotes/wiki-xpages.nsf/dx/Work_with_Client_side_JavaScript

Though now I see you're doing just what Marky did for the most part... in his blog entry:  http://xomino.com/2012/09/06/jquery-in-xpages-15-trunk8-adding-read-more-to-your-paragraphs/
 

He has this:  $("#[id$='viewPanel1'] tr td:nth-child(4)").trunk8({

I've never seen that style to get to the rendered id of a control before..  I've only ever used the curly braces with a colon and not an $..  "#{id:nameOfControl}"

So I'm not sure what the issue is.  Suggest you try with the curly braces...  also...  you could try adding a specific css class and use that in the jQuery to grab the control.  I believe that works universally...

Good luck!!

Have you tried actually downloading Mark's demo database and looking at the code in there rather then the blog post? It's possible that Mark's original example from his blog MIGHT be incorrect.  

On his post he had:

<script>

    XSP.addOnLoad(function(){

        $("#[id$='viewPanel1'] tr td:nth-child(4)").trunk8({

            fill: '<a href="#"> read more </a>',  //this is what is inserted into the text as placeholder

            lines: 3, //the number of lines of orginal text displayed

            side: 'right', //the placement of the "read more" left center right

            tooltip: true, //show a tooltip of the original text

            width: 'auto' // style the final text to fit the container.

        });

    })

</script>

This is the part that I don't get at all:

$("#[id$='viewPanel1'] tr td:nth-child(4)").trunk8({

I've not seen that before....

Interestingly if you go to the trunc8 site all their examples are using CSS classes:

$('.too-long').trunk8();

Maybe he'll stop by on this thread and give us some sage words of widsom.  :)

Good spot David,

I did download the demo db which has the same code as mentioned on the blog.

However I think I'm still getting the syntax wrong....

I'm trying: x$("#{id:viewPanel1}", "tr td:nth-child(7)").trunk8({

My understanding of the x$ snippet is "#{id:viewPanel1}" is the selector for the viewPanel which holds my view data and "tr td:nth-child(7)" are my extra paramenters?

Clearly I am missing something glaringly obvious?...

UUUURGH the blog code is wrong - I am very sorry :( I will fix it as soon as I am finished here

$('[id$=marky1]') is a wildcard and selects everything where the id ends marky1

$('#[id$=marky1]') is complete crap :( there should not be a #

For more information on jQuery selectors check here - http://api.jquery.com/category/selectors/

Hope that helps :)

If the demo doesn't work bug me marky @ theblogURL

:)

Ha, all working now Mark, thanks!

All that's left is for me to do is expand the row/column to show ALL the info when I click "Read More" rather than the truncated info.

Cheers

Can you run this on 2 panels?

I have 2 identical script blocks, one referring to viewPanel1 and the other to viewPanel2 however it only seems to work on the first view panel...

This works in chrome, however I've just noticed, that when using in IE, the text it is supposed to truncate doesn't appear. So the columns are just blank.

has anyone come into any issue's using this with IE?

Not to worry, I've resolved.

I added a span to the line:

$("[id$='viewPanel1'] tr td:nth-child(3) ").trunk8({

To:

$("[id$='viewPanel1'] tr td:nth-child(3) span").trunk8({

Still doesnt work with 2 panels on the same page though.....