Wordpress : list posts from category with AJAX and call plugin on it

Question

I'm currently trying to list all posts from a category in Wordpress. So my category template is just a part of html (ul > li wich go into the loop), and I call them in the front page naively with :

$(document).ready(function(){
    $.ajaxSetup({cache:true});
    $("#listCat a").click(function(){
        var href = $(this).attr("href");
        $("#projectContainer").html("Chargement...");
        $("#projectContainer").load(href,function(){
            $('#slider').jcarousel({
            wrap: 'circular'

                    });
            $('.jcarousel-prev').jcarouselControl({
                target: '-=1'
            });

            $('.jcarousel-next').jcarouselControl({
                target: '+=1'           
            });
        });
        return false;
    });
});

Now, I need to call jcarousel plugin on element that I called with the AJAX thing (as you can see on the code). I thought calling it on a callback function would work, but no. The console logs out :

Uncaught TypeError: Cannot call method 'index' of null

It says this error comes from : jcarousel core plugin : https://github.com/jsor/jcarousel/blob/master/src/core_plugin.js . As if it can't find the children of the #slider element... I tried numerous way to do that (with $.get(), and so on..). Note that the $('#slider').jcarousel(); kinda worked : it adds data-jcarousel="true" attribute to the element.

I guess I'm missing something obvious, I'm not sure I can do it that way but... Any help ?

Since there's no use of the method index in the code you've attached - I assume that the error is in another part of your js code. Consider adding the problematic line & js file that the console outputs next to the error. — Ofir Baruch
Right, sorry. This error comes from the jcarousel plugin file. > github.com/jsor/jcarousel/blob/master/src/core_plugin.js — enguerranws

enguerranws enguerranws · Accepted Answer · 2013-10-25T12:57:45

Ok, a friend look at it and told me to replace my jquery.jcarousel core plugin (from GitHub) with the one that is inside the demo (http://sorgalla.com/projects/jcarousel/lib/jquery.jcarousel.min.js), which is not the same. I also had to remove the calls for the controls (included in the code of the demo).

$(document).ready(function(){
$.ajaxSetup({cache:true});
$("#listCat a").click(function(){
    var href = $(this).attr("href");
    $("#projectContainer").html("Chargement...");
    $("#projectContainer").load(href,function(){
        $('#slider').jcarousel({
        wrap: 'circular'

                });

    });
    return false;
   });
});

Honestly, I really don't know what was wrong...

Wordpress : list posts from category with AJAX and call plugin on it

1 Answers