Skip to content

Instantly share code, notes, and snippets.

What would you like to do?
// 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 to specify that you want this function to be called
// this function is in, 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
// 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);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment