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

Getting AJAX to process with an AJAX loaded page?

Discussion in 'XenForo Development Discussions' started by Jaxel, Jul 24, 2015.

  1. Jaxel

    Jaxel Well-Known Member

    I am trying to paginate one of my pages... and with this pagination, I want things loaded with AJAX to prevent refreshes. I have the content I want to reload as follows:

    Code:
    <xen:require js="js/8wayrun/EWRtorneo_ajax.js" />
    
    <div class="eventResults">
        <xen:pagenav link="rankings/event" linkdata="{$event}" page="{$start}" perpage="{$stop}" total="{$count}" />
       
        <--- MY CONTENT --->
    </div>
    Then my javascript is pretty simple:

    Code:
    XenForo.register('.eventResults .PageNav a', 'XenForo.ResultSelection');
    
    XenForo.ResultSelection = function($link)
    {
        $link.click(function(e)
        {
            e.preventDefault();
           
            XenForo.ajax(
                $link.attr('href'),
                {},
                function(ajaxData, textStatus)
                {
                    if (XenForo.hasTemplateHtml(ajaxData))
                    {
                        new XenForo.ExtLoader(ajaxData, function()
                        {
                            $(ajaxData.templateHtml).xfInsert('replaceAll', '.eventResults', 'xfShow');
                        });
                    }
                }
            );
        });
    }
    As you can see, all the code does is find the links in the pageNav, prevents their default activation, and replaces the entire contents of the "eventResults" div; which includes the page navigation node as well.

    The problem I am having with this is, after the page navigation node is replaced, subsequent javascript calls for page navigation no longer function. How do I get the javascript to work on the new html?

    You can see this issue here: Final Round XVI | 8WAYRUN.com
     
  2. Jaxel

    Jaxel Well-Known Member

    For an addition... I am doing this in XenMedio using the following codes and its working perfectly fine:

    Code:
    <xen:require css="message_simple.css" />
    <xen:require js="js/8wayrun/EWRmedio_ajax.js" />
    
    <div id="mediaComments">
        <div class="pageNavLinkGroup primaryContent" id="CommentFeed">
            <div class="linkGroup SelectionCountContainer"></div>
            <xen:pagenav link="media/media/comments" linkdata="{$media}" page="{$start}" perpage="{$stop}" total="{$count}" />
        </div>
    
        <---- MY CONTENT ---->
    </div>
    Code:
    XenForo.register('#CommentFeed div.PageNav a[href]', 'XenForo.CommentFeedLoader');
    
    XenForo.CommentFeedLoader = function($link)
    {
        $link.click(function(e)
        {
            e.preventDefault();
    
            XenForo.ajax(
                $link.attr('href'),
                {},
                function(ajaxData, textStatus)
                {
                    if (XenForo.hasTemplateHtml(ajaxData))
                    {
                        new XenForo.ExtLoader(ajaxData, function()
                        {
                            $(ajaxData.templateHtml).xfInsert('replaceAll', '#mediaComments', 'xfShow');
                        });
                    }
                }
            );
        });
    }
    This code is almost exactly the same... yet its working fine. Whats the difference? Why is it working in one, and not the other?
     
  3. Jaxel

    Jaxel Well-Known Member

    Figured it out...

    XenForo.register doesnt seem to work on the outmost div in the new template html. If I put the pagenav container into another nested div, and instead register to that, it works.

    Code:
    XenForo.register('.EventResults .PageNav a', 'XenForo.ResultSelection');
    Code:
    <xen:require css="EWRtorneo.css" />
    <xen:require js="js/8wayrun/EWRtorneo_ajax.js" />
    
    <div class="eventResults_{$event.event_id}" id="eventResults">
        <div class="EventResults">
            <xen:pagenav link="rankings/event" linkdata="{$event}" linkparams="{$linkParams}" page="{$start}" perpage="{$stop}" total="{$count}" />
        </div>
       
        <---- MY CONTENT ---->
    </div>
     

Share This Page