Feb 25, 2015, 10:32 AM
93 Posts
topic has been resolvedResolved

trunk8

  • Category: Other
  • Platform: Windows
  • Release: 9.0.1
  • Role: Developer
  • Tags:
  • Replies: 11

Hi guys,

 

Has anyone used Rick Viscomi's Trunk8? http://jrvis.com/trunk8/

 

Mark Roden blogged about it some time ago: http://xomino.com/2012/09/06/jquery-in-xpages-15-trunk8-adding-read-more-to-your-paragraphs/

 

I however, cannot get it to work as I am getting the message "Syntax error, unrecognized expression: #[id$='viewPanel1'] tr td:nth-child(6)"

 

I have included the trunk8.js in my webcontent folder and included as a resource on my page.

 

I then run the script at the bottom of my page with the 6th column being the one who's data I want to truncate.

 

<script>
            XSP.addOnLoad(function(){
                $("#[id$='viewPanel1'] tr td:nth-child(6)").trunk8({
                    fill: '<a href="#">&#160;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>        

 

As far as I can tell, there is nothing else I need to do?

 

Could the issue be that I am using jquery 1.11.0 yet this was posted for 1.7.1 and there are compatibility issues?

 

Any pointers much appreciated. OR if anyone has a better way to only show the first 5 lines of a columns data in a view panel, please let me know.

 

Cheers

 

Feb 25, 2015, 1:00 PM
33 Posts
Shooting from the hip....

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

Feb 25, 2015, 6:17 PM
589 Posts
yeah

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.

 

Feb 26, 2015, 4:53 AM
93 Posts
snippet

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>  

Feb 26, 2015, 7:03 AM
589 Posts
hmmm

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!!

 

Feb 26, 2015, 8:06 AM
589 Posts
hmmm

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

 

 

 

 

 

Feb 26, 2015, 8:45 AM
93 Posts
Good spot

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

 

Feb 26, 2015, 11:22 AM
3 Posts
Blog code fail :(

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


:)

Feb 26, 2015, 12:15 PM
93 Posts
:-)

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

Feb 27, 2015, 7:30 AM
93 Posts
2 panels?

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

Mar 5, 2015, 5:32 AM
93 Posts
IE

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?

Mar 5, 2015, 7:55 AM
93 Posts
Resolved

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