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 jQuery Basics (2014) Creating a Mobile Drop Down Menu Perform: Part 1

Nina Kozlova
Nina Kozlova
11,602 Points

Should this work locally?

Hi. I tried following locally. I downloaded the files and have been adding code to app.js with a text editor on my machine. While it's working inside Workspaces, it doesn't on my machine. I'm stuck on the very first part of adding <select> to the html via app.js. For some reason no changes happen locally. What gives?

Thanks.

see the console for error may be jquery library is taking time to load

Joseph Zimmerman
Joseph Zimmerman
6,402 Points

Hi Nina,

if you post your code we might be better able to assist...

Are you sure your selecting the proper root folder for local hosting? if your path is incorrect that may explain why it's not working locally.

Joe

Nina Kozlova
Nina Kozlova
11,602 Points

Joseph, it's all nested the same way it is in the workspaces. And all I did was erase the code that came already written in app.js and started over.

I have, in app.js

var $select = ("<select></select>");
$("#menu").append($select);

The app.js is within JS folder, which is within the main folder, where the index.html is. I haven't changed anything in index.html, so there should be no hierarchy error here.

Nina Kozlova
Nina Kozlova
11,602 Points

The weird part is if I replace the "<select></select>" with something like "<p>Hello there</p>", the item is appended and I can see it on the page. Can it be the issue with the <select> tag??

Nina Kozlova
Nina Kozlova
11,602 Points

GOD BLESS IT! Sorry, people. It's called the power of a shower over a frustrated human. I forgot that the project already has this bloody thing programmed for the screen sizes! I haven't shrunk the screen! Sorry, guys! Thanks for all your help.

9 Answers

Make sure The path from the index.html and the app.js files are correct.. Can you post the code inside your head tags, also in your jquery are you using document.ready function?

Nina Kozlova
Nina Kozlova
11,602 Points

I am not using document.ready because <script> is at the bottom of the html, and according to the course, you don't need it if you put jQuery at the bottom of the body - the page will have been loaded by then and ready to roll.

$select = (""); //empty string 

$("#menu").append($select); //you are appending an empty string into the div with the ID of menu

If nothing is dynamically put into the var $select, then you are appending nothing into the div menu.

I think you already figured it out earlier, when you put the string hello there in the variable $select. the tag is correct, its the value that you are appending is the issue.

Nina Kozlova
Nina Kozlova
11,602 Points

It's not empty. I don't know why but when I typed it in the comment the select tags (opening and closing) within the quotation marks disappeared once the comment went in. Looks like anything in the html tags is disappearing here. There same thing happened in my other comment. Strange

Now I see it.

Silly question, but is there any CSS associated with the select tags?

Are you following the video or is this just work on your own? If you are working with the video, have you appended the option tag, along with text method? I really haven't used the select element a lot, but I'm betting select is similar to a ul element and would need the option element like the ul need an li, just an idea.

Nina Kozlova
Nina Kozlova
11,602 Points

select { width: 94%; margin: 11px 0 11px 2%; float: left; }

Came with the file.

Nina Kozlova
Nina Kozlova
11,602 Points

It's really weird - if I put some simple html like a paragraph or an h1 or something like that, it will append to the div. But not select. As if my computer doesn't understand what it means.

Nina Kozlova
Nina Kozlova
11,602 Points

I went ahead and typed the select bit into the html body. And heck - it still doesn't show in Safari, Chrome or Firefox.

Nina Kozlova
Nina Kozlova
11,602 Points

Another question - when I inspect the page in the developer, I see = $0 next to the div with the #menu id. What on earth does that mean?

Nina Kozlova
Nina Kozlova
11,602 Points

I am following the video. I also re-downloaded the project files, which come with the complete code, as I see. And nothing happens. Literally nothing. No <select> tag gets added to html although the app.js file is telling it to... I'm getting frustrated here :-(

I'm pretty sure you're not seeing any changes due to the fact that the jQuery database is outdated. Started working for me when I changed the src to: http://code.jquery.com/jquery-1.11.3.min.js

Christopher Parke
Christopher Parke
21,978 Points

I had this same problem. it would be solved by having 2 files in the project download. 1 complete version, and 1 version ready to be programmed along with the video.