Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript

Posted by jasonniebauer
jasonniebauer
28,801 Points

JQUERY not showing in browser?

I'm attempting to follow along with the video for "Including jQuery in our Project."

However, when I refresh the "pricing.html" page through localhost, I'm not seeing jQuery take any affect. Is this just me or will it not show up and work because I am viewing through localhost?

7 Answers

klam tine
klam tine
15,524 Points
klam tine
klam tine
15,524 Points

Just use 

<script></script>

Instead of 

<script type="text/javascript"></script>
Twiz T
Twiz T
12,588 Points
Twiz T
Twiz T
12,588 Points

No localhost is not the problem. Some first things to check out-

Is 

<script type="text/javascript" src="js/jquery.js"></script>

in between your head tags on the html doc?

Is 

   <script type="text/javascript">
    $(".order_form").hide().before("<a href='#' class='order_now'>Order Now</a>");
    $(".order_form").click(function(){
        var $link = $(this);
        $link.next().show("slow");
        return false;
    });
    </script>

in between your head tag too? If you load this in the head tag jQuery doesn't know what elements from the html to select because they haven't loaded yet.

Jonathan Rawlins
Jonathan Rawlins
13,998 Points
Jonathan Rawlins
Jonathan Rawlins
13,998 Points

First thing that I spotted was you are missing the document ready command.

Wrap your jQuery HTML in the $(document).ready(function(){ /* CODE HERE */ });

<script src="js/jquery.js"></script>
<script>
$(document).ready(function(){
    $(".order_form").hide().before("<a href='#' class='order_now'>Order Now</a>");
    $(".order_form").click(function(){
        var $link = $(this);
        $link.next().show("slow");
        return false;
    });
});
</script>
jasonniebauer
jasonniebauer
28,801 Points
jasonniebauer
jasonniebauer
28,801 Points

I have this typed so far:

        <script type="text/javascript" src="js/jquery.js"></script>
    <script type="text/javascript">
    $(".order_form").hide().before("<a href='#' class='order_now'>Order Now</a>");
    $(".order_form").click(function(){
        var $link = $(this);
        $link.next().show("slow");
        return false;
    });
    </script>
Edgar Gutierrez
Edgar Gutierrez
2,836 Points
Edgar Gutierrez
Edgar Gutierrez
2,836 Points

Hi. I'm stucked in the same problem. I've followed every step and already checked several times that my code is correct. Still, JQUERY is not showing in my browser. I downloaded the latest version and saved it at the js folder. I don't know what I'm doing wrong. Would appreciate any help I can get. Thanks.

Shivam Bhalla
Shivam Bhalla
Courses Plus Student 5,035 Points

Potential Fixes

  1. Check to make sure jQuery is being loaded propely.

  2. View the page source, are you able to click the link and see the content of the jQuery file?

  3. If you can see contents of the jQuery file, next type this in AFTER your jQuery include

    <script> $(document).ready(function() { alert('Yup I am working'); }); </script>

If that does not work, check your console for JavaScript errors and post em here.

jasonniebauer
jasonniebauer
28,801 Points
jasonniebauer
jasonniebauer
28,801 Points

I have tried all of these suggestions, and still NO luck. The video instructs to put the script before the closing body. I am curious why it is suggested to use

$(document).ready(function(){ /* CODE HERE */ });

when the video does not use this and seems to work on the Treehouse side?

When viewing the page source, I click the jQuery link, but nothing happens...I take it that it is not loading properly? I have my files accurately in place. I'm still stuck :(

Shivam Bhalla
Shivam Bhalla
Courses Plus Student 5,035 Points

Okay cool, so the issue is that your jQuery is not linked properly.

Try this and it will work.

Instead of using relative jQuery source, using the actual url. So replace 

<script type="text/javascript" src="js/jquery.js"></script>

with:

<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>

Let me know if that works.

jasonniebauer
jasonniebauer
28,801 Points

Replaced jQuery source with actual url, and still not working. Where did you get the actual url? When I view the page source, I can now click on the jQuery link. This is what I have now

<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
    <script>
    $(document).ready(function(){
        $(".order_form").hide().before("<a href='#' class='order_now'>Order Now</a>");
        $(".order_form").click(function(){
            var $link = $(this);
            $link.next().show("slow");
            return false;
        });
    });
    </script>
Shivam Bhalla
Shivam Bhalla
Courses Plus Student 5,035 Points

Not sure what your intended goal is with your code, but to test if jQuery is loaded properly, replace your code with this.

<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script>
$(document).ready(function(){
   alert('jQuery is working');
});
</script>

If you see a pop-up message, jQuery is successfully working.

To get jQuery url, simply google jQuery download and click on the download link: jquery.coma/download/

jasonniebauer
jasonniebauer
28,801 Points
jasonniebauer
jasonniebauer
28,801 Points

Your code worked as far as displaying that jQuery is working. As far as following along with making the Smells Like Bakin website interactive, the code in the videos has not worked for me.

Shivam Bhalla
Shivam Bhalla
Courses Plus Student 5,035 Points

The problem in your code is that you are calling on the wrong element on the click function. You are suppose to call the '.order_now' link onClick, not the actual form.

Here is the code working:

(function($) { $(".order_form").hide().before("<a href='#' class='order_now'>Order Now</a>");

        $(".order_now").on('click', function(){
            var $link = $(this);
            $link.next().show("slow");
            return false;
        });
}) (jQuery);

jsFiddle: http://jsfiddle.net/8NVR3/2/

jasonniebauer
jasonniebauer
28,801 Points

AWESOME!! Thanks so much. You are correct. I had .order_form listed in both spots. It is now working properly.