• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 184
  • Last Modified:

Understanding Trigger in Jquery

Hi,

I am using AdminLTE Dashboard Template to build my portal. In the Javascript file I came across the trigger function. Below is the part of the jquery code.

Kindly help me understand how the trigger function works in below code.

$.AdminLTE.pushMenu = {
    activate: function (toggleBtn) {
      //Get the screen sizes
      var screenSizes = $.AdminLTE.options.screenSizes;

      //Enable sidebar toggle
      $(document).on('click', toggleBtn, function (e) {
        e.preventDefault();

        //Enable sidebar push menu
        if ($(window).width() > (screenSizes.sm - 1)) {
          if ($("body").hasClass('sidebar-collapse')) {
            $("body").removeClass('sidebar-collapse').trigger('expanded.pushMenu');
          } else {
            $("body").addClass('sidebar-collapse').trigger('collapsed.pushMenu');
          }
        }
        //Handle sidebar push menu for small screens
        else {
          if ($("body").hasClass('sidebar-open')) {
            $("body").removeClass('sidebar-open').removeClass('sidebar-collapse').trigger('collapsed.pushMenu');
          } else {
            $("body").addClass('sidebar-open').trigger('expanded.pushMenu');
          }
        }
      });

      $(".content-wrapper").click(function () {
        //Enable hide menu when clicking on the content-wrapper on small screens
        if ($(window).width() <= (screenSizes.sm - 1) && $("body").hasClass("sidebar-open")) {
          $("body").removeClass('sidebar-open');
        }
      });

      //Enable expand on hover for sidebar mini
      if ($.AdminLTE.options.sidebarExpandOnHover
        || ($('body').hasClass('fixed')
        && $('body').hasClass('sidebar-mini'))) {
        this.expandOnHover();
      }
    },
    expandOnHover: function () {
      var _this = this;
      var screenWidth = $.AdminLTE.options.screenSizes.sm - 1;
      //Expand sidebar on hover
      $('.main-sidebar').hover(function () {
        if ($('body').hasClass('sidebar-mini')
          && $("body").hasClass('sidebar-collapse')
          && $(window).width() > screenWidth) {
          _this.expand();
        }
      }, function () {
        if ($('body').hasClass('sidebar-mini')
          && $('body').hasClass('sidebar-expanded-on-hover')
          && $(window).width() > screenWidth) {
          _this.collapse();
        }
      });
    },
    expand: function () {
      $("body").removeClass('sidebar-collapse').addClass('sidebar-expanded-on-hover');
    },
    collapse: function () {
      if ($('body').hasClass('sidebar-expanded-on-hover')) {
        $('body').removeClass('sidebar-expanded-on-hover').addClass('sidebar-collapse');
      }
    }
  };

Open in new window


Thanks in advance.
0
Vipin Kumar
Asked:
Vipin Kumar
  • 6
  • 4
3 Solutions
 
James BilousSoftware EngineerCommented:
Triggered is a jQuery function that simply emulates an event taking place. These events are any that you can respond to using jQuery, such as "click", "keydown", or in your case "expanded" and "collapsed.

The code you have posted is using trigger to expand and collapse menus in response to the window being resized. This is because normally a window resize does not trigger these events. They are probably doing this to facilitate the responsiveness of the layout.
0
 
Vipin KumarSr. Network EngineerAuthor Commented:
@James,

Can you please elaborate on this trigger trigger('expanded.pushMenu'). I dont see any where in my code expanded written, what I see only is expand: function (). Then how does it understand expanded.

Thanks in advance.
0
 
James BilousSoftware EngineerCommented:
Vipin - "expanded" is a custom event that must be consumed elsewhere. It could be part of the core of the AdminLTE framework in some other file, but only something like ".on("expanded.pushMenu"..." will respond to this custom triggered event.
0
Concerto Cloud for Software Providers & ISVs

Can Concerto Cloud Services help you focus on evolving your application offerings, while delivering the best cloud experience to your customers? From DevOps to revenue models and customer support, the answer is yes!

Learn how Concerto can help you.

 
Vipin KumarSr. Network EngineerAuthor Commented:
@James,

I have searched all the files, there is no where I find that expanded is defined. That is why I am getting confused.
0
 
James BilousSoftware EngineerCommented:
Vipin - It could very well simply be a hook for people extending or customizing the framework to hook onto. One may, for example, want to update the menu when it is collapsed, or do some other sort of layout modifications.
0
 
James BilousSoftware EngineerCommented:
I found this pull request for a code change on AdminLTE. You can see them discussing "expanded.pushMenu" as an event they added so people can respond to the menu changing in their own code:

https://github.com/almasaeed2010/AdminLTE/issues/444
0
 
Vipin KumarSr. Network EngineerAuthor Commented:
@James,

Then you mean that this code is not being executed at all.
0
 
James BilousSoftware EngineerCommented:
Correct, that's what I mean.
0
 
Vipin KumarSr. Network EngineerAuthor Commented:
@James,

Just last question, the whole code is not executed i.e. $("body").removeClass('sidebar-collapse').trigger('expanded.pushMenu'); or only the trigger is not executed.
0
 
James BilousSoftware EngineerCommented:
All of the code is executed; the statements are simply chained together and will happen in sequence.
0

Featured Post

Concerto's Cloud Advisory Services

Want to avoid the missteps to gaining all the benefits of the cloud? Learn more about the different assessment options from our Cloud Advisory team.

  • 6
  • 4
Tackle projects and never again get stuck behind a technical roadblock.
Join Now