locked
Sorting Images from a array RRS feed

  • 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

    Thursday, March 29, 2018 9:36 AM

Answers

  • 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>");
            });
        }
    });

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Thursday, March 29, 2018 12:07 PM
  • 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

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Thursday, March 29, 2018 1:09 PM

All replies

  • 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>");
            });
        }
    });

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Thursday, March 29, 2018 12:07 PM
  • 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

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Thursday, March 29, 2018 1:09 PM