jquery-example.js

<script type="text/javascript">
let globalChristianClassId = null;
let globalChristianLevelId = null;
let globalChristianDutyId = null;
let globalOfferingServiceId = null;
let globalOfferingTypeId = null;

(function($) {
  'use strict';

  // define elements
  let christianClassForm = $('#id-christian-class-form');
  let christianClassSelect = $('#id-christian-class-select');
  let christianClassName = $('#id-christian-class-name');
  let christianClassSaveButton = $('#id-christian-class-save-button');
  let christianClassAddButton = $('#id-christian-class-add-button');
  let christianClassDeleteButton = $('#id-christian-class-delete-button');
  let christianClassActionType = $('#id-christian-class-action-type');
  let christianClassPK = $('#id-christian-class-pk');
  let christianLevelForm = $('#id-christian-level-form');
  let christianLevelSelect = $('#id-christian-level-select');
  let christianLevelName = $('#id-christian-level-name');
  let christianLevelSaveButton = $('#id-christian-level-save-button');
  let christianLevelAddButton = $('#id-christian-level-add-button');
  let christianLevelDeleteButton = $('#id-christian-level-delete-button');
  let christianLevelActionType = $('#id-christian-level-action-type');
  let christianLevelPK = $('#id-christian-level-pk');
  let christianDutyForm = $('#id-christian-duty-form');
  let christianDutySelect = $('#id-christian-duty-select');
  let christianDutyName = $('#id-christian-duty-name');
  let christianDutySaveButton = $('#id-christian-duty-save-button');
  let christianDutyAddButton = $('#id-christian-duty-add-button');
  let christianDutyDeleteButton = $('#id-christian-duty-delete-button');
  let christianDutyActionType = $('#id-christian-duty-action-type');
  let christianDutyPK = $('#id-christian-duty-pk');
  let offeringServiceForm = $('#id-offering-service-form');
  let offeringServiceSelect = $('#id-offering-service-select');
  let offeringServiceName = $('#id-offering-service-name');
  let offeringServiceSaveButton = $('#id-offering-service-save-button');
  let offeringServiceAddButton = $('#id-offering-service-add-button');
  let offeringServiceDeleteButton = $('#id-offering-service-delete-button');
  let offeringServiceActionType = $('#id-offering-service-action-type');
  let offeringServicePK = $('#id-offering-service-pk');
  let offeringTypeForm = $('#id-offering-type-form');
  let offeringTypeSelect = $('#id-offering-type-select');
  let offeringTypeName = $('#id-offering-type-name');
  let offeringTypeSaveButton = $('#id-offering-type-save-button');
  let offeringTypeAddButton = $('#id-offering-type-add-button');
  let offeringTypeDeleteButton = $('#id-offering-type-delete-button');
  let offeringTypeActionType = $('#id-offering-type-action-type');
  let offeringTypePK = $('#id-offering-type-pk');


  // trigger christian class select change
  christianClassSelect.on('change', function() {
    const selectedChristianClass = $(this).children(':selected');
    globalChristianClassId = selectedChristianClass.attr('id');
    christianClassName.val(selectedChristianClass.val());
  });

  // trigger christian level select change
  christianLevelSelect.on('change', function() {
    const selectedChristianLevel = $(this).children(':selected');
    globalChristianLevelId = selectedChristianLevel.attr('id');
    christianLevelName.val(selectedChristianLevel.val());
  });

  // trigger christian duty select change
  christianDutySelect.on('change', function() {
    const selectedChristianDuty = $(this).children(':selected');
    globalChristianDutyId = selectedChristianDuty.attr('id');
    christianDutyName.val(selectedChristianDuty.val());
  });

  // trigger offering service select change
  offeringServiceSelect.on('change', function() {
    const selectedOfferingService = $(this).children(':selected');
    globalOfferingServiceId = selectedOfferingService.attr('id');
    offeringServiceName.val(selectedOfferingService.val());
  });

  // trigger offering type select change
  offeringTypeSelect.on('change', function() {
    const selectedOfferingType = $(this).children(':selected');
    globalOfferingTypeId = selectedOfferingType.attr('id');
    offeringTypeName.val(selectedOfferingType.val());
  });

  // trigger christian class add button click
  christianClassAddButton.on('click', function() {
    christianClassName.val('');
    christianClassName.focus();
    christianClassSelect.val([]);
  });

  // trigger christian level add button click
  christianLevelAddButton.on('click', function() {
    christianLevelName.val('');
    christianLevelName.focus();
    christianLevelSelect.val([]);
  });

  // trigger christian duty add button click
  christianDutyAddButton.on('click', function() {
    christianDutyName.val('');
    christianDutyName.focus();
    christianDutySelect.val([]);
  });

  // trigger offering service add button click
  offeringServiceAddButton.on('click', function() {
    offeringServiceName.val('');
    offeringServiceName.focus();
    offeringServiceSelect.val([]);
  });

  // trigger offering type add button click
  offeringTypeAddButton.on('click', function() {
    offeringTypeName.val('');
    offeringTypeName.focus();
    offeringTypeSelect.val([]);
  });

  // trigger christian class delete button click
  christianClassDeleteButton.on('click', function() {
    const isChristianClassSelected = christianClassSelect.val() !== null;
    if(!isChristianClassSelected) {
      new PNotify({
        title: '{% trans "delete"|capfirst %}',
        text: '{% trans "No data to delete!" %}',
        type: 'warning',
        styling: 'bootstrap3',
        nonblock: {
          nonblock: true
        }
      });
      christianClassSelect.focus();
      return null;
    }
    const christianClassId = christianClassSelect.children(':selected').attr('id');
    christianClassActionType.val("delete");
    christianClassPK.val(globalChristianClassId);
    let data = christianClassForm.serialize();
    $.ajaxSetup({
      data: { csrfmiddlewaretoken: '{{ csrf_token }}' }
    });
    $.ajax({
      method: 'POST',
      url: '{% url "config-christian" %}',
      data: christianClassForm.serialize(),
    }).done(function(resp) {
      reloadChristianClasses();
      new PNotify({
        title: '{% trans "delete"|capfirst %}',
        text: resp.message,
        type: 'success',
        styling: 'bootstrap3',
        nonblock: {
          nonblock: true
        }
      });
    });
  });

  // trigger christian level delete button click
  christianLevelDeleteButton.on('click', function() {
    const isChristianLevelSelected = christianLevelSelect.val() !== null;
    if(!isChristianLevelSelected) {
      new PNotify({
        title: '{% trans "delete"|capfirst %}',
        text: '{% trans "No data to delete!" %}',
        type: 'warning',
        styling: 'bootstrap3',
        nonblock: {
          nonblock: true
        }
      });
      christianLevelSelect.focus();
      return null;
    }
    const christianLevelId = christianLevelSelect.children(':selected').attr('id');
    christianLevelActionType.val("delete");
    christianLevelPK.val(globalChristianLevelId);
    let data = christianLevelForm.serialize();
    $.ajaxSetup({
      data: { csrfmiddlewaretoken: '{{ csrf_token }}' }
    });
    $.ajax({
      method: 'POST',
      url: '{% url "config-christian" %}',
      data: christianLevelForm.serialize(),
    }).done(function(resp) {
      reloadChristianLevels();
      new PNotify({
        title: '{% trans "delete"|capfirst %}',
        text: resp.message,
        type: 'success',
        styling: 'bootstrap3',
        nonblock: {
          nonblock: true
        }
      });
    });
  });

  // trigger christian duty delete button click
  christianDutyDeleteButton.on('click', function() {
    const isChristianDutySelected = christianDutySelect.val() !== null;
    if(!isChristianDutySelected) {
      new PNotify({
        title: '{% trans "delete"|capfirst %}',
        text: '{% trans "No data to delete!" %}',
        type: 'warning',
        styling: 'bootstrap3',
        nonblock: {
          nonblock: true
        }
      });
      christianDutySelect.focus();
      return null;
    }
    const christianDutyId = christianDutySelect.children(':selected').attr('id');
    christianDutyActionType.val("delete");
    christianDutyPK.val(globalChristianDutyId);
    let data = christianDutyForm.serialize();
    $.ajaxSetup({
      data: { csrfmiddlewaretoken: '{{ csrf_token }}' }
    });
    $.ajax({
      method: 'POST',
      url: '{% url "config-christian" %}',
      data: christianDutyForm.serialize(),
    }).done(function(resp) {
      reloadChristianDuties();
      new PNotify({
        title: '{% trans "delete"|capfirst %}',
        text: resp.message,
        type: 'success',
        styling: 'bootstrap3',
        nonblock: {
          nonblock: true
        }
      });
    });
  });

  // trigger offering service delete button click
  offeringServiceDeleteButton.on('click', function() {
    const isOfferingServiceSelected = offeringServiceSelect.val() !== null;
    if(!isOfferingServiceSelected) {
      new PNotify({
        title: '{% trans "delete"|capfirst %}',
        text: '{% trans "No data to delete!" %}',
        type: 'warning',
        styling: 'bootstrap3',
        nonblock: {
          nonblock: true
        }
      });
      offeringServiceSelect.focus();
      return null;
    }
    const offeringServiceId = offeringServiceSelect.children(':selected').attr('id');
    offeringServiceActionType.val("delete");
    offeringServicePK.val(globalOfferingServiceId);
    let data = offeringServiceForm.serialize();
    $.ajaxSetup({
      data: { csrfmiddlewaretoken: '{{ csrf_token }}' }
    });
    $.ajax({
      method: 'POST',
      url: '{% url "config-christian" %}',
      data: offeringServiceForm.serialize(),
    }).done(function(resp) {
      reloadOfferingServices();
      new PNotify({
        title: '{% trans "delete"|capfirst %}',
        text: resp.message,
        type: 'success',
        styling: 'bootstrap3',
        nonblock: {
          nonblock: true
        }
      });
    });
  });

  // trigger offering type delete button click
  offeringTypeDeleteButton.on('click', function() {
    const isOfferingTypeSelected = offeringTypeSelect.val() !== null;
    if(!isOfferingTypeSelected) {
      new PNotify({
        title: '{% trans "delete"|capfirst %}',
        text: '{% trans "No data to delete!" %}',
        type: 'warning',
        styling: 'bootstrap3',
        nonblock: {
          nonblock: true
        }
      });
      offeringTypeSelect.focus();
      return null;
    }
    const offeringTypeId = offeringTypeSelect.children(':selected').attr('id');
    offeringTypeActionType.val("delete");
    offeringTypePK.val(globalOfferingTypeId);
    let data = offeringTypeForm.serialize();
    $.ajaxSetup({
      data: { csrfmiddlewaretoken: '{{ csrf_token }}' }
    });
    $.ajax({
      method: 'POST',
      url: '{% url "config-christian" %}',
      data: offeringTypeForm.serialize(),
    }).done(function(resp) {
      reloadOfferingTypes();
      new PNotify({
        title: '{% trans "delete"|capfirst %}',
        text: resp.message,
        type: 'success',
        styling: 'bootstrap3',
        nonblock: {
          nonblock: true
        }
      });
    });
  });

  // trigger christian class save button click
  christianClassSaveButton.on('click', function() {
    const isChristianClassNameEmpty = christianClassName.val().length === 0;
    const isChristianClassSelected = christianClassSelect.val() !== null;
    if (isChristianClassNameEmpty) {
      new PNotify({
        title: '{% trans "save"|capfirst %}',
        text: '{% trans "No data to save!" %}',
        type: 'warning',
        styling: 'bootstrap3',
        nonblock: {
          nonblock: true
        }
      });
      christianClassName.val('');
      christianClassName.focus();
      return null;
    }

    const isNameSame = christianClassSelect.val() == christianClassName.val();
    if (isNameSame) { return null; }

    const isNameNew = !isChristianClassSelected;

    // if new name
    if (isNameNew) {
      christianClassActionType.val("create");
      let data = christianClassForm.serialize();
      $.ajaxSetup({
        data: { csrfmiddlewaretoken: '{{ csrf_token }}' }
      });
      $.ajax({
        method: 'POST',
        url: '{% url "config-christian" %}',
        data: christianClassForm.serialize(),
      }).done(function(resp) {
        reloadChristianClasses();
        new PNotify({
          title: '{% trans "create"|capfirst %}',
          text: resp.message,
          type: 'success',
          styling: 'bootstrap3',
          nonblock: {
            nonblock: true
          }
        });
      });
    } else {
      christianClassActionType.val("update");
      christianClassPK.val(globalChristianClassId);
      let data = christianClassForm.serialize();
      $.ajaxSetup({
        data: { csrfmiddlewaretoken: '{{ csrf_token }}' }
      });
      $.ajax({
        method: 'POST',
        url: '{% url "config-christian" %}',
        data: christianClassForm.serialize(),
      }).done(function(resp) {
        reloadChristianClasses();
        new PNotify({
          title: '{% trans "update"|capfirst %}',
          text: resp.message,
          type: 'success',
          styling: 'bootstrap3',
          nonblock: {
            nonblock: true
          }
        });
      });
    }
  });

  // trigger christian level save button click
  christianLevelSaveButton.on('click', function() {
    const isChristianLevelNameEmpty = christianLevelName.val().length === 0;
    const isChristianLevelSelected = christianLevelSelect.val() !== null;
    if (isChristianLevelNameEmpty) {
      new PNotify({
        title: '{% trans "save"|capfirst %}',
        text: '{% trans "No data to save!" %}',
        type: 'warning',
        styling: 'bootstrap3',
        nonblock: {
          nonblock: true
        }
      });
      christianLevelName.val('');
      christianLevelName.focus();
      return null;
    }

    const isNameSame = christianLevelSelect.val() == christianLevelName.val();
    if (isNameSame) { return null; }

    const isNameNew = !isChristianLevelSelected;

    // if new name
    if (isNameNew) {
      christianLevelActionType.val("create");
      let data = christianLevelForm.serialize();
      $.ajaxSetup({
        data: { csrfmiddlewaretoken: '{{ csrf_token }}' }
      });
      $.ajax({
        method: 'POST',
        url: '{% url "config-christian" %}',
        data: christianLevelForm.serialize(),
      }).done(function(resp) {
        reloadChristianLevels();
        new PNotify({
          title: '{% trans "create"|capfirst %}',
          text: resp.message,
          type: 'success',
          styling: 'bootstrap3',
          nonblock: {
            nonblock: true
          }
        });
      });
    } else {
      christianLevelActionType.val("update");
      christianLevelPK.val(globalChristianLevelId);
      let data = christianLevelForm.serialize();
      $.ajaxSetup({
        data: { csrfmiddlewaretoken: '{{ csrf_token }}' }
      });
      $.ajax({
        method: 'POST',
        url: '{% url "config-christian" %}',
        data: christianLevelForm.serialize(),
      }).done(function(resp) {
        reloadChristianLevels();
        new PNotify({
          title: '{% trans "update"|capfirst %}',
          text: resp.message,
          type: 'success',
          styling: 'bootstrap3',
          nonblock: {
            nonblock: true
          }
        });
      });
    }
  });

  // trigger christian duty save button click
  christianDutySaveButton.on('click', function() {
    const isChristianDutyNameEmpty = christianDutyName.val().length === 0;
    const isChristianDutySelected = christianDutySelect.val() !== null;
    if (isChristianDutyNameEmpty) {
      new PNotify({
        title: '{% trans "save"|capfirst %}',
        text: '{% trans "No data to save!" %}',
        type: 'warning',
        styling: 'bootstrap3',
        nonblock: {
          nonblock: true
        }
      });
      christianDutyName.val('');
      christianDutyName.focus();
      return null;
    }

    const isNameSame = christianDutySelect.val() == christianDutyName.val();
    if (isNameSame) { return null; }

    const isNameNew = !isChristianDutySelected;

    // if new name
    if (isNameNew) {
      christianDutyActionType.val("create");
      let data = christianDutyForm.serialize();
      $.ajaxSetup({
        data: { csrfmiddlewaretoken: '{{ csrf_token }}' }
      });
      $.ajax({
        method: 'POST',
        url: '{% url "config-christian" %}',
        data: christianDutyForm.serialize(),
      }).done(function(resp) {
        reloadChristianDuties();
        new PNotify({
          title: '{% trans "create"|capfirst %}',
          text: resp.message,
          type: 'success',
          styling: 'bootstrap3',
          nonblock: {
            nonblock: true
          }
        });
      });
    } else {
      christianDutyActionType.val("update");
      christianDutyPK.val(globalChristianDutyId);
      let data = christianDutyForm.serialize();
      $.ajaxSetup({
        data: { csrfmiddlewaretoken: '{{ csrf_token }}' }
      });
      $.ajax({
        method: 'POST',
        url: '{% url "config-christian" %}',
        data: christianDutyForm.serialize(),
      }).done(function(resp) {
        reloadChristianDuties();
        new PNotify({
          title: '{% trans "update"|capfirst %}',
          text: resp.message,
          type: 'success',
          styling: 'bootstrap3',
          nonblock: {
            nonblock: true
          }
        });
      });
    }
  });

  // trigger offering service save button click
  offeringServiceSaveButton.on('click', function() {
    const isOfferingServiceNameEmpty = offeringServiceName.val().length === 0;
    const isOfferingServiceSelected = offeringServiceSelect.val() !== null;
    if (isOfferingServiceNameEmpty) {
      new PNotify({
        title: '{% trans "save"|capfirst %}',
        text: '{% trans "No data to save!" %}',
        type: 'warning',
        styling: 'bootstrap3',
        nonblock: {
          nonblock: true
        }
      });
      offeringServiceName.val('');
      offeringServiceName.focus();
      return null;
    }

    const isNameSame = offeringServiceSelect.val() == offeringServiceName.val();
    if (isNameSame) { return null; }

    const isNameNew = !isOfferingServiceSelected;

    // if new name
    if (isNameNew) {
      offeringServiceActionType.val("create");
      let data = offeringServiceForm.serialize();
      $.ajaxSetup({
        data: { csrfmiddlewaretoken: '{{ csrf_token }}' }
      });
      $.ajax({
        method: 'POST',
        url: '{% url "config-christian" %}',
        data: offeringServiceForm.serialize(),
      }).done(function(resp) {
        reloadOfferingServices();
        new PNotify({
          title: '{% trans "create"|capfirst %}',
          text: resp.message,
          type: 'success',
          styling: 'bootstrap3',
          nonblock: {
            nonblock: true
          }
        });
      });
    } else {
      offeringServiceActionType.val("update");
      offeringServicePK.val(globalOfferingServiceId);
      let data = offeringServiceForm.serialize();
      $.ajaxSetup({
        data: { csrfmiddlewaretoken: '{{ csrf_token }}' }
      });
      $.ajax({
        method: 'POST',
        url: '{% url "config-christian" %}',
        data: offeringServiceForm.serialize(),
      }).done(function(resp) {
        reloadOfferingServices();
        new PNotify({
          title: '{% trans "update"|capfirst %}',
          text: resp.message,
          type: 'success',
          styling: 'bootstrap3',
          nonblock: {
            nonblock: true
          }
        });
      });
    }
  });

  // trigger offering type save button click
  offeringTypeSaveButton.on('click', function() {
    const isOfferingTypeNameEmpty = offeringTypeName.val().length === 0;
    const isOfferingTypeSelected = offeringTypeSelect.val() !== null;
    if (isOfferingTypeNameEmpty) {
      new PNotify({
        title: '{% trans "save"|capfirst %}',
        text: '{% trans "No data to save!" %}',
        type: 'warning',
        styling: 'bootstrap3',
        nonblock: {
          nonblock: true
        }
      });
      offeringTypeName.val('');
      offeringTypeName.focus();
      return null;
    }

    const isNameSame = offeringTypeSelect.val() == offeringTypeName.val();
    if (isNameSame) { return null; }

    const isNameNew = !isOfferingTypeSelected;

    // if new name
    if (isNameNew) {
      offeringTypeActionType.val("create");
      let data = offeringTypeForm.serialize();
      $.ajaxSetup({
        data: { csrfmiddlewaretoken: '{{ csrf_token }}' }
      });
      $.ajax({
        method: 'POST',
        url: '{% url "config-christian" %}',
        data: offeringTypeForm.serialize(),
      }).done(function(resp) {
        reloadOfferingTypes();
        new PNotify({
          title: '{% trans "create"|capfirst %}',
          text: resp.message,
          type: 'success',
          styling: 'bootstrap3',
          nonblock: {
            nonblock: true
          }
        });
      });
    } else {
      offeringTypeActionType.val("update");
      offeringTypePK.val(globalOfferingTypeId);
      let data = offeringTypeForm.serialize();
      $.ajaxSetup({
        data: { csrfmiddlewaretoken: '{{ csrf_token }}' }
      });
      $.ajax({
        method: 'POST',
        url: '{% url "config-christian" %}',
        data: offeringTypeForm.serialize(),
      }).done(function(resp) {
        reloadOfferingTypes();
        new PNotify({
          title: '{% trans "update"|capfirst %}',
          text: resp.message,
          type: 'success',
          styling: 'bootstrap3',
          nonblock: {
            nonblock: true
          }
        });
      });
    }
  });

  // reload christian class items
  function reloadChristianClasses() {
    $.ajax({
      method: 'GET',
      url: '{% url "config-christian" %}'
    }).done(function(resp) {
      christianClassSelect.find('option').remove();
      const items = resp.data.christian_class_items;
      items.map((item, index) => {
        christianClassSelect.append('<option id="' + item.pk + '" value="' + item.name + '">' + item.name + '</option>');
      });
      christianClassName.val('');
      christianClassSelect.focus();
    });
  }

  // reload christian level items
  function reloadChristianLevels() {
    $.ajax({
      method: 'GET',
      url: '{% url "config-christian" %}'
    }).done(function(resp) {
      christianLevelSelect.find('option').remove();
      const items = resp.data.christian_level_items;
      items.map((item, index) => {
        christianLevelSelect.append('<option id="' + item.pk + '" value="' + item.name + '">' + item.name + '</option>');
      });
      christianLevelName.val('');
      christianLevelSelect.focus();
    });
  }

  // reload christian duty items
  function reloadChristianDuties() {
    $.ajax({
      method: 'GET',
      url: '{% url "config-christian" %}'
    }).done(function(resp) {
      christianDutySelect.find('option').remove();
      const items = resp.data.christian_duty_items;
      items.map((item, index) => {
        christianDutySelect.append('<option id="' + item.pk + '" value="' + item.name + '">' + item.name + '</option>');
      });
      christianDutyName.val('');
      christianDutySelect.focus();
    });
  }

  // reload offering service items
  function reloadOfferingServices() {
    $.ajax({
      method: 'GET',
      url: '{% url "config-christian" %}'
    }).done(function(resp) {
      offeringServiceSelect.find('option').remove();
      const items = resp.data.offering_service_items;
      items.map((item, index) => {
        offeringServiceSelect.append('<option id="' + item.pk + '" value="' + item.name + '">' + item.name + '</option>');
      });
      offeringServiceName.val('');
      offeringServiceSelect.focus();
    });
  }

  // reload offering type items
  function reloadOfferingTypes() {
    $.ajax({
      method: 'GET',
      url: '{% url "config-christian" %}'
    }).done(function(resp) {
      offeringTypeSelect.find('option').remove();
      const items = resp.data.offering_type_items;
      items.map((item, index) => {
        offeringTypeSelect.append('<option id="' + item.pk + '" value="' + item.name + '">' + item.name + '</option>');
      });
      offeringTypeName.val('');
      offeringTypeSelect.focus();
    });
  }

})(jQuery);
</script>