calling jQuery Ajax function fom page onload or script tag

Question

I'm working on an AJAX filter for a custom post type in Wordpress. It's working perfectly fine however I have one thing that I can't get to work. I want to execute the AJAX function from a script tag in the body (or from body onload if that works better), this way I can tell the function which filters to turn on when loading the page.

This is function to load the AJAX

// ajaxLoop.js
jQuery(function($){

var loading = true;
var $window = $(window);
var $content = $("body #filterAanbod");

// ajax inladen, afhankelijk van categorie, onderwijs type en kerndoel. 
function loadActiviteiten(cat, type, doel, populair){
            $.ajax({
                type       : "GET",
                data       : {categorie : cat, type : type, kerndoel : doel, pop: populair},
                dataType   : "html",
                url        : "loopHandler.php",
                beforeSend : function() {
                          $content.fadeOut(100);
                          $content.append(
                            '<img src="images/ajax-loader.gif" />'
                          );  

                   } 
                })
              .done(function(data) {
                        $content.hide();
                        $content.html(data);
                        $content.fadeIn(500, function() { 
                                loading = false;
                                  $("#temp_load").remove();
                                });
                        })
              .fail(function() {   $("#temp_load").remove(); alert("failed miserably"); });


    }

I used a jQuery click function to execute loadActiviteiten(cat, type, doel, populair) for the filter navigation. And that works perfectly fine. However when I want to execute it in the template file, it doesn't do anything.

This is all i did in template.php

<script type="text/javacsript">
$(function() {
  loadActiviteiten();
});
</script>

The idea is to make a custom meta box, where the user can select which filters to turn on current page and that converts to the javascript function ex. loadActiviteiten(term-slug,0,0,0); just loading posts that match the 'term-slug' of the taxonomy 'categorie'.

I really don't understand why it's not executing, can anyone help me?

oo fyi, i'm not getting any errors in my console.

Thanks.

Answer 1

You can do it in this way:

Step 1: first load the jquery library.

Step 2: load you ajaxLoop.js:

<script src="ajaxLoop.js"></script>

ajaxLoop.js

function loadActiviteiten(cat, type, doel, populair){
var loading = true;
var $window = $(window);
var $content = $("body #filterAanbod");

// ajax inladen, afhankelijk van categorie, onderwijs type en kerndoel. 

            $.ajax({
                type       : "GET",
                data       : {categorie : cat, type : type, kerndoel : doel, pop: populair},
                dataType   : "html",
                url        : "loopHandler.php",
                beforeSend : function() {
                          $content.fadeOut(100);
                          $content.append(
                            '<img src="images/ajax-loader.gif" />'
                          );  

                   } 
                })
              .done(function(data) {
                        $content.hide();
                        $content.html(data);
                        $content.fadeIn(500, function() { 
                                loading = false;
                                  $("#temp_load").remove();
                                });
                        })
              .fail(function() {   $("#temp_load").remove(); alert("failed miserably"); });


    }

Step3:

Now your funciton is a global function.

So you can call it like this:

<script type="text/javascript">
jQuery(document).ready(function($){

    loadActiviteiten(cat, type, doel, populair);
});
</script>

Just make sure that your function is called after the loading your ajaxLoop.js file

Answer 2

Easiest way I've found to do this is to add a success: function(result) {} clause to the ajax call. Also, you should call this a different way, to insure the dom is ready for manipulation.

$(document).ready(loadActiviteiten);

Instead of

$(function() {
  loadActiviteiten();
});