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

PreviewTooltip not working in thread create

Discussion in 'XenForo Development Discussions' started by AndyB, Oct 29, 2014.

  1. AndyB

    AndyB Well-Known Member

    Hello,

    In my new version of Similar Threads, I have the following template code which is working perfectly when viewing a thread:

    Code:
            <xen:foreach loop="$similarThreads" value="$thread">
         
                <tr class="dataRow">
                <td>
                <a href="{xen:link threads/, $thread}"
                class="{xen:if $thread.hasPreview, PreviewTooltip}"
                data-previewUrl="{xen:if $thread.hasPreview, {xen:link threads/preview, $thread}}">{xen:helper wrap, $thread.title, 50}</a>         
                </td>
                <td>{$thread.nodeTitle}</td>
                <td>{xen:datetime $thread.post_date}</td>
                </tr>
         
            </xen:foreach>
    
    However if I use the same code when trying to create a new thread, the Preview Tooltip does not work, when I hover over a thread title link the tooltip does not display. Any ideas why in thread view it works but not in thread create?

    Thank you.
     
    Last edited: Oct 30, 2014
  2. AndyB

    AndyB Well-Known Member

    It occurred to me that one of the main differences between viewing a thread and creating a thread is the Similar Threads add-on is using AJAX to show the similar thread results. So I suspect the PreviewTooltip is not working while creating a thread because the similarthreads.js code is somehow preventing the PreviewTooltip from loading.

    Here are the contents of my similarthreads.js file.

    Code:
    !function($, window, document, _undefined)
    {
        XenForo.similarthreadsId = function($form)
        {
            var typewatch = (function()
            {
                var timer = 0;
                return function(callback, ms)
                {
                    clearTimeout (timer);
                    timer = setTimeout(callback, ms);
                } 
            })();
            $title = $form.find('input[name="title"]');
            $title.keyup(function()
            {
                typewatch(function ()
                {
                    var pathname = $(location).attr('href');
                    var newPathname = pathname.replace('create-thread','similarthreads');
                    XenForo.ajax(
                    newPathname,
                    $form.serializeArray(),
                    function(ajaxData, textStatus)
                    {
                        if (ajaxData.templateHtml)
                        {
                            new XenForo.ExtLoader(ajaxData, function()
                            {
                                $('#similarthreadsId-result').html('<div>' + ajaxData.templateHtml + '</div>');
                            });
                        }
                    });
                }, 500);
            });       
        }   
        XenForo.register('form.Preview', 'XenForo.similarthreadsId');   
    }
    (jQuery, this, document);
    
     
    Last edited: Oct 29, 2014
  3. AndyB

    AndyB Well-Known Member

    In troubleshooting this, I put an alert into js/xenforo/full/xenforo.js file at line 9015.

    Code:
                        if (!XenForo._PreviewTooltipCache[previewUrl])
                        { alert('test');
                            xhr = XenForo.ajax(
                                previewUrl,
                                {},
                                function(ajaxData)
                                {
                                    if (XenForo.hasTemplateHtml(ajaxData))
                                    {
                                        XenForo._PreviewTooltipCache[previewUrl] = ajaxData.templateHtml;
    
                                        $(ajaxData.templateHtml).xfInsert('replaceAll', $tipHtml.find('.PreviewContents'));
                                    }
                                    else
                                    {
                                        $tipHtml.remove();
                                    }
                                },
                                {
                                    type: 'GET',
                                    error: false,
                                    global: false
                                }
                            );
                        }
    
    What I noticed is the PreviewTooltip fires the alert if I hover my mouse on a similar thread title in thread view, but not in thread create. Any ideas why that would be?
     
  4. Milano

    Milano Well-Known Member

    Maybe because of this

    Make sure that class PreviewTooltip has been applied
     
  5. AndyB

    AndyB Well-Known Member

    Hi Milano,

    Thank you for taking the time to look at my code.

    I tried adding to the class "PreviewTooltip" and also tried "previewTooltip" both without success.
     
  6. Milano

    Milano Well-Known Member

    Have you include preview_tooltip template with <xen:include>
     
  7. AndyB

    AndyB Well-Known Member

    Yes I have.

    The PreviewTooltip is working perfectly in thread view, yet the exact same template code will not show the PreviewTooltip in thread create.
     
  8. AndyB

    AndyB Well-Known Member

    This is the template that I call in thread create:

    Code:
    <xen:if is="{$similarThreads}">
    
        <xen:require css="andy_similarthreads.css" />
        <xen:require css="discussion_list.css" />
        <xen:include template="preview_tooltip" />
       
        <div class="discussionList section sectionMain similarThreads">
       
            <dl class="sectionHeaders">
                <dd class="main">
                    <span>{xen:phrase similarthreads_similar_threads}</span>
                </dd>
            </dl>
       
            <ol class="discussionListItems">
                <xen:foreach loop="$similarThreads" value="$thread">
                    <li class="discussionListItem">
                        <div class="listBlock posterAvatar">
                            <span class="avatarContainer">
                                <xen:avatar user="$thread" size="s" img="true" />
                            </span>
                        </div>
                       
                        <div class="listBlock main">
                            <div class="titleText">
                                <h3 class="title">
                                    <a href="{xen:link threads/, $thread}"
                                    class="{xen:if $thread.hasPreview, PreviewTooltip}"
                                    data-previewUrl="{xen:if $thread.hasPreview, {xen:link threads/preview, $thread}}">{xen:helper wrap, $thread.title, 50}</a>
                                </h3>
                                <div class="secondRow">
                                    <div class="posterDate muted">
                                        <xen:username user="$thread" title="{xen:phrase thread_starter}" /><span class="startDate">,
                                        <a href="{xen:link threads, $thread}"><xen:datetime time="$thread.post_date" /></a></span><span class="containerName">, {xen:phrase in_forum}: <a href="{xen:link forums, $thread.forum}">{$thread.nodeTitle}</a></span>
                                    </div>
                                </div>
                            </div>
                        </div>
       
                        <div class="listBlock stats pairsJustified">
                            <dl class="major"><dt>{xen:phrase replies}:</dt> <dd>{xen:number $thread.reply_count}</dd></dl>
                            <dl class="minor"><dt>{xen:phrase views}:</dt> <dd>{xen:number $thread.view_count}</dd></dl>
                        </div>
       
                        <div class="listBlock lastPost">
                            <dl class="lastPostInfo">
                                <dt><xen:username user="$thread.lastPostInfo" /></dt>
                                <dd class="muted"><a href="{xen:link threads, $thread}" class="dateTime"><xen:datetime time="$thread.last_post_date" /></a></dd>
                            </dl>
                        </div>
                    </li>
                </xen:foreach>
            </ol>
        </div>
    
    </xen:if>
    
    <xen:if is="!{$similarThreads}">
    </xen:if>
    
     
  9. AndyB

    AndyB Well-Known Member

    This is an example of the Similar Threads shown with template code shown in post #8.

    Hovering my cursor over any of the five thread titles will not bring up the PreviewTooltip as it should.

    pic001.jpg
     
  10. Milano

    Milano Well-Known Member

    Ahh, beacause your template was loaded via AJAX, so you need to call XenForo.init(); after your template was inserted to the page
     
    AndyB likes this.
  11. AndyB

    AndyB Well-Known Member

    Got it!!!

    I added this to the bottom of my template shown in post #8.

    Code:
    <script type="text/javascript">
    XenForo.init();
    </script>
    
     
  12. AndyB

    AndyB Well-Known Member

    Thank you kindly, Milano for sharing your knowledge with me. I spent all day trying to make this work and without your help I might never have got it.

    What a great feeling when after trying to make it work after hundreds of tries it finally worked. :)
     
    Milano likes this.
  13. Milano

    Milano Well-Known Member

    You're welcome :D
     

Share This Page