slidePanel.js

      $(document).on('slidePanel::afterLoad', function(e, api) {
        $.components.init('material', api.$panel);

        $("#addItemForm").formValidation({
          framework: 'bootstrap',
          fields: {
            name: {
              validators: {
                notEmpty: {
                  message: 'The name is required'
                }
              }
            }
          }
        });

      });

      //--------------------------------
      $(document).on('click', '#addItemFormButton', function(e) {
        e.preventDefault();
        console.log("hello world");
        var formValidated = $("#addItemForm").data("formValidation").isValid();
        if(formValidated) {
          var formData = $(this).closest("form").serialize();
          var url = $(this).closest("form").attr("action");
          var L = Ladda.create(this);
          $.ajax({
            context: this,
            data: formData,
            dataType: 'json',
            url: url,
            type: "POST",
            complete: function () {
              L.stop();
            },
            success: function (data) {
              console.log("response", data);
              if (data.status == "failed") {
                data.errors.forEach(function (item) {
                  alertify.error(item.message);
                });
              } else {
                data.messages.forEach(function (item) {
                  if (item.type == "success") {
                    alertify.success(item.message);
                  } else if (item.type == "error") {
                    alertify.error(item.message);
                  }
                });
              }
            },
            error: function () {

            }
          });


        };


      });