Different behavior between DEV and PROD

[lincal]

Hi all,

I’m finalizing my first own Django app and I have some strange issues, as the behavior on my production server is different than in my local Dev environment.
My main issue is about a page displaying 2 multiple select boxes, and buttons dedicated to move items from one to the other thanks to Javascript functions: it works fine in DEV but not in Prod. On top of that, the display is also different, and looks sometimes weird on the Prod server.

The page is dedicated to list users and add them to a group. The icons intend to move one / all user(s) from the list to the group, and vice versa. It works perfectly in DEV but not at all in PROD.

I start with the JS code related to the buttons (I also consider a double click on a single item to move it from one group to the other and it doesn’t work either, so it’s included hereafter):

    // Add all (from source to destination)
    $('#add_all').on("click", function(e) {
        e.preventDefault();
        $('#id_users').find('option').removeAttr('selected');
        $('#id_all_users option').each(function() {
            add_option('#id_all_users', '#id_users', $(this));
            $('#id_users_in_group').val($('#id_users_in_group').val() + "-" + String($(this).val()))
        })
    })

    // Add selected (from source to destination)
    $('#add_selected').on("click", function(e) {
        e.preventDefault();
        $('#id_users').find('option').removeAttr('selected');
        let values = $('#id_all_users').val();

        $('#id_all_users option').each(function() {
            if ( values.includes( $(this).val() ) ) {
                add_option('#id_all_users', '#id_users', $(this));
                $('#id_users_in_group').val($('#id_users_in_group').val() + "-" + String($(this).val()))
            }
        })
    })

    // Add selected by double click
    $("#id_all_users option").dblclick(function(e) {
        e.preventDefault();
        $('#id_users').find('option').removeAttr('selected');
        add_option('#id_all_users', '#id_users', $(this));
        $('#id_users_in_group').val($('#id_users_in_group').val() + "-" + String($(this).val()))
    })

    // Remove all (empty list, back to global list)
    $('#remove_all').on("click", function(e) {
        e.preventDefault();
        $('#id_all_users').find('option').removeAttr('selected');
        $('#id_users option').each(function() {
            add_option('#id_users', '#id_all_users', $(this));
            $('#id_users_in_group').val($('#id_users_in_group').val().replace(String($(this).val()), ""))
        })
    })

    // Remove selected (from source to destination)
    $('#remove_selected').on("click", function(e) {
        e.preventDefault();
        $('#id_all_users').find('option').removeAttr('selected');
        let values = $('#id_users').val();

        $('#id_users option').each(function() {
            if ( values.includes( $(this).val() ) ) {
                add_option('#id_users', '#id_all_users', $(this));
                $('#id_users_in_group').val($('#id_users_in_group').val().replace(String($(this).val()), ""))
            }
        })
    })

    // Remove selected by double click
    $("#id_users option").dblclick(function(e) {
        e.preventDefault();
        $('#id_all_users').find('option').removeAttr('selected');
        add_option('#id_users', '#id_all_users', $(this));
        $('#id_users_in_group').val($('#id_users_in_group').val().replace(String($(this).val()), ""))
    })

Here are some screenshots to present display issues:

Development - No user in group

Production - No user in group

Development - All users in group

Production - All users in group

I have another case, in the same project, where the display issue occurs only in DEV and there is no issue in the Production environment.

Again 2 screenshots:

DEV Dropdown:

PROD Dropdown:

Many thanks in advance for your support

[CodenameTim]

I have a few questions regarding your situation.

1. Is dev a production like environment or is it local?
2. Did you confirm that all of the static assets loaded successfully on both dev and production?
3. Are there any JS errors in either of the environments?
4. What is the difference in the rendered html & computed css for the dropdown element? You don’t have to share this, but it’s a good path for you to follow to determine what’s happening.

[lincal]

Thanks Tim for the first reaction, here some pieces of information.

1. Dev is local
2. I assume theyr are, I remember it was a bit complicated when I pushed my first release. There are other parts in the app that work properly on both side (even if you make me doubt and i will check twice everything again!)
3. I don’t think so but, not sure and I have one question: will I see all messages in the console like when I run the app locally?
4. could you please precise what you mean? I do not see any issue to share this information

[CodenameTim]

3. Yes, if you have a JS error, it will be logged to the console regardless of environment (unless you have some way of silencing errors built in).
4. Check out the Inspection tool of your browser’s developer tools. When you select the select element, you should see the styles being applied to it. Comparing that between environments may inform you where the problem is. This is a debugging technique I use to narrow down the root cause, it’s not an actual solution to your problem.

[lincal]

OK thanks, I’ll come back here as soon as I’ll have checked all of this

[lincal]

Hello, so I made the tests, and it’s weird but it looks like there actually is a problem with static files rendering.
In fact, I understood why I had this weird display for the dropdown, but it’s liked to the same css group (select object) and it should be wide in both environment.
About JS, there is no error at all, but when I looked more in details, it appears that the file that is used is not the latest one. But, if look for the file in the project directory, the right file has been pulled from the repo.

Then, how can I solve this? I have no clue at all on how to deal with that (I just reloaded nginx and gunicorn services, with no change)

[CodenameTim]

It sounds like your browser is caching the JS. Opening the browser’s Dev Tools and disabling the cache on the network panel is one way to solve it. For other end users, you may need to employ a cache busting technique. This blog post goes over a few options.

[lincal]

Thanks again Tim, and sorry for not answering earlier.
For this subject, I opened a dedicated topic, and I’ll come back here according to the results.

[lincal]

Hi, here’s a feedback now that I finally implemented this settings, everything looks ok and my latest changes are taken into account.
Thanks for your help