Problem $config->ajax to work with another bit of JS

[humanafterall]

Hi,

I'm experimenting with using AJAX to deliver just a portion of the page, as described here by Ryan.

I've got it working on using this javascript:

$(document).ready(function () {
$("#topnav a").click(function() {
$("#topnav a.alert").removeClass('alert'); // unhighlight selected nav item...
$(this).addClass('alert'); // ...and highlight new nav item
$("#bodycopy").html("");

$.get($(this).attr('href'), function(data) {
$("#bodycopy").hide().html(data).fadeIn(500);
});
return false;
});

}); 

However I've also got a 'load more' button powered by Infinite AJAX Scroll which works fine when you first load the page.

This is the javascript I'm using for the 'load more' button:

var ias = $.ias({
container: "#container",
item: ".item",
pagination: "#pagination",
next: ".next a"
});
    ias.extension(new IASTriggerExtension({
html: '<div class="ias-trigger" style="text-align: center; cursor: pointer;"><a class="button round large alert">{text}</a></div>',
}));
    ias.extension(new IASSpinnerExtension({
}));

The 'load more' button works on the first load of the page, however if you click 'all' (or any of the filter buttons, the back to 'all') it doesn't load the Infinite Ajax Scroll script and just shows the plain ol' text link to /page2/

Could anyone point me at how I might be able to make the Infinite Ajax Scroll 'load more' work when the AJAX controlled buttons are used?

Any help is greatly appreciated!

[3fingers]

Try to put this code inside your $(document).ready() function too

var ias = $.ias({
container: "#container",
item: ".item",
pagination: "#pagination",
next: ".next a"
});
    ias.extension(new IASTriggerExtension({
html: '<div class="ias-trigger" style="text-align: center; cursor: pointer;"><a class="button round large alert">{text}</a></div>',
}));
    ias.extension(new IASSpinnerExtension({
}));

[humanafterall]

Try to put this code inside your $(document).ready() function too

var ias = $.ias({
container: "#container",
item: ".item",
pagination: "#pagination",
next: ".next a"
});
    ias.extension(new IASTriggerExtension({
html: '<div class="ias-trigger" style="text-align: center; cursor: pointer;"><a class="button round large alert">{text}</a></div>',
}));
    ias.extension(new IASSpinnerExtension({
}));

Hi 3fingers, just tried that and getting the same result of just the text link rather than the 'load more' button.

Just thought that the head.inc and foot.inc files doen't get loaded for the AJAX pages on the template file...

<?php if(!$config->ajax) include("./head.inc"); ?>

// template code goes inbetween here //

<?php if(!$config->ajax) include("./foot.inc"); ?>

So I guess adding it to the $(document).ready() function in the head.inc wouldn't make much difference?

Edited April 22, 2014 by humanafterall

[3fingers]

Sorry for the delay, did you solve your problem?

I've noticed yesterday you are using Pw pagination to show all of your projects on the homepage, and I'm wondering if this is somewhat overwriting your ajax load more plugin, coupled with the fact that your script is placed inside head.inc, which seems not to be loaded correctly in this situation.

[humanafterall]

Sorry for the delay, did you solve your problem?

I've noticed yesterday you are using Pw pagination to show all of your projects on the homepage, and I'm wondering if this is somewhat overwriting your ajax load more plugin, coupled with the fact that your script is placed inside head.inc, which seems not to be loaded correctly in this situation.

Nope, still not working :/

The pagination there is necessary to allow /page2/ which is what the load more plugin hooks into and loads.

[humanafterall]

I managed to get this working by hacking the following together...

        $(document).ready(function () {

        $("#topnav .services a").click(function() {
            
            $("#topnav .services a.alert").removeClass('alert'); // unhighlight selected nav item...
            $(this).addClass('alert'); // ...and highlight new nav item
            
            $("#topnav .all a.alert").removeClass('alert');

            $("#bodycopy").html("");
             
            $.get($(this).attr('href'), function(data) {
                $("#bodycopy").hide().html(data).fadeIn(500);
            });
            return false;
        });

            var ias = $.ias({
              container: "#container",
              item: ".item",
              pagination: "#pagination",
              next: ".next a"
            });
            
            ias.extension(new IASTriggerExtension({
            text: 'Load more', html: '<div class="ias-trigger" style="text-align: center; cursor: pointer;"><a class="button round large alert">{text}</a></div>',
            }));
            ias.extension(new IASSpinnerExtension({
            src: 'http://staging.humanafterall.co.uk/v3-vanilla/images/spinner.gif',
            }));

            });

Which references this code...

<ul id='topnav' class='inline-list'>
                    <?php
                
                $homepage = $pages->get("/work/services/");
                $children = $homepage->children;
                
                echo"<li class='all'><a class='button round alert' href='javascript: window.location.reload()'>All</a></li>";
        
                foreach($children as $child) {
                    echo "<li class='services'><a class='button round' href='{$child->url}'>{$child->title}</a></li>";
                }

            ?>
                    </ul>

Basically the click function for the services removes the 'alert' class for the 'all' button. The all button is also a window.location.reload() link so the whole page gets loaded again rather than just using the AJAX, thus making the InfiniteScroll work again. Hacky but it works!