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

ContentLoader not working

Discussion in 'XenForo Development Discussions' started by Marcus, Nov 2, 2012.

  1. Marcus

    Marcus Well-Known Member

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

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

    <
    div id="watchedThreadsInline"></div>
     
  2. James

    James Well-Known Member

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

    Marcus Well-Known Member

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

    PHP:
         /**
         * 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(ajaxDatatextStatus)
                    {
                        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(methodtarget'show'0);
                                    }
                                    else
                                    {
                                        $(
    ajaxData.templateHtml).xfInsert(methodtarget);
                                    }

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

    Marcus Well-Known Member

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

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

    James Well-Known Member

    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:
    Code:
    var href = $link.attr('href') || $link.data('href'),
                    target = $link.data('target');
    
    So, provided you have that in there, it should work.
     
    Marcus likes this.
  6. Marcus

    Marcus Well-Known Member

    Yes, I do know. However, it does not work at all. I provided the code to just test it on any template.
    PHP:
    <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?
     
  7. James

    James Well-Known Member

    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:
    Code:
     /** @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:
    HTML:
    <a href="{xen:link your/url}" class="ContentLoader" data-target="#Target">Palette Loader</a>
     
    Marcus likes this.
  8. James

    James Well-Known Member

  9. Marcus

    Marcus Well-Known Member

    This put in any template should give the result, but it is also not working at all:
    PHP:
    <script>
    /** @param {jQuery} $ jQuery Object */
    !function($, windowdocument_undefined)
    {
        
    XenForo.ContentLoader = function($link)
        {
            
    $link.click(function(e)
            {
                
    e.preventDefault();

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

            });
        }

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

        
    XenForo.register('a.ContentLoader''XenForo.ContentLoader');
    }
    (
    jQuerythisdocument);
    </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>
     
  10. James

    James Well-Known Member

    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 likes this.
  11. Marcus

    Marcus Well-Known Member

    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.

    PHP:
    /** @param {jQuery} $ jQuery Object */
    !function($, windowdocument_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');

    }
    (
    jQuerythisdocument);
     

    Attached Files:

  12. James

    James Well-Known Member

    Have you checked if ajaxData exists and has the templateHtml code?
     
    Marcus likes this.
  13. Marcus

    Marcus Well-Known Member

    Yes, ajaxData exists, I checked it with
    PHP:
      if (ajaxData.templateHtml)  {$('<li>has templateHtml</li>').xfInsert('appendTo'$link.data('target'));    }
    I can even get the title with
    PHP:
    $('<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 ]
    error.PNG
     
  14. James

    James Well-Known Member

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

    Looking into it.
     
    Marcus likes this.
  15. Marcus

    Marcus Well-Known Member

    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:
    Code:
    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...  
    
     
  16. James

    James Well-Known Member

    It would've been safer to edit your code rather than default XF code:
    Code:
    XenForo.ajax(
    $link.attr('href'),
                    {},
                    function(ajaxData,textStatus)
                    {
    if(ajaxData.templateHtml)
    {
    new XenForo.ExtLoader(ajaxData, function()
    {
    $($link.data('target')).append(ajaxData.templateHtml);
    });
    }
                    }
                );
    
     
    Marcus likes this.
  17. Marcus

    Marcus Well-Known Member

    It works now, big thanks !!
     

Share This Page