Possible for pages to have "Load More" like FB/Twitter ?

Brett Peters

Well-known member
I am just in the process of getting together some pages and I can see that in the near future I will be running into a problem with pages taking too long to load because of how long they are, I am thinking it is a good idea to use something simular to the load more (twitter, facebook, google images) to display content instead of using pagination. (I have too much of this already)

This is something that I am currently researching but seem to hit wall after wall when I try to find out how to load more <div class="">.... and the fact that I am a total Noob

Is it possible ?
Is anyone trying something simular ?
Thoughts ?
 
I suspect that there are various add-ons using it that could give you concrete examples, but XenForo itself does not use it (yet) - I provided it as a service for add-on authors.

To use it, you would do something like this:

HTML:
<a href="{xen:link foobar/load-something}" class="Loader" data-target="#myContainer">Click me...</a>
<div id="myContainer"></div>

Then you would have a XenForo_ControllerPublic that responds to foobar/load-something and returns a template, the contents of which will be loaded into the myContainer div when it loads.
 
I am just in the process of getting together some pages and I can see that in the near future I will be running into a problem with pages taking too long to load because of how long they are, I am thinking it is a good idea to use something simular to the load more (twitter, facebook, google images) to display content instead of using pagination. (I have too much of this already)
Do you mean when I click "what's new" ... The content starts loading item by item vs. waiting for the entire page to be ready ... and then display ?

That would be great for search !
Might even save "expensive" (CPU, bandwidth) search queries .... as maybe if someone clicks on an item that has shown up ... the search could be curtailed.
 
Basically I am going to implement this for "pages" that are too long to load all at once but I wish for all the content to be accessible NOW (on one page)
To give you an idea please see the test example image below (once you click "load more" it does exactly that)

Screen shot 2011-05-23 at 12.43.39 AM.webp

Currently I am seeking a way to hide "Click me..." once more info has been loaded (from Kiers code), Then I should be happy with the end result.
 
So this is for "Xenforo Pages" .. not really relating to the Forum per se.
Can't you just make the Pages shorter yourself if you have to ?

I guess what you want is for something to come up IMMEDIATELY, but if the user waits ... the whole list will appear. Definitely a good idea.
I love it when pages do that . :)
 
So this is for "Xenforo Pages" .. not really relating to the Forum per se.
Can't you just make the Pages shorter yourself if you have to ?

I guess what you want is for something to come up IMMEDIATELY, but if the user waits ... the whole list will appear. Definitely a good idea.
I love it when pages do that . :)

I could make the pages shorter but then then they would be split up over many pages which gets very frustrating to navigate, I already have navigation from A-Z and if I was to include shorter pages I would have A-Z which each then would have A-01, A-02, A-03, A-04, A-05 and so on. Having this option means it is both less cluttered regarding navigation and users are not forced to load a ridiculously long page, As far as I can tell it is a win win situation.
 
That's why it's "important" to have a developer docu:p
It saves time & you learn the small gadgets^^

On the other side, people(developers) learn the stuff much better, if they study the code, but i don't have the time to make a complete code review to see how everything is working^^
Specially for JavaScripts because i don't understand it;)
 
I don't suppose I could have an example ?

I really dont want to be spoon fed but after spending hours I was unable to get the link to remove/hide when clicked, Obviously I am doing it wrong.
 
Brett, have you checked the JS console:
Code:
XenForo.Loader
function ($link)
	{
		var clickHandler = function(e)
		{
			var href = $link.attr('href') || $link.data('href'),
				target = $link.data('target');

			if (href && $(target).length)
			{
				e.preventDefault();

				XenForo.ajax(href, {}, function(ajaxData, textStatus)
				{
					if (XenForo.hasResponseError(ajaxData))
					{
						return false;
					}

					var insertEvent = new $.Event('ContentLoaded');
						insertEvent.ajaxData = ajaxData;
						insertEvent.textStatus = textStatus;

					$link.trigger(insertEvent);

					if (!insertEvent.isDefaultPrevented())
					{
						if (ajaxData.templateHtml)
						{
							new XenForo.ExtLoader(ajaxData, function()
							{
								var method = $link.data('method');

								if (typeof method != 'function')
								{
									method = 'appendTo';
								}

								$(ajaxData.templateHtml).xfInsert(method, target);

								if ($link.data('unlink') !== false)
								{
									$link.removeAttr('href').removeData('href').unbind('click', clickHandler);
								}
							});
						}
					}
				});
			}
		};

		$link.bind('click', clickHandler);
	}

I display that as a last resort, as you requested not to be spoon fed :D

I have no idea of the actual method, but I will attempt to debug the JS.
 
I've discovered a minor bug in XenForo.Loader() that will be fixed with 1.0.2 that has meant that specifying data-method has not worked in XenForo 1.0.x to date (it was already fixed in 1.1.x).

Screen shot 2011-05-23 at 13.17.10.webp
 
I've discovered a minor bug in XenForo.Loader() that will be fixed with 1.0.2 that has meant that specifying data-method has not worked in XenForo 1.0.x to date (it was already fixed in 1.1.x).
So when the bug is fixed, how do we go about using the method? is data-method meant to be specified like so, with the load more link inside #myContainer?
Code:
<a href="{xen:link foobar/load-something}" class="Loader" data-target="#myContainer" data-method="replaceAll">Click me...</a>
<div id="myContainer">
<a href="load/more">Load More</a>
</div>
 
Here's an example of me using it in the Resource Manager:
HTML:
<li class="primaryContent blog" id="blog-{$blog.resource_blog_id}">
	<div class="messageText ugc baseHtml">{xen:raw $blog.messageHtml}</div>
	
	<div class="blogMeta">
		<xen:if is="{$blog.message_trimmed}">
			<a href="{xen:link resources/view-blog, $resource, 'resource_blog_id={$blog.resource_blog_id}'}"
				class="item control Loader"
				data-target="#blog-{$blog.resource_blog_id}"
				data-method="replaceAll"><span></span>... Read More</a>
		</xen:if>
	</div>
</li>
Note that you need to either wait for 1.0.2 to be released, or to apply the fix to xenforo.js that I posted above in order for this to work.
 
How would this be used in the forums, say I want to show only the first 10 lines of each posts, with the "read more" option to see the whole post.
 
wow
i love this feature:)

if anybody else have problems because the link gets unlinked (check the documentation :) ):
Code:
* By default, the control will be unlinked and have its click event unbound after a single use.
     * Specify data-unlink="false" to prevent this default behaviour.
 
Back
Top Bottom