1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.

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

Discussion in 'XenForo Development Discussions' started by Brett Peters, May 22, 2011.

  1. Brett Peters

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

    Kier XenForo Developer Staff Member

    XenForo has a system in JavaScript called XenForo.Loader that does exactly this.
     
    Onimua and Brett Peters like this.
  3. Brett Peters

    Brett Peters Well-Known Member

    Thanks Kier, Without depriving you of your precious time is their somewhere you could point me to become more familiar with XenForo.Loader ?
     
  4. Kier

    Kier XenForo Developer Staff Member

    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.
     
    Onimua, James and Brett Peters like this.
  5. Brett Peters

    Brett Peters Well-Known Member

    Kier that is not only awesome, but... no it is just awesome :D (y) :D
     
    Mike Law and addaco like this.
  6. Digital Doctor

    Digital Doctor Well-Known Member

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

    Brett Peters Well-Known Member

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

    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.
     
  8. Digital Doctor

    Digital Doctor Well-Known Member

    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 . :)
     
  9. Brett Peters

    Brett Peters Well-Known Member

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

    Kier XenForo Developer Staff Member

    IIRC, you can put the 'load more' link within the data-target container, and specify data-method="replaceAll" and you'll be good to go.
     
    Onimua and (deleted member) like this.
  11. ragtek

    ragtek Guest

    Cool.
    Didn't know that:)
     
    Kier likes this.
  12. ragtek

    ragtek Guest

    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;)
     
  13. Brett Peters

    Brett Peters Well-Known Member

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

    James Well-Known Member

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

    Kier XenForo Developer Staff Member

    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.png
     
  16. James

    James Well-Known Member

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

    Wuebit Well-Known Member

    This is cool :D watching this thread as this could be used in so many Awesome ways
     
    thewizard and Digital Doctor like this.
  18. Kier

    Kier XenForo Developer Staff Member

    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.
     
    Brett Peters, James and Vodkaholic like this.
  19. Mike Law

    Mike Law Active Member

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

    ragtek Guest

    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.
     
    Brett Peters likes this.

Share This Page