Firstly we should create and store the following into it’s own .js file ready for use.


// ajaxLoop.js
jQuery(function($){
    var page = 1;
    var loading = true;
    var $window = $(window);
    var $content = $("portfolio");
    var load_posts = function(){
           // var sort = $(".sorter select").val();
            $.ajax({
                type       : "GET",
                dataType   : "html",
                url        : "/theme/loopHandler.php?query=" + sort + "", //link to php file
                beforeSend : function(){
                    if(page != 1){
                        $content.append('
\ \
'); } }, success : function(data){ $data = $(data); if($data.length){ $data.hide(); $content.append($data); $data.fadeIn(500, function(){ $("#temp_load").remove(); loading = false; }); } else { $("#temp_load").remove(); } }, error : function(jqXHR, textStatus, errorThrown) { $("#temp_load").remove(); alert(jqXHR + " :: " + textStatus + " :: " + errorThrown); } }); } });

The Ajax call

This is a call to trigger the AJAX call on a button click.


 $( "button#ajaxcall" ).click(function() {
        $('portfolio').empty();
        load_posts();
        //alert('load');        
    });