Dynamic jQuery AJAX viewer

Jan Hermann — Sep 11, 2014

If you want to use the “Load more” feature on your site, you can take advantage of simple Dynamic viewer web part from this article.

The Dynamic viewer web part uses jQuery AJAX calls to load the content from the source to provide the “Load more” functionality on your pages.

You can simply download this package v8.1 or v10.0.27 and follow the steps below. The web parts in the package are just "proof of concept" implementation and haven't been tested in all scenarios.

Import downloaded package and do not forget to check the Import files (recommended) checkbox and then the Import code files checkbox on Step 2 of the importing process.

Once the package is imported, new two web parts are available (Dynamic viewer and Dynamic viewer source)

The Dynamic viewer source web part is practically a standard Repeater and you can configure it same way using transformations. This web part should be placed on separate new page and as a single web part (due to performance). Please list all items you want to offer for loading in the Dynamic viewer. I suggest to create separate folder for your source pages.

The Dynamic viewer web part can be then placed on any page and this page can contain any number of Dynamic viewer web parts used and they can even load same source. In its configuration, you select the source you want to load the items from and you can configure how many items should be loaded on each click and where it should start.

You may need to style the output of the Dynamic viewer web part. Here are classes it renders:

Example of use:

1) Place standard repeater to your page and configure it to display first 5 items
2) Create a new source page, place the Dynamic viewer source web part on it and let it render all of your news
3a) Place the Dynamic viewer web part below your repeater, link it with the source page and configure the Load size to 5 and the Start index to 1 to skip those already listed 5 items
3b) If you want to load it just by one item, please set the Load size to 1 and Start index to 5 instead
4) If you want to style the “Load more” button, you can take advantage of following style:

.DVLoadMore,.DVNoMoreRecords {
  margin: 0px auto;
  display: block;
  text-align: center;
  clear: both;
}
.DVLoadMore {
	-moz-box-shadow:inset 0px 1px 0px 0px #ffffff;
	-webkit-box-shadow:inset 0px 1px 0px 0px #ffffff;
	box-shadow:inset 0px 1px 0px 0px #ffffff;
	background-color:#ededed;
	-webkit-border-top-left-radius:8px;
	-moz-border-radius-topleft:8px;
	border-top-left-radius:8px;
	-webkit-border-top-right-radius:8px;
	-moz-border-radius-topright:8px;
	border-top-right-radius:8px;
	-webkit-border-bottom-right-radius:8px;
	-moz-border-radius-bottomright:8px;
	border-bottom-right-radius:8px;
	-webkit-border-bottom-left-radius:8px;
	-moz-border-radius-bottomleft:8px;
	border-bottom-left-radius:8px;
	text-indent:-1.15px;
	border:1px solid #dcdcdc;
	color:#777777;
	font-family:Arial;
	font-size:14px;
	font-weight:bold;
	font-style:normal;
	height:32px;
	line-height:32px;
	text-decoration:none;
	text-shadow:1px 1px 0px #ffffff;
}.DVLoadMore:hover {
	background-color:#dfdfdf;
}.DVLoadMore:active {
	position:relative;
	top:1px;
}

Share this article on Twitter Facebook LinkedIn