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:
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:
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
And this is EWRmedio_MediaComments template...
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:
Code:
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
Code:
/** @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...
Code:
<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>