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

Need help constructing comment feed ajax...

Discussion in 'XenForo Development Discussions' started by Jaxel, Nov 22, 2010.

  1. Jaxel

    Jaxel Well-Known Member

    Kier made his tutorials here: http://xenforo.com/community/threads/xenforo-ajax-tutorial.8091/, but I am more confused than ever. Hopefully someone here can help me out...

    I have a video here... with comments:

    All comments are within a DIV with the id "mediaComments". There is a pagenav at the bottom, with the link to the second page as: http://xen1.8wayrun.com/media/nicovideo-test-video.6/?page=2. Of course, this isn't good for ajax because that page is an entire page, with the comments of page 2. So I have constructed this for the ajax feed: http://xen1.8wayrun.com/media/nicovideo-test-video.6/comments/?page=2. This is of course naturally better because its ONLY the contents of the "mediaComments" DIV as they would be seen.

    So basically, with the AJAX, I need to kill the default links in the pagenav, replace them with the /comments/ links, and then have the ajax replace the contents of the DIV "mediaComments" without reloading the page. I've got it ALMOST working, but I'm having issues...

    On this page... when I click "Next":

    I get the following return:
    XHR finished loading: "http://xen1.8wayrun.com/media/nicovideo-test-video.6/comments/page=2".
    Uncaught TypeError: Cannot set property 'display' of undefined		jquery-1.4.3.min.js:146
    	c.fn.extend.hide						jquery-1.4.3.min.js:146
    	$.fn.extend.xfInsert						xenforo.js:444
    	XenForo.CommentFeedLoader					EWRmedio_ajax.js:19
    	c.extend.handleSuccess						jquery-1.4.3.min.js:141
    	c.extend.ajax.M.w.onreadystatechange				jquery-1.4.3.min.js:140
    As you can see, its properly killing the link, sending it to the correct /comments/ location... but its failing to replace the contents of the DIV...

    This is my EWRmedio_ajax.js
    /** @param {jQuery} $ jQuery Object */
    !function($, window, document, _undefined)
    	XenForo.CommentFeedLoader = function($link)
    			var oriurl = $link.attr('href').split('?');
    			var newurl = oriurl[0] + "comments/" + oriurl[1];
    				function(ajaxData, textStatus)
    					if (ajaxData.templateHtml)
    						$(ajaxData.templateHtml).xfInsert('replaceAll', 'mediaComments')
    	// *********************************************************************
    	XenForo.register('#CommentFeed div.PageNav a[href]', 'XenForo.CommentFeedLoader');
    (jQuery, this, document);
    And this is EWRmedio_MediaComments template...
    <xen:require css="message_simple.css" />
    <xen:if is="{$comments}">
    <ol class="messageSimpleList" id="CommentList">
    	<xen:foreach loop="$comments" value="$comment">
    		<xen:include template="EWRmedio_Bit_Comment" />
    <div class="pageNavLinkGroup" style="padding: 0px;" id="CommentFeed">
    	<div class="linkGroup SelectionCountContainer"></div>
    	<xen:pagenav link="{xen:link 'full:media', $media}" page="{$start}" perpage="{$stop}" total="{$count}" />
    Nasr likes this.
  2. Jaxel

    Jaxel Well-Known Member

    Nevermind... i got it working... should be:
    $(ajaxData.templateHtml).xfInsert('replaceAll', '#mediaComments')
    $(ajaxData.templateHtml).xfInsert('replaceAll', 'mediaComments')

    You can see it working here...

    But I have another question... you will notice that when you click the link to change the page, it removes the existing DIV first, which pushes the browser window up, then loads the new DIV. The problem with this is that its very jarring. Is there a way to make it look more seamless? Maintain the height of the current DIV, until after the new DIV is loaded?
    Nasr likes this.
  3. Jaxel

    Jaxel Well-Known Member

    Got it...

    $(ajaxData.templateHtml).xfInsert('replaceAll', '#mediaComments', 'xfShow');
  4. Floris

    Floris Guest

    Wow, nice job! :)

    Glad to hear you figured it out now. *continues watches video*

Share This Page