Need help constructing comment feed ajax...

[Jaxel]

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:
http://xen1.8wayrun.com/media/nicovideo-test-video.6/

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":
http://xen1.8wayrun.com/media/nicovideo-test-video.6/

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)
	{
		$link.click(function(e)
		{
			e.preventDefault();
			var oriurl = $link.attr('href').split('?');
			var newurl = oriurl[0] + "comments/" + oriurl[1];

			XenForo.ajax(
				newurl,
				{},
				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" />
	</xen:foreach>
</ol>
</xen:if>

<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}" />
</div>

 

[Jaxel]

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

You can see it working here...
http://xen1.8wayrun.com/media/nicovideo-test-video.6/

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?

 

[Jaxel]

Got it...

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

 

[Floris]

Wow, nice job!

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