gallery_script.js

function renderGrid(gallery) {
    // helper function to loop through all gallery items and output HTML
    var cell = "";
    for (var i = 0; i < gallery.length; i++) {
        cell += "<li>";
        cell += "  <img src='/images/" + gallery[i].id + ".jpg' />";
        cell += "  <b>" + gallery[i].size + "</b>" + gallery[i].occasion;
        cell += "</li>";
		
	// append this cake to the gallery
        jQuery(".galleryGrid").append(cell);
        cell = "";
    }
	
    // once all HTML is in the page, use jQuery to fade it in
    jQuery(".galleryGrid").fadeIn();
}

function updateGallery() {

    // get the nonce from the form to pass along with the request, along with other input params
    var my_gallery_nonce = $("#galleryForm").attr("data-nonce");
    var occasion = $("#occasion").val();
    var size = $("#size").val();
    var color = $("#color").val();
    var query_text = $("#query_text").val();

    // fade out the gallery that's already there while the request is being made
    jQuery(".galleryGrid").fadeOut("fast", function() {
        jQuery(".galleryGrid").html("").hide();
        $.ajax({
            type : "post",
            dataType : "json",
            url : my_ajax_script.ajaxurl,
            data : { action: "get_gallery_data",
		occasion_id : occasion,
		query_text: query_text,
		size_id: size,
		primary_color: color,
		nonce : my_gallery_nonce
	    },
	    success: function(response) {
		if(response.type === "success") {
			// call render grid to parse the results
			renderGrid(response.data);
		}
            }
        });
    });
}

$(function() {

    // handle changes in gallery filters
    $(".gallerySelector").change(function() {
        updateGallery();
    });

    // form submit should not submit
    $('#galleryForm').submit(function(e) {
        e.preventDefault(); // to stop the form from submitting
    });

    if ($("body").hasClass("page-template-template_gallery-php")) {
        // we're on the gallery page, initial click to show results
        updateGallery();

        // click handler
        $(".updateGallery").click(function() {
            updateGallery();
        });

    } // end gallery page
});