Question

Photo of Andrew Metz

0

External Calendar Issue

6

anyone know why a ViewMode change (External Calendar: Selecting a filter i.e. "Men") would cause my dropdown menus to stop working (data toggle="dropdown")

  • Daniel Hazelbaker

    Daniel Hazelbaker

    Can you provide more information on exactly what you changed in code? I'm not really sure what exactly you changed based on your question...

    • Photo of Andrew Metz

      0

      Afer much searching I found this workaround for anyone who's js is not working applying a filter. (Stock Calendar or Group Finder blocks.)
      The script was originally loaded with document ready but with the update it needed to re-subscribe. 
      I'm not a developer so this was all foriegn to me...

      Here's what I found at Stack Overflow

      $(document).ready(function() {
      // bind your jQuery events here initially
      });


      var prm = Sys.WebForms.PageRequestManager.getInstance();


      prm.add_endRequest(function() {
      // re-bind your jQuery events here
      }); 

      That didn't work so I included the request in document ready and it worked. Here's what I ended up with.

      $(document).ready(function() {
      // bind your jQuery events here initially

      var prm = Sys.WebForms.PageRequestManager.getInstance();

      prm.add_endRequest(function() {
      // re-bind your jQuery events here
      });


      Not sure if there's a better way to do this but it worked.

    • Photo of Andrew Metz

      0

      Thanks for the reply Daniel, here's some context. https://kingsburgcommunitychurch.org/calendar

      This issue is after you filter by category on the calendar, i.e. Men, Women, etc... the top nav links (dropdowns) stop working.

      Nav link code:
      {%ifPage.DisplayChildPages=='true'andPage.Pages!=empty%}
      <ulclass="navnavbar-navfloat-right">
      {%forchildPageinPage.Pages%}
      <liclass="dropdown">
      {%ifchildPage.DisplayChildPages=='true'andchildPage.Pages!=empty%}
      <ahref="{{childPage.Url}}"class="dropdown-toggle"data-toggle="dropdown">{{childPage.Title}}</a>
      <ulclass="dropdown-menudropdown-menu-right">
      {%forsubchildPageinchildPage.Pages%}
      <li><ahref="{{subchildPage.Url}}">{{subchildPage.Title}}</a><li>
      {%endfor%}
      </ul>
      {%else%}
      <ahref="{{childPage.Url}}">{{childPage.Title}}</a>
      {%endif%}
      </li>
      {%endfor%}
      </ul>
      {%endif%}

      The only thing I changed in the Calendar block code was the addition of the "all" filter. Let me know if any of that would be helpful.

      Thank you again!

    • Photo of Andrew Metz

      0

      probably more pertinent is the js I have to make the dropdowns show on hover for desktop and on click for ipad and down.


      if ((Modernizr.mq('only all and (min-width: 1025px)') && !Modernizr.touch)) {
      $('.main-navigation:not(.onclick) .navbar-nav>li.dropdown, .main-navigation:not(.onclick) .nav>li.dropdown, .main-navigation:not(.onclick) li.dropdown>ul>li.dropdown').hover(
          function(){
              var $this = $(this);
              $this.addClass('open');
              $this.find('.dropdown-toggle').addClass('disabled');
          }, function(){
              $(this).removeClass('open');
              $(this).find('.dropdown-toggle').removeClass('disabled');
          });
      };



      //Show dropdown on click only for mobile devices
      //-----------------------------------------------
      if (Modernizr.mq || Modernizr.touch || $(".main-navigation.onclick").length>0 ) {
      $('.header [data-toggle=dropdown], .header-top [data-toggle=dropdown]').on('click', function(event) {
      // Avoid following the href location when clicking
      event.preventDefault();
      // Avoid having the menu to close when clicking
      event.stopPropagation();
      // close all the siblings
      $(this).parent().siblings().removeClass('open');
      // close all the submenus of siblings
      $(this).parent().siblings().find('[data-toggle=dropdown]').parent().removeClass('open');
      // opening the one you clicked on
      $(this).parent().toggleClass('open');
      });
      };

    • Photo of Daniel Hazelbaker

      0

      Hi Andrew, Unfortunately I don't know if there is much I can offer right now.  There are other errors on your website that probably need to be fixed first before we can begin diagnosing.  For example, there is a script being included called sticky.min.js that is throwing errors on that page as well as the homepage. The homepage is also throwing other javascript errors. I would start by trying to get rid of those errors and then come back to this. Any Javascript error can cause a page to not work correctly as often times the browser will stop processing javascript once it hits an error. So depending on _when_ that error happens it could cause the drop down menus to stop working. Or it could be unrelated, but while there are javascript errors on the page that is the place to start.

    • Photo of Andrew Metz

      0

      Got it, thanks for taking the time.
    • Photo of Andrew Metz

      0

      So those js errors we're because I had started disabling scripts in efforts of diagnosing the culprit, they're fixed now. If you have any more tips for troubleshooting I'd appreciate it!