ContentLoader not working

[Marcus]

The target of this link should be displayed within the following div. However it does not work, I get redirected to the link.

<a href="{xen:link 'watched/threads'}" class="ContentLoader" data-target="#watchedThreadsInline">{xen:phrase watched_threads}</a>

<div id="watchedThreadsInline"></div>

 

[James]

You're going to have to create the ContentLoader function yourself Marcus, it doesn't exist by default.

 

[Marcus]

Its from the official tutorial about AJAX requests. Its available in the official developer tutorial forum.

 	/**
	 * Allows a link or input to load content via AJAX and insert it into the DOM.
	 * The control element to which this is applied must have href or data-href attributes
	 * and a data-target attribute describing a jQuery selector for the element relative to which
	 * the content will be inserted.
	 *
	 * You may optionally provide a data-method attribute to override the default insertion method
	 * of 'appendTo'.
	 *
	 * 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.
	 *
	 * Upon successful return of AJAX data, the control element will fire a 'ContentLoaded' event,
	 * including ajaxData and textStatus data properties.
	 *
	 * After template content has been inserted, the control element will fire a 'ContentInserted' event
	 * after which the control will be deactivated.
	 *
	 * @param jQuery a.ContentLoader[href][data-target]
	 */
	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 $.fn[method] != 'function')
								{
									method = 'appendTo';
								}

								if (method == 'replaceAll')
								{
									$(ajaxData.templateHtml).xfInsert(method, target, 'show', 0);
								}
								else
								{
									$(ajaxData.templateHtml).xfInsert(method, target);
								}

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

 

[Marcus]

This gives a messy return as the header and footer are included, too. That's why I want to use xenforos method.

<script>
$(document).ready(function() {
$("#watchedThreadsInline").load("{xen:link 'watched/threads'}");
});
</script>

 

[James]

This gives a messy return as the header and footer are included, too. That's why I want to use xenforos method.

<script>
$(document).ready(function() {
$("#watchedThreadsInline").load("{xen:link 'watched/threads'}");
});
</script>

jQuery's .load() function accepts an extra parameter allowing you to include only a specific part of it, see http://api.jquery.com/load

As for your code above, nowhere in that code does it look for a class of ContentLoader - it merely looks for:

var href = $link.attr('href') || $link.data('href'),
                target = $link.data('target');

So, provided you have that in there, it should work.

 

[Marcus]

So, provided you have that in there, it should work.

Yes, I do know. However, it does not work at all. I provided the code to just test it on any template.

<a href="{xen:link 'watched/threads'}" class="ContentLoader" data-target="#watchedThreadsInline">{xen:phrase watched_threads}</a>

<div id="watchedThreadsInline"></div>

Does it work on your installation?

 

[James]

You're probably using the wrong ContentLoader code there, and you've also not registered XenForo.Loader with XenForo.register(); so use this code instead:

 /** @param {jQuery} $ jQuery Object */
!function($, window, document, _undefined)
{
	XenForo.ContentLoader = function($link)
	{
		$link.click(function(e)
		{
			e.preventDefault();

			XenForo.ajax(
				$link.attr('href'),
				{},
				function (ajaxData, textStatus)
				{
					if (ajaxData.templateHtml)
					{
						new XenForo.ExtLoader(ajaxData, function()
						{
							$(ajaxData.templateHtml).xfInsert('appendTo', $link.data('target'));
						});
					}
					else if (ajaxData.colors)
					{
						for (var i = 0; i < ajaxData.colors.length; i++)
						{
							$('<div>')
								.text(ajaxData.colors[i].masterTitle)
								.css({
									backgroundColor: ajaxData.colors[i].property_value,
									width: '100px',
									padding: '5px'
								})
								.xfInsert('appendTo', $link.data('target'));
						}
					}
				}
			);

		});
	}

	// *********************************************************************

	XenForo.register('a.ContentLoader', 'XenForo.ContentLoader');
}
(jQuery, this, document);

from there, you can now use:

<a href="{xen:link your/url}" class="ContentLoader" data-target="#Target">Palette Loader</a>

 

[James]

Source URL, because you may need to tweak it:
http://xenforo.com/community/threads/code-from-have-you-seen-videos.7236/#post-114581

 

[Marcus]

This put in any template should give the result, but it is also not working at all:

<script>
/** @param {jQuery} $ jQuery Object */
!function($, window, document, _undefined)
{
	XenForo.ContentLoader = function($link)
	{
		$link.click(function(e)
		{
			e.preventDefault();

			XenForo.ajax(
				$link.attr('href'),
				{},
				function (ajaxData, textStatus)
				{
					if (ajaxData.templateHtml)
					{
						new XenForo.ExtLoader(ajaxData, function()
						{
							$(ajaxData.templateHtml).xfInsert('appendTo', $link.data('target'));
						});
					}
					else if (ajaxData.colors)
					{
						for (var i = 0; i < ajaxData.colors.length; i++)
						{
							$('<div>')
								.text(ajaxData.colors[i].masterTitle)
								.css({
									backgroundColor: ajaxData.colors[i].property_value,
									width: '100px',
									padding: '5px'
								})
								.xfInsert('appendTo', $link.data('target'));
						}
					}
				}
			);

		});
	}

	// *********************************************************************

	XenForo.register('a.ContentLoader', 'XenForo.ContentLoader');
}
(jQuery, this, document);
</script>

<a href="{xen:link 'watched/threads'}" class="ContentLoader" data-target="#watchedThreadsInline">{xen:phrase watched_threads}</a>

<div id="watchedThreadsInline">
Should be replaced by WatchedThreads
</div>

 

[James]

That code was tailored specifically for the tutorial (colour palette) - you should watch that and see the specific things Kier did, then make them specific for your own purpose.

 

[Marcus]

It works now with the exception, that the template is not rendered. However the script takes the href and target attribute.

xenforo does not want to add ajaxData.templateHtml to the div.

/** @param {jQuery} $ jQuery Object */
!function($, window, document, _undefined)
{
	XenForo.ContentLoader = function($link)
	{
		$link.click(function(e)
		{
			e.preventDefault();
			varaction = $link.attr('href');
			vartarget = $link.data('target');
			$('<li>Action: '+ varaction + '<br />Target: ' + vartarget + '</li>').appendTo($link.data('target'));
	 		XenForo.ajax(
				$link.attr('href'),
				{},
				function(ajaxData,textStatus)
				{
					$('<li>function ajaxData,textStatus is executed</li>').xfInsert('appendTo', $link.data('target'));
//					$(ajaxData.templateHtml).xfInsert('appendTo', $link.data('target'));
					
					new XenForo.ExtLoader(ajaxData, function()
					{
						$('<li>ExtLoader is executed</li>').xfInsert('appendTo', $link.data('target'));
						$(ajaxData.templateHtml).xfInsert('appendTo', $link.data('target'));
					});
				}
			);

		});
	}

	// *********************************************************************

	XenForo.register('a.ContentLoader', 'XenForo.ContentLoader');

}
(jQuery, this, document);

 

[James]

Have you checked if ajaxData exists and has the templateHtml code?

 

[Marcus]

Yes, ajaxData exists, I checked it with

  if (ajaxData.templateHtml)  {$('<li>has templateHtml</li>').xfInsert('appendTo', $link.data('target'));    }

I can even get the title with

$('<li>Title: '+ajaxData.title+'</li>').xfInsert('appendTo', $link.data('target'));

This is the javascript error. [ I uploaded all original xenforo files, this is a brand new install ]

 

[James]

I've just installed this locally and the issue I'm getting is "cannot set property 'display' of undefined".

Looking into it.

 

[Marcus]

This is a xenforo bug:

http://xenforo.com/community/threads/javascript-error-on-xfinsert.36532/

I edited xenforo.js and replaced within the xfInsert function hide() with css('display').('none').

The template is now displayed. But the xenforo indicator for loading content on the top right is not stopping and the same javascript error:

NS_ERROR_XPC_BAD_CONVERT_JS: Could not convert JavaScript argument arg 0 [nsIDOMWindow.getComputedStyle]
...conds();wa=na.getUTCMilliseconds();}na=(pa<=0||pa>=10000?(pa<0?"-":"+")+o(6,pa<0...

 

[James]

This is a xenforo bug:

http://xenforo.com/community/threads/javascript-error-on-xfinsert.36532/

I edited xenforo.js and replaced within the xfInsert function hide() with css('display').('none').

The template is now displayed. But the xenforo indicator for loading content on the top right is not stopping.

It would've been safer to edit your code rather than default XF code:

XenForo.ajax(
$link.attr('href'),
                {},
                function(ajaxData,textStatus)
                {
if(ajaxData.templateHtml)
{
new XenForo.ExtLoader(ajaxData, function()
{
$($link.data('target')).append(ajaxData.templateHtml);
});
}
                }
            );

 

[Marcus]

It works now, big thanks !!