Listbox drag drop not working on production server

[RobWarningParticipant]

Hi,
I have the strange behavior that the listbox drag drop function works ok on my development machine in Visual studio 2019. (ASP NET CORE 2.2 application) But when I Publish on the production server I can not drag the items.
I need this Drag-Drop to sort the items in the usersList listbox.

this is my js code:

$(function () {

    $('#departmentDropDown').jqxDropDownList({
        source: Departments,
        displayMember: 'text',
        valueMember: 'value',
        placeHolder: 'Select a departement!',
        width: 250,
        height: 30
    });

    $('#UsersList').jqxListBox({
        source: Users,
        displayMember: 'text',
        valueMember: 'value',
        height: 300,
        width: 250,
        allowDrop: true,
        allowDrag: true
    });

    $('#departmentDropDown').on('change', function (event) {
        var args = event.args;
        if (args) {
            var item = args.item;
            var value = item.value;
            $.ajax({
                type: 'get',
                url: '/Departements/UserSort?handler=Filter', 
                beforeSend: function (xhr) {
                    xhr.setRequestHeader("XSRF-TOKEN",
                        $('input:hidden[name="__RequestVerificationToken"]').val());
                },
                dataType: 'JSON',
                data: {
                    FilterBy: value
                }
            }).done(function (result){
                //Clear the items from the listbox
                $('#UsersList').jqxListBox('clear');
                $.each(result, function (index, value) {
                    //Depending on the skill give the item a color
                    switch (value.skill) {
                        case 0:
                            HtmlName = '<font color="Red">' +value.name + '</font>';
                            break;
                        case 1:
                            HtmlName = '<font color="Green">' + value.name + '</font>';
                            break;
                        default:
                            HtmlName = value.name;
                    }
                    //add the item to the listbox
                    $('#UsersList').jqxListBox('addItem', { label: HtmlName, value: value.id });
                });

            });
        }
    });

    $('#SubmitButton').on('click', function () {
        var selectedItem = $('#departmentDropDown').jqxDropDownList('getSelectedItem');
        var items = $('#UsersList').jqxListBox('getItems');
        var resultItems = [];
        function item(Id, Order) {
            this.Id = Id;
            this.Order = Order;
        }
        $.each(items, function (index, value) {
            var Item = new item();
            Item.Id = value.value;
            Item.Order = index;
            resultItems.push(Item);
        });
        console.table(resultItems);

        $.ajax({
            type: "post",
            url: '/Departements/UserSort?handler=Submit',
            contentType: "application/json; charset=utf-8",
            beforeSend: function (xhr) {
                xhr.setRequestHeader("X-XSRF-TOKEN",
                    $('input:hidden[name="__RequestVerificationToken"]').val());
            },
            data: JSON.stringify({
                DepartmentId: selectedItem.value,
                ResultItems: resultItems
            })
        }).done(function (message) {
            alert(message);
        });
    });
});

I do not have any idea where to look, especially since it is working good in Visual studio.

to check that there is not a timing problem I stepped trough my js code line by line but still no Drag Drop.

Please help.

[HristoParticipant]

Hello RobWarning,

It is a part of your code – I hope the initialization of the widget happens just once.
This is important because it is a common situation that produces inappropriate behavior.
I would like to suggest you check the console for any error message.
Also, please, a check is there the “jqxdragdrop.js” file included in your project and if it missed then include it.

Best Regards,
Hristo Hristov

jQWidgets team
https://www.jqwidgets.com

[RobWarningParticipant]

Hi Hristo,

Sorry for my late reaction in your answer. Busy busy busy..
The problem is still there, on my developer pc under VS it works fine.
as soon as I deploy to my production environment the dragging fails on this page.
I have an other page with a jqxSortable on a table that works just fine.

The initialization of my jqxlistbox widget happens only once as you can see in my code.
I have checked the console window but I don’t see any errors.
And the jqxdragdrop.js is definitely included.

I have added following code to my .js file:

 $('#UsersList').on('dragStart', function (event) {
        console.log(event);
    });

from my developer pc I can see the event in my console window.
on the production machine it douse not get triggered

[HristoParticipant]

Hello RobWarning,

Could you provide us with more details?
What is the environment where you reproduce it?
Also, it will be better if you could provide us with one simplified example that demonstrates your case.
You could write this on the Technical Support Team (support@jqwidgets.com) with this case.

Best Regards,
Hristo Hristov

jQWidgets team
https://www.jqwidgets.com

[RobWarningParticipant]

The environment of my production server is a webwiz re-seller hosting platform (see https://www.webwiz.net/ )
A simplified example is hard to give because I do not know where the problem is, and as stated on my development machine it works fine.
I could provide you with a link to the page, but then I would have to give you a password also. and since this is a public forum …

I will rebuild the entire page step by step and see if and where it gets faulty again.

regards,
Rob

[Author]

Posts