SitePoint Sponsor

User Tag List

Results 1 to 22 of 22
  1. #1
    SitePoint Enthusiast
    Join Date
    Apr 2012
    Posts
    96
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Putting scripts on page

    What is the best way to include JavaScript on pages? the head, body, external file, or (just heard this recently) the bottom of the body? ... cause I've noticed sometimes when I put the scripts in different spots, that spot will work for one but not another... (Or maybe that's my imagination)

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,323
    Mentioned
    462 Post(s)
    Tagged
    8 Thread(s)
    These days, most people recommend that you 1) put your scripts in an external file and 2) link to those scripts at the bottom of your page (just before the closing </body> tag).

  3. #3
    SitePoint Enthusiast
    Join Date
    Apr 2012
    Posts
    96
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Alright then, and I got a problem here, I know my code is working (because I tested it in jsfiddle) but I can't get it to show up working on my site and this is the code

    Code:
    $(".control li").click(function () {
          $(".control li ul").slideToggle();
    });​
    but no matter what I do (putting it in the head, body or at the bottom of the body... it's all the same...) and yes when I put it in the body I put the <script type="text/javascript"><script> around the code... so what could I be doing wrong? (I feel as if it's right under my nose though :/ ) oh and just to let you know, I'm a developer noob (just been learning for maybe a year now...so bear with me..)

  4. #4
    SitePoint Wizard bronze trophy chris.upjohn's Avatar
    Join Date
    Apr 2010
    Location
    Melbourne, AU
    Posts
    2,198
    Mentioned
    17 Post(s)
    Tagged
    1 Thread(s)
    The only thing i see wrong is your not scoping the context correctly for your click event, currently you just targeting every <ul> that is a child of .control which won't work. See the below code which eliminates this issue.

    Code JavaScript:
    $(".control li").click(function () {
        $("ul", this).slideToggle();
    });
    Last edited by paul_wilkins; Jun 21, 2012 at 06:21. Reason: removed zero-width space &8203;

  5. #5
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,323
    Mentioned
    462 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by Hikaru Kagi View Post
    I can't get it to show up working on my site
    Apart from what chris.upjohn said ... and sorry if this is a dumb question ... but you do have a link to the jQuery library too, right?

  6. #6
    SitePoint Enthusiast
    Join Date
    Apr 2012
    Posts
    96
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ralph.m View Post
    Apart from what chris.upjohn said ... and sorry if this is a dumb question ... but you do have a link to the jQuery library too, right?
    Yep I have that as well, and chris.upjohn I put in the code you specified, but that didn't work either....

    EDIT: When I looked at the script via developer tools console (Chrome) it said "Uncaught SyntaxError: Unexpected token ILLEGAL" right below the code... now I have no idea what that means, but I think that might be part of the problem...

  7. #7
    SitePoint Wizard bronze trophy chris.upjohn's Avatar
    Join Date
    Apr 2010
    Location
    Melbourne, AU
    Posts
    2,198
    Mentioned
    17 Post(s)
    Tagged
    1 Thread(s)
    Could you please copy the line from your web inspector that is telling you has an error.

  8. #8
    SitePoint Enthusiast
    Join Date
    Apr 2012
    Posts
    96
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Well I fixed the previous error by apparently deleting a question mark that I put at the end , but now there's a new error...

    Code:
    $(".control li").click(function () {
    Uncaught TypeError: Cannot call method 'click' of null
          $("ul", this).slideToggle();
    });

  9. #9
    SitePoint Wizard bronze trophy chris.upjohn's Avatar
    Join Date
    Apr 2010
    Location
    Melbourne, AU
    Posts
    2,198
    Mentioned
    17 Post(s)
    Tagged
    1 Thread(s)
    That error suggests your attempting to call an element before the DOM is ready, see the below code.

    Code JavaScript:
    $(function() {
        $(".control li").click(function () {
            $("ul", this).slideToggle();
        });
    });

  10. #10
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,323
    Mentioned
    462 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by chris.upjohn View Post
    That error suggests your attempting to call an element before the DOM is ready
    If that's the case, the other solution is to put the scripts at the bottom of the page, before the closing </body> tag.

  11. #11
    SitePoint Enthusiast
    Join Date
    Apr 2012
    Posts
    96
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Still nothing... I don't understand why it wouldn't be working...

  12. #12
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,323
    Mentioned
    462 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by Hikaru Kagi View Post
    Still nothing... I don't understand why it wouldn't be working...
    Methinks it's time for links.

  13. #13
    SitePoint Enthusiast
    Join Date
    Apr 2012
    Posts
    96
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    What do you mean?

  14. #14
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,323
    Mentioned
    462 Post(s)
    Tagged
    8 Thread(s)
    If we could see the page, we'd actually be able to test it and see why it's not working. Otherwise, we are stabbing in the dark.

  15. #15
    SitePoint Enthusiast
    Join Date
    Apr 2012
    Posts
    96
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ooh... that'll be a problem then, I'm working on localhost (site is under construction)

  16. #16
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,323
    Mentioned
    462 Post(s)
    Tagged
    8 Thread(s)
    Could you put up a test page anywhere, such as on your own site? Otherwise perhaps a jsFiddle page.

  17. #17
    SitePoint Enthusiast
    Join Date
    Apr 2012
    Posts
    96
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Strange... When I put the content on jsfiddle... it started working O_o

  18. #18
    SitePoint Enthusiast
    Join Date
    Apr 2012
    Posts
    96
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Grrr... The original error popped up once again, this time, i'll post the code too
    Code:
    <script type="text/javascript">
    $(function() {
    $(".control li").click(function () {
        $("ul", this).slideToggle();
    });​
    Uncaught SyntaxError: Unexpected token ILLEGAL
    });
    </script>

  19. #19
    SitePoint Enthusiast
    Join Date
    Apr 2012
    Posts
    96
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I finally figured it out! I was looking at the jQuery documentation on the the jQuery site, and come find out if I'm using another Javascript library, I gotta include the jQuery.noConflict() function (just realized I was using another library when they mentioned Prototype, and I remembered seeing that in my <head>) and really I only using jQuery so i didn't know about Prototype. Now it's all fixed, thanks chris.upjohn and ralph.m for helping me out, since I'm just a beginner.

  20. #20
    padawan silver trophybronze trophy markbrown4's Avatar
    Join Date
    Jul 2006
    Location
    Victoria, Australia
    Posts
    4,117
    Mentioned
    28 Post(s)
    Tagged
    2 Thread(s)
    You should definitely remove one of the libraries if you can.

  21. #21
    SitePoint Enthusiast
    Join Date
    Apr 2012
    Posts
    96
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I don't think that'll possible as mybb (the forum software on my site) had it in by default, so if I were to remove it, I don't know it'll mess up.

  22. #22
    padawan silver trophybronze trophy markbrown4's Avatar
    Join Date
    Jul 2006
    Location
    Victoria, Australia
    Posts
    4,117
    Mentioned
    28 Post(s)
    Tagged
    2 Thread(s)
    Yeah, it's probably not worth it if you have a large amount of javascript written for both libraries. But if you're just starting to add jQuery it may be worth adding Prototype code instead.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •