showHideFormFields.js

// this is the function being called whenever a page gets loaded, including when you scroll to get the next page
// you need to configure your view in magicollections.py to specify that you want this function to be called
// this function is in main.py, but for some pages that are not loaded often (staff pages, settings) or are
// big enough you can have a file just for this page like `settings.js` (for what you're trying to do main.js is enough)
function loadCardInList() {
    ...
    // Show/hide include_cameos when member_id is set
    
    // $(xxx) is a way to retrieve an HTML element currently on the page
    // "#sidebar-wrapper #id_member_id" is the selector to find the elements. it's very similar to CSS selectors.
    // .length will return how many elements match the selector.
    // so, this checks that both the fields "member id" and "includes cameos" are on the page
    // if we're loading this view in a modal, they wouldn't be there, that's why we need to check
    if ($('#sidebar-wrapper #id_member_id').length > 0 && $('#sidebar-wrapper #id_member_includes_cameos').length > 0) {
        // call the logic to show / hide the fields when the page is loaded
        onMemberChange();
        // add an event listener to the "member id" field so that whenever the user changes the value,
        // it calls the logic to show / hide the fields
        // the event here is called "change"
        // you can add event listeners like so:
        // my_elements.on('name of the event', callback_function);
        // but for most common events you can use the shortcut.
        // in other words, this:
        // my_elements.change(callback_function);
        // is equivalent to this:
        // my_elements.on('change', callback_function);
        // in javascript you can declare anonymous functions anywhere, that's why the `function () { ... }` is just here
        $('#sidebar-wrapper #id_member_id').change(function () { onMemberChange('slow') });
    }

    // I moved this piece of the code here because it's easier to understand if you read it after
    // but it actually needs to be declared before ;)
    // this is the callback function with the logic to show / hide fields
    function onMemberChange(animation) {
        // get the element and call "val" to get its current value.
        // "val" is a utility function that works well on all kinds of form fields to retrieve the current value
        // speficied by the user in the form for that field
        // the value can either be the id of a member which was selected by the user, or "" which means no member was selected
        // when no member is selected then we want to hide the field to include cameos!
        if ($('#sidebar-wrapper #id_member_id').val() != "") {
            // first we get the field HTML element that corresponds to the checkbox:
            // $('#sidebar-wrapper #id_member_includes_cameos')
            // then we find the whole row (including the label and all that) for that checkbox:
            // .closest('.form-group') // you can see here "." is the same syntax as in CSS to select elements with the "class"
            // then we use the "show" function to display that field
            $('#sidebar-wrapper #id_member_includes_cameos').closest('.form-group').show(animation);
        } else {
            // this is very similar, but instead of showing we are hiding it
            $('#sidebar-wrapper #id_member_includes_cameos').closest('.form-group').hide(animation);
            // just because the element is not visible doesn't mean it disappeared completely.
            // because it's still there in the html (just invisible), when you submit the form,
            // it will still submit the value!
            // that's why when we're hiding the cameos field, we also want to make sure the
            // checkbox is uncheked. to do so, we change the "property" of the form field
            // for the checkbox called "checked", and we change it to "false"
            $('#sidebar-wrapper #id_member_includes_cameos').prop('checked', false);
        }
    }


}