jQuery in XPages #15 – Trunk8 (Adding “read more” to your paragraphs)

In this article I will describe how to implement and use the jQuery plugin Trunk8. “trunk8 is an intelligent text truncation extension to jQuery. When applied to a large block of text, trunk8 will cut off just enough text to prevent it from spilling over.”

Demonstration

The XPages integration of Trunk8.js is demonstrated here

Download

The demonstration database can be downloaded from the link above or from here

Trunk8.js

Introduction

Trunk8 is a really neat and simple jQuery plugin which can neaten up your XPages and provide a truncated paragraph of text and can turn large sections of text into something a little more manageable and easier on the eye:

Trunk8 your paragraphs
Trunk8 your paragraphs

How does it work

We add the jQuery library and the trunk8.js library file to the database by adding them to the Web-Contents folder accessible via the package explorer.  (Window–>Show Eclipse Views–>Package Explorer) and drag and drop the two libraries from your computer into the “js” folder.

We add the libraries to our XPages like this in the source panel

<script type='text/javascript' src='/xomino/jQinX.nsf/jquery-1.7.1.min.js'></script>
<script type='text/javascript' src='/xomino/jQinX.nsf/js/trunk8.js'></script>

The trunk8.js plugin comes with a number of parameters which can help control how the plugin interacts with your page and how it displays the resulting trunk8ed text.

settings = {
    fill: '<a href='#'> read more </a>',  //this is what is inserted into the text as placeholder
    lines: 1, //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.
}

We then apply the plugin to the page via a selector. In this example is I am going use the same viewPanel as, and this can be seen as an alternate to my original blog post regarding Dynamically expanding viewPanel rows.

We are going to select the 4th column in the viewPanel1 table

selecting the 4th column in the table
selecting the 4th column in the table

the jQuery selector for this is shown below – we select the viewPanel1 table by id an within that table we select the TR table rows and then within those the 4th TD table cell (i.e. the 4th column)

	$('[id$='viewPanel1'] tr td:nth-child(4)')

and then to that we apply the trunk8 method and its parameters

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

And we get the following – much neater and easier on the user

Trunk8'd viewPanel column
Trunk8’d viewPanel column

Flexible

The parameters are fairly self explanatory and allow you to control the way the output looks. What I like about this plugin over others of a similar vein is that the width is dynamically calculated correctly and always fills the container. With a little more imagination you could have the “read more” link to a better tooltip or even click to open a dialog – because you can insert your own HTML the choice is yours – love it!

Conclusion

Every time I see a new plugin like this it just re-enforces to my why I evangelize using jQuery in XPages so much. It took me less than 10 minutes to implement the demonstration and took longer to write up this article. This is a real business requirement which is met with no effort at all on the part of the XPage developer. It’s a no brainer!

Demonstration

The XPages integration of Trunk8.js is demonstrated here

19 thoughts on “jQuery in XPages #15 – Trunk8 (Adding “read more” to your paragraphs)

  1. Hello Mark,

    Trying to figure out trunk8. I got an error and dont know what I am missing.

    Error is : Line: 2 Error: Syntax error, unrecognized expression: #[id$=’viewPanel1′] tr :nth-child(9)

    I used jquery1.8 and just included trunk8.js file also block. but got an error on load.

    Do you have any idea or is there any dependent file to include on xpage.

    • Hey Ferhat 🙂

      Two things I noticed with your error: 1) you need to use $ and not # at the start of the jQuery expression (this is not XPage SSJS) and 2) you are selecting the 9th row (incorrectly) and need to change tr :nth to be tr td:nth.

      I hope that helps – Ping me on twitter if you need more help 🙂

  2. Mark, I felt myself like an idiot 🙂 Thanks 🙂

    Internet Explorer (using IE8) shows the error message like that 🙂 Click on it and you will see what I see (http://www.bestcoder.net/wp-content/uploads/2012/09/TrunkError.png)

    I didnt understand first line of code. What is the format of this line ? I also looked http://jrvis.com/trunk8/ but element id is killer on Xpage. (id1:….)

    Actual codes and error messages (I tried with tag also.)

    <![CDATA[XSP.addOnLoad( function() {
    $("#[id$='viewPanel1'] tr td:nth-child(4)").trunk8({
    fill : ' read more ‘,
    lines : 1,
    side : ‘right’,
    tooltip : true,
    width : ‘auto’
    });
    });]]>

    Syntax error, unrecognized expression: #[id$=’viewPanel1′] tr :nth-child(4) jquery-1.8.0.min.js, line 2 character 56618
    Object doesn’t support this property or method xspViewDuyuruGenel.xsp, line 383 character 3

  3. Hello Mark,

    This may be of use…I had unwanted markup (span tags) in the tooltip and also could not get this to work in ie9…so…

    Using jq 1.7.1 and trunk8 1.3.2

    Got this working in IE9 by doing this…$(“#[id$=’viewPanel1′] tr td:nth-child(4) span”)
    The addition of the ‘span’ got rid of the markup, it now plays nicely in ie9 and the lines param also palys nice in FF and IE9.

    Thanks for the great demo of this plug-in you did on Ni9.

    regards,
    Alan

  4. hello Mark

    I wonder how to integrate the plugin with a dataView instead of a viewPanel. I need to apply the plugin to the content of a computed field in the detail of the dataView. Any help very much appreciated

    regards

    Stephane

    • Stephane – I have not tried it with a dataView (I don’t use them) but I think the greatest issue you will have is reapplying the plugin after every partial refresh. You can create a selector to replace the one I use in the example above to get all data grid tables and the column you are looking for. But if you expand/collapse a category or use paging the new data will not have the plugin applied. I suggest looking for an onComplete event which you can key into on the data grid and see if you can apply it there.

      Hope that is of some help – Mark

  5. Hi Mark,thanks for your articles and amazing examples, I’m new guy to xpages and jquery, I have to say ur examples really save my time to study it…then I have some questions about the demo db and examples,

    well, first, i need say your db style is great, I do like it…

    then…I just need the some features from your db, sorry for that, anyway, I tried to create brand new xpages in your db to test, and I find interesting things, that I have to add these code in it

    otherwise,I CAN’T SEE any changes…

    for example, I have to use these in the brand new xpages:

    then my question why I can’t use these?

    the 2nd is why I can’t use “jquery-1.7.1.min.js” directly, cause if I change it, there have no any effects either…

    and the 3rd one is to this example, I find this trunk8 only works on chrome but not explorer….have no idea?

    thanks angin for your amazing work, appreciate it~

    Sean

    • OH…no…the code disappeared。。。I need change

      Hi Mark,thanks for your articles and amazing examples, I’m new guy to xpages and jquery, I have to say ur examples really save my time to study it…then I have some questions about the demo db and examples,well, first, i need say your db style is great, I do like it…then…I just need the some features from your db, sorry for that, anyway, I tried to create brand new xpages in your db to test, and I find interesting things, that I have to add these code in it

      /*
      //////
      ///////
      ////////
      ////////
      ////////
      ////////
      */

      otherwise,I CAN’T SEE any changes…

      for example, I have to use these in the brand new xpages:

      /*
      ////////
      ////////
      ////////
      ////////
      ////////
      ////////
      ////////
      ////////
      ////////
      */

      then my question why I can’t use these?

      /*
      ////////
      ////////
      ////////
      ////////
      */

      the 2nd is why I can’t use “jquery-1.7.1.min.js” directly, cause if I change it, there have no any effects either…

      and the 3rd one is to this example, I find this trunk8 only works on chrome but not explorer….have no idea?

      thanks angin for your amazing work, appreciate it~

      Sean

    • ….sorry I DON’T KNOW IT CANT’S PASTE CODE HERE, CAN I SEND MAIL TO YOU?

      this is the last time i try to paste code here… = = hope works

      /*
      headTag tagName=”script”
      this.attributes
      xp:parameter name=”type” value=”text/javascript” /
      xp:parameter name=”src” value=”js/jquery-1.7.1.min.js” /
      xp:this.attributes
      xp:headTag
      */

      otherwise,I CAN’T SEE any changes…

      for example, I have to use these in the brand new xpages:

      /*
      xp:this.resources
      xp:headTag tagName=”script”
      xp:this.attributes
      xp:parameter name=”type” value=”text/javascript” /
      xp:parameter name=”src” value=”js/jquery-1.7.1.min.js”
      xp:this.attributes
      xp:headTag
      xp:script src=”js/trunk8.js” clientSide=”true” xp:script
      xp:this.resources
      */

      then my question why I can’t use these?

      /*
      xp:this.resources
      xp:script src=”js/jquery-1.7.1.min.js” clientSide=”true” xp:script
      xp:script src=”js/trunk8.js” clientSide=”true” xp:script
      xp:this.resources
      */

      the 2nd is why I can’t use “jquery-1.7.1.min.js” directly, cause if I change it, there have no any effects either…

      and the 3rd one is to this example, I find this trunk8 only works on chrome but not explorer….have no idea?

      thanks angin for your amazing work, appreciate it~

      Sean

      • Sean – thank you for your kind comments, I am glad you like the database and examples.

        The reason you cannot use it is a straight resource is because dojo interferes with the loading of the trunk8 code. It has been mentioned a number of times in the XPages community – the solution is described here by Sven – http://hasselba.ch/blog/?p=1181. Ferry posted an alternate solution here in the XSnippets – http://openntf.org/xsnippets.nsf/snippet.xsp?id=hack-to-use-jquery-amd-widgets-and-dojo-together – in his example he uses select2, replace that for the jquery and trunk8 script codes and it should work for you.

        Let me know if that helps (and if I have understood your question properly) – I have your email address from the comment so if need be I can contact you directly.

      • Hi marky
        I’m using ie11, and there have no warn to turn on the “compatibility mode”, the strange thing is when I just refresh the page, it did appeared 1 second…mabye, then the 4th column disappeared, it’s blank~ but when I put my mouse on it, it still can load the contents…but it’s no problem in chrome and safari (on iphone)

        and the other question is why I can’t use the newest version of jquery? should I use the 1.7.1 as my first choose?

      • The default for the db is that version of jquery – I suggest you check out the trunk8 site itself and see which version he supports 🙂

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s