Solved

Understanding Trigger in Jquery

Posted on 2016-11-16
10
65 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
3 Use Cases for Connected Systems

Our Dev teams are like yours. They’re continually cranking out code for new features/bugs fixes, testing, deploying, testing some more, responding to production monitoring events and more. It’s complex. So, we thought you’d like to see what’s working for us.

 
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

DevOps Toolchain Recommendations

Read this Gartner Research Note and discover how your IT organization can automate and optimize DevOps processes using a toolchain architecture.

Question has a verified solution.

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

Introduction Got endorsements from your clients?  Great!  There is almost nothing better than word-of-mouth advertising.  But how can you do that on the internet?  Sure you can make a page for endorsement quotations and list them all, but who is …
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
The viewer will learn how to dynamically set the form action using jQuery.
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…

786 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