Sorting Images from a array

Question

User-1121540557 posted

Hi,

I'm trying to sort images from a array true a AJAX post.

The problem is that the images are not loaded on my form. here is my code.

$(document).ready(function () {
    var folder = "images/";

    $.ajax({
        url: folder,
        success: function (data) {
            $(data).find("a").attr("href", function (i, val) {
                var imgToSort = new Array();
                imgToSort = val.match(/(\d+)/g);
                var imgSorted = imgToSort.slice().sort();
                var ic = 0;
                for (ic = 0; ic < imgSorted.length; ic++) {
                    if (imgSorted[ic].match(/\.(jpe?g|png|gif)$/)) {
                        $("#Section1").append("<div class='center-block'> <img src='" + folder + imgSorted[ic] + "'></div>");
                    }
                }
//This was my old code, and that worked(This was placed outside the for statement...WHAT I'M I DOING WRONG????
                //if (val.match(/\.(jpe?g|png|gif)$/)) {
                //    $("#Section1").append("<div class='center-block'> <img src='" + folder + val + "'></div>");
                //}
            })
        },
        statusCode: {
            404: function () {
                alert("404 page not found");
            },
            403: function () {
                alert("403 access denied");
            }
        }
    });
});

Hope somebody can tell me what I'm doing wrong?

Best regards,

Mark

Answer 1

User-1121540557 posted

Nevermind I made a mistake by trying to do the sorting in the ajax call.

Solution is to declare a array outside the AJAX call and add val to the array.

Something like this:

$(document).ready(function () {
    var folder = "images/";
    var imgToSort = new Array();
    var activeAjaxConnections = 0;
    var j = 0;
    var k = 0;
    $.ajax({
        beforeSend: function(x){
            activeAjaxConnections++;
        },
        url: folder,
        success: function (data) {
            $(data).find("a").attr("href", function (i, val) {
                if (val.match(/\.(jpe?g|png|gif)$/)) {
                    imgToSort.push(val);
                    j++;

                }
            })
            activeAjaxConnections--;
            if (0 == activeAjaxConnections) {
                sortImages();
            }
        },
        error: function(x, errDesc, exception){
            activeAjaxConnections--;
            if (0 == activeAjaxConnections) {
                sortImages();
            }
        },
        statusCode: {
            404: function () {
                alert("404 page not found");
            },
            403: function () {
                alert("403 access denied");
            }
        }
    });
    function sortImages() {
        imgToSort.sort();
        $.each(imgToSort, function (i, val) {
            $("#Section1").append("<div class='center-block'> <img src='" + folder + val + "'></div>");
        });
    }
});

Answer 2

User-1121540557 posted

Oke figured it out.

Here is my code. If anybody has some sugestions/improfements, feel free to correct me!

$(document).ready(function () {
    var folder = "images/";
    var imgToSort = new Array();
    var activeAjaxConnections = 0;
    var j = 0;
    var k = 0;
    $.ajax({
        beforeSend: function(x){
            activeAjaxConnections++;
        },
        url: folder,
        success: function (data) {
            $(data).find("a").attr("href", function (i, val) {
                if (val.match(/\.(jpe?g|png|gif)$/)) {
                    imgToSort.push(val);
                    j++;

                }
            })
            activeAjaxConnections--;
            if (0 == activeAjaxConnections) {
                sortImages();
            }
        },
        error: function(x, errDesc, exception){
            activeAjaxConnections--;
            if (0 == activeAjaxConnections) {
                sortImages();
            }
        },
        statusCode: {
            404: function () {
                alert("404 page not found");
            },
            403: function () {
                alert("403 access denied");
            }
        }
    });
    function sortImages() {
        imgToSort.sort();
        $.each(imgToSort, function (i, val) {
            $("#Section1").append("<div class='center-block'> <img src='" + folder + val + "'></div>");
        });
    }
});

Best regards,

Mark