Home/ Questions/Q 8796669
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-13T23:40:34+00:00

I am currently trying to sort a range of dynamic dates using jQuery but

  • 0

I am currently trying to sort a range of dynamic dates using jQuery but my code doesn’t seem to be working. I don’t understand what I’m doing wrong. It seems to be working well here http://jsfiddle.net/Erah9/10/ (using sample HTML and not PHP) but not when I use the code below. This is what I’ve done so far:

Arrays

$status = array("Allocated","Declined","Failed","Pending");
$day = array("1 - Mon","2 - Tue","3 - Wed","4 - Thu","5 - Fri");
$moduleCode = array("XXX101","XX107","XXX122","XXX123","XXX124","XXX201");
$room = array("X110","XX011","X020","XX012","XX013","X001", "X201");
$period = array("1 - 09:00","2 - 10:00","3 - 11:00","4 - 12:00","5 - 13:00");

PHP

<div style="padding-top: 20px;">
  <input class="btn" type="button" value="Oldest First" id="sortAsc"/>
  <input class="btn" type="button" value="Newest First" id="sortDesc"/>
</div>
<div id="wrapper" style="padding-top: 10px">
        <ul>
        <?php
        $dateStart = new DateTime();
        $dateStart->setDate(2012, 10, 01);
        $dateEnd = new DateTime();
        $dateEnd->setDate(2012, 12, 01);

        $dates = array();
        while ( $dateStart < $dateEnd ) {
        $status_txt = $status[array_rand($status)];
        $room_txt = $room[array_rand($room)];
        $moduleCode_txt = $moduleCode[array_rand($moduleCode)];
        $day_txt = $day[array_rand($day)];
        $period_txt = $period[array_rand($period)];

        printf(
        "<li class='item'><div class='activity_date'>%s</div>
        <div class='activity_box'>
        <div class='activity_text' id='act'>" . $status_txt . ' request for room 
        '.$room_txt.' made by department CO for module '.$moduleCode_txt.' on
        '.substr($day_txt,3, 4).' '.substr($period_txt,3,6).'</div>
        </div></li>',
        $dateStart->format("d/m/Y")
        );

        $dateStart->modify(sprintf("+%d day",mt_rand(1, 10)));
        }
        ?>
        </ul>
        </div>

JS

$(window).load(function() {
    var itemsArray = $.makeArray($("li.item"));
    itemsArray.sort(function(a,b){
        var aTime = new Date(parseDate($(a).find('.activity_date').text())).getTime();
        var bTime = new Date(parseDate($(b).find('.activity_date').text())).getTime();
        return bTime - aTime;
    });

    $('#sortAsc').click(function(){
        $("#wrapper").empty().append("<ul></ul>");
        $(itemsArray).each(function(){
            $("#wrapper ul").prepend($(this));
        });
    });

    $('#sortDesc').click(function(){
        $("#wrapper").empty().append("<ul></ul>");
        $(itemsArray).each(function(){
            $("#wrapper ul").append($(this));
        });
    });        
});

function parseDate(input) {
    var parts = input.match(/(\d+)/g);
    var date = new Date(parts[2], parts[1], parts[0], 0, 0, 0);
    return date;
}

​

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Can we see some content for arrays $status,$room etc.

    Re-creating your PHP (updated, see comment below) and it operates correctly for me.

        <!DOCTYPE HTML>
    <html lang="en-US">
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script type="text/javascript" src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
    <script type="text/javascript">
    $(window).load(function() {
        var itemsArray = $.makeArray($("li.item"));
        itemsArray.sort(function(a,b){
            var aTime = new Date(parseDate($(a).find('.activity_date').text())).getTime();
            var bTime = new Date(parseDate($(b).find('.activity_date').text())).getTime();
            return bTime - aTime;
        });

        $('#sortAsc').click(function(){
            $("#wrapper").empty().append("<ul></ul>");
            $(itemsArray).each(function(){
                $("#wrapper ul").prepend($(this));
            });
        });

        $('#sortDesc').click(function(){
            $("#wrapper").empty().append("<ul></ul>");
            $(itemsArray).each(function(){
                $("#wrapper ul").append($(this));
            });
        });        
    });


    function parseDate(input) {
        var parts = input.match(/(\d+)/g);
        var date = new Date(parts[2], parts[1], parts[0], 0, 0, 0);
        return date;
    }    
    </script>
        </head>
    <body>
        <div style="padding-top: 20px;">
      <input class="btn" type="button" value="Oldest First" id="sortAsc"/>
      <input class="btn" type="button" value="Newest First" id="sortDesc"/>
    </div>
    <div id="wrapper" style="padding-top: 10px">
            <ul>
            <?php

            $status = array("Allocated","Declined","Failed","Pending");
    $day = array("1 - Mon","2 - Tue","3 - Wed","4 - Thu","5 - Fri");
    $moduleCode = array("XXX101","XX107","XXX122","XXX123","XXX124","XXX201");
    $room = array("X110","XX011","X020","XX012","XX013","X001", "X201");
    $period = array("1 - 09:00","2 - 10:00","3 - 11:00","4 - 12:00","5 - 13:00");



            $dateStart = new DateTime();
            $dateStart->setDate(2012, 10, 01);
            $dateEnd = new DateTime();
            $dateEnd->setDate(2012, 12, 01);

            $dates = array();
            while ( $dateStart < $dateEnd ) {
    $status_txt = $status[array_rand($status)];
            $room_txt = $room[array_rand($room)];
            $moduleCode_txt = $moduleCode[array_rand($moduleCode)];
            $day_txt = $day[array_rand($day)];
            $period_txt = $period[array_rand($period)];

            printf(
            "<li class='item'><div class='activity_date'>%s</div>
            <div class='activity_box'>
            <div class='activity_text' id='act'>" . $status_txt . ' request for room 
            '.$room_txt.' made by department CO for module '.$moduleCode_txt.' on
            '.substr($day_txt,3, 4).' '.substr($period_txt,3,6).'</div>
            </div></li>',
            $dateStart->format("d/m/Y")
            );

            $dateStart->modify(sprintf("+%d day",mt_rand(1, 10)));
            }
            ?>
            </ul>
            </div>
    </body>
    </html>
    • 0