Problem hooking up jQuery/Javascript


#1

I’m having troubles getting functions to work in my JS files. I’m creating a sidebar menu toggle button for my navigation, but the JS doesn’t seem to be linking up correctly. I added the min.js/jquery CDN to my loader page.


#2

It’s hard to say why it’s not working without more specific information. Can you provide the code you are using to add the jQuery file?


#4

Hey Dustin, for some reason, my code in the forums was formatting in a very
odd way, so I thought I could link my code to you here and once I have the
answer, I will post it in the forums for others to see.

Here is my HTML code, I’m basically trying to create a toggle button for my
sidebar navigation menu, the code seems to look correct, but it is not
executing.
I have chosen the Bootstrap raw 3.3.5 framework for my website. Could it be
that I do not have the bootstrap.min.js files hooked up? Or is that
something that would automatically hook up when I select the framework? I
apologize for the 20 questions lol. Thank you for the help!

<div id="wrapper">
        <!-- Sidebar -->
        <div id="sidebar-wrapper">
            <ul class="sidebar-nav">
                <li class="sidebar-brand">
                </li>
            </ul>
        </div><!-- /#sidebar-wrapper -->

        <!-- Page Content -->
        <div id="page-content-wrapper">
            <div class="container-fluid">
                <div class="row">
                    <div class="col-lg-12">
                        <a href="#menu-toggle" class="btn btn-default"
id="menu-toggle">Toggle Menu</a>
       <div id="main">
  {{current_view}}
</div><!-- /#main -->

   </div><!-- /.col-lg-12 -->
</div><!-- /.row -->
  </div><!-- /.container-fluid -->
        </div><!-- /#page-content-wrapper -->
    </div><!-- /#wrapper -->

Here is my JS code:

$(document).ready(function() {
// Side bar menu toggle button
$("#menu-toggle").click(function(e) {
        e.preventDefault();
        $("#wrapper").toggleClass("toggled");
    });

});

#5

Hey Charlten,

I’ll follow up with you directly while we debug, then I’ll plan on posting our solution here, once we figure out what’s going on.

Thanks,
Dustin


#6

A few things I would suggest are;

  1. Ensure your javascript is executing by adding a console.log in your function.

    (document).ready(function() { // Side bar menu toggle button ("#menu-toggle").click(function(e) {

     console.log('Toggle', e)
    
     e.preventDefault();
     $("#wrapper").toggleClass("toggled");
    

    });
    });

  2. Confirm your toggled class is being added and that the intended styles are being applied by looking in the browser inspector.

  3. A big gotcha can be if the menu markup is being added dynamically after the click event handler is executed then it will not be bound. Here is an article that provides more information on this. http://elijahmanor.com/differences-between-jquery-bind-vs-live-vs-delegate-vs-on/


#7

Thanks for the replies everyone, I just found out that I had switched from the Zesty.io tutorial to Bootstrap 3.3.5 without hitting the “reset framework” button. Which then gave me all the necessary files to run the code. It was my rookie mistake :tired_face: lol.