Can't sort a list by datasets when actively trying to change dataset values

user_9063947 0
Viewed 48

I'm writing an application in C# with Cefsharp. I'm utilizing C#, JavaScript and HTML/CSS for this project.

I recently posted a question about issues with sorting a list based on the innerHTML text of the said item (the text included the index of the list item) in the list. I received help with this, however the demands changed a bit and I can no longer have the index number in the actual text.

I managed to solve this by using datasets in HTML instead. I was having issues making the list sort but I was sure that it technically should work so I isolated everything in jsfiddle. Everything worked perfectly, so I decided to add a few of the elements in my function at a time.

I found out that the sorting stops working because I'm trying to change the values of my datasets. The actual value of the datasets are succesfully changing, however the sorting stops working for some reason. If I'm NOT trying to change the values of the datasets, it works perfectly. These are the relevant codes:

WinForms function (redacted, executed every 1000ms):

private async void timer1_Tick(object sender, EventArgs e)
{
   foreach (var order in orderResult.OrderResult.Select((value, i) => (value, i)))
   {
        chromeBrowser.ExecuteScriptAsync("updateOrderQueue", order.i, order.value.Reference, order.value.PickedUpAt == "" ? "" : order.value.PickedUpAt,
                            order.value.DeliveredTo == "" ? "" : order.value.DeliveredTo, order.value.RobotId.Length > 0 ? order.value.RobotId.Remove(0, 4) : order.value.RobotId,
                            order.value.StatusCode, status.GetOrderStatus(order.value.StatusCode));
   }
}

JavaScript functions:

function updateOrderQueue(index, reference, pickedup, deliveredto, robotId, statuscode, statustext) {
    var list = $('ul#orderQueueList');
    var count = $("ul#orderQueueList li").length;
    var item = jQuery("#order" + jq(reference));
    var robotQueue = jQuery("#robotQueue" + jq(reference))

    if (!document.getElementById('order' + reference) && statuscode < 4 && count < 9) {
        var data = $(`<li data-indexn="` + index + `" class="list-group-item list-group-item-secondary d-flex justify-content-between align-items-center border border-dark" id="order` + reference + `">
                        <h3 class="mt-1" id="text`+ reference + `">
                            `+ index + `) ` + pickedup + ` ➔ ` + deliveredto + ` (` + statustext + `)
                        </h3>
                        <small class="badge badge-dark rounded" style="font-size:24px;" id="robotQueue`+ reference + `">` + robotId + `</small>
                    </li>`);
        data.appendTo(list).hide().fadeIn(500);
    } else {
        var locations = jQuery("#text" + jq(reference));
        var assignedrobot = jQuery("#robotQueue" + jq(reference));
        locations.text(index + ') ' + pickedup + ' ➔ ' + deliveredto + ' (' + statustext + ')');
        assignedrobot.text(robotId);
    }

    item.attr("data-indexn", index);
    
    sortList();
}

function sortList() {
    $("#orderQueueList li").sort(function (a, b) {
        return parseInt($(a).data('indexn')) - parseInt($(b).data('indexn'));
    }).appendTo('#orderQueueList');
}

When this code is removed from my JavaScript function, everything works as intended:

item.attr("data-indexn", index);

This is the list in the HTML code:

<ul id="robotQueue">
    <li id="order######" data-indexn="0">
       TEXT
    </li>
</ul>

I've tried to isolate as much as I can to try and find what causes it but I can't figure it out. Sorry if the post is a bit long.

Thanks!

cefsharp html jquery javascript c#
1 Answers

Alright, so I'm not sure if this actually counts as an answer or not. According to everything I've been reading, the use of the attr() method should work perfectly fine to set values for datasets (which is what I tried to do). It does succesfully set new values for each item but it also messes with the sorting for some reason, making it not work anymore.

Couldn't find any reason as to why this would not work however I tried setting the values with the data() method instead, example below:

function updateDataset() {
   var item = $("#order");
   item.data("indexn", value); // "data-indexn" in HTML would be only "indexn" here
}

This worked perfectly fine and the code now runs without any issues.

Again, I'm not sure why attr() did not work and there might be a better answer for this question but I'm posting this here in case someone else has a similar problem.

user_90639470
Related