Win a copy of Mesos in Action this week in the Cloud/Virtualizaton forum!
  • Post Reply
  • Bookmark Topic Watch Topic
  • New Topic

Simple Expand Collapse Jquery Question

 
Michele Smith
Ranch Hand
Posts: 421
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
I am trying to implement a simple little expand collapse. I wondered if anyone has a suggestion. It is not working in IE9 and it is not working in Firefox. -- Thanks, Michele


 
Bear Bibeault
Author and ninkuma
Marshal
Pie
Posts: 64858
86
IntelliJ IDE Java jQuery Mac Mac OS X
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
Problem #1 (not saying that there aren't more) is that your jQuery code is not in a ready handler. So it's executing before the elements it's supposed to instrument even exist.
 
Michele Smith
Ranch Hand
Posts: 421
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
I put the entire jquery script into the same folder as this html and it does not work referenced as a relative link.

Any suggestions?

Thanks,
Michele
 
Bear Bibeault
Author and ninkuma
Marshal
Pie
Posts: 64858
86
IntelliJ IDE Java jQuery Mac Mac OS X
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
How you import the code is irrelevant to the problem I've addressed.
 
Bear Bibeault
Author and ninkuma
Marshal
Pie
Posts: 64858
86
IntelliJ IDE Java jQuery Mac Mac OS X
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
P.S. It's not recommended to mix the scripts (or images or stylesheets) with the HTML/JSP files. Neither is page-relative addressing recommended.
 
Michele Smith
Ranch Hand
Posts: 421
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
Is this better?

Wrap your code in a document.ready callback to ensure that the elements are present in the DOM before you try to operate on them:


If it is better, where should I put this relative to the javascript function? Should it be at the beginning or at the end?
 
Michele Smith
Ranch Hand
Posts: 421
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
Also Bear, in regards to your comment, I agree with you it is better to separate the css and the js but I am putting it all together so you can see it and also I am testing it on my local machine before implementing the code into the project. Thanks, Michele
 
Bear Bibeault
Author and ninkuma
Marshal
Pie
Posts: 64858
86
IntelliJ IDE Java jQuery Mac Mac OS X
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
Michele Smith wrote:where should I put this relative to the javascript function? Should it be at the beginning or at the end?


I'm not sure what function you are asking about, but the declaration of the ready handler can go anywhere in a script block. And you can have more than one ready handler.

Some people place the script block(s) in the <head>. Some put it at the end of the body (which arguable has performance benefits depending upon who you ask).

The important thing is to make sure that any jQuery statements that manipulate DOM elements are within the ready handler so that they do not execute until after the elements have been created.
 
Bear Bibeault
Author and ninkuma
Marshal
Pie
Posts: 64858
86
IntelliJ IDE Java jQuery Mac Mac OS X
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
Michele Smith wrote:Also Bear, in regards to your comment, I agree with you it is better to separate the css and the js but I am putting it all together so you can see it

For me, that just makes it harder to inspect the code. I'd personally prefer to see the CSS and structure posted separately. That's the way I write code, and am more accustomed to perusing. Others' mileage may vary.
 
  • Post Reply
  • Bookmark Topic Watch Topic
  • New Topic