Solved

Understanding Trigger in Jquery

Posted on 2016-11-16
10
87 Views
Last Modified: 2016-11-21
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
Comment
Question by:Vipin Kumar
  • 6
  • 4
10 Comments
 
LVL 8

Expert Comment

by:James Bilous
ID: 41890550
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
 
LVL 1

Author Comment

by:Vipin Kumar
ID: 41890555
@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
 
LVL 8

Accepted Solution

by:
James Bilous earned 500 total points
ID: 41890569
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
MIM Survival Guide for Service Desk Managers

Major incidents can send mastered service desk processes into disorder. Systems and tools produce the data needed to resolve these incidents, but your challenge is getting that information to the right people fast. Check out the Survival Guide and begin bringing order to chaos.

 
LVL 1

Author Comment

by:Vipin Kumar
ID: 41890573
@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
 
LVL 8

Assisted Solution

by:James Bilous
James Bilous earned 500 total points
ID: 41890578
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
 
LVL 8

Expert Comment

by:James Bilous
ID: 41890580
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
 
LVL 1

Author Comment

by:Vipin Kumar
ID: 41890608
@James,

Then you mean that this code is not being executed at all.
0
 
LVL 8

Expert Comment

by:James Bilous
ID: 41890630
Correct, that's what I mean.
0
 
LVL 1

Author Comment

by:Vipin Kumar
ID: 41890644
@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
 
LVL 8

Assisted Solution

by:James Bilous
James Bilous earned 500 total points
ID: 41890650
All of the code is executed; the statements are simply chained together and will happen in sequence.
0

Featured Post

Free Tool: IP Lookup

Get more info about an IP address or domain name, such as organization, abuse contacts and geolocation.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Nothing in an HTTP request can be trusted, including HTTP headers and form data.  A form token is a tool that can be used to guard against request forgeries (CSRF).  This article shows an improved approach to form tokens, making it more difficult to…
Boost your ability to deliver ambitious and competitive web apps by choosing the right JavaScript framework to best suit your project’s needs.
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

856 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question