SitePoint Sponsor

User Tag List

Results 1 to 12 of 12
  1. #1
    SitePoint Member
    Join Date
    Jun 2010
    Posts
    5
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Trouble getting started with JQuery

    I and trying to get started with JQuery “jQuery: Novice to Ninja “ But I cannot get the program to recognize the jQuery command.

    <!doctype html>
    <html>
    <head>
    <title> JQuery_Test </title>
    <script type='text/javascript' src='jquery-1.2.6-min.js'></script>
    <script type='text/javascript' src='script.js'></script>
    </head>
    <body>
    $(function() { alert('Ready to do your bidding!'); });
    <script>
    alert("Hello World.");
    </script>
    </body>
    </html>

    The Script "Hello World" works fine but the JQuery function 'Ready to do your bidding!' just prints the line a though it was plane text. The file 'jquery-1.2.6-min.js' is in the same folder as the html file “JQuery_Test.html”.

    To see the program on the web go to http://www.wantadavenport.com/Jq_test/JQuery_Test.html

    Any help anyone can give would be most appreciated.

    Roy

    J. Roy Davenport
    <snip/>
    Last edited by ScallioXTX; Aug 4, 2010 at 10:35. Reason: removed fake signature - wait a total of 90 days to expire to avail of a signature

  2. #2
    SitePoint Wizard bronze trophy Immerse's Avatar
    Join Date
    Mar 2006
    Location
    Netherlands
    Posts
    1,661
    Mentioned
    7 Post(s)
    Tagged
    1 Thread(s)
    The line containing your jQuery code should be in script tags too:

    Code html:
     
    <script type="text/javascript">
    $(function() { alert('Ready to do your bidding!'); });
    alert("Hello World.");
    </script>

  3. #3
    SitePoint Member
    Join Date
    Jun 2010
    Posts
    5
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    First thank you for your help.

    I made the changes as you suggested but now I just get a blank screen when I run the program in either Firefox or IE.


    <!doctype html>
    <html>
    <head>
    <title> JQuery_Test </title>
    <script type='text/javascript' src='jquery-1.2.6-min.js'></script>
    <script type='text/javascript' src='script.js'></script>
    </head>
    <body>
    <script type="text/javascript">
    $(function() { alert('Ready to do your bidding!'); });
    alert("Hello World_xx");
    </script>
    </body>
    </html>

  4. #4
    SitePoint Wizard bronze trophy Immerse's Avatar
    Join Date
    Mar 2006
    Location
    Netherlands
    Posts
    1,661
    Mentioned
    7 Post(s)
    Tagged
    1 Thread(s)
    Do you get any error messages?

    And the page will be blank, there's no content in it

  5. #5
    Utopia, Inc. silver trophy
    ScallioXTX's Avatar
    Join Date
    Aug 2008
    Location
    The Netherlands
    Posts
    9,096
    Mentioned
    153 Post(s)
    Tagged
    2 Thread(s)
    A few general comments to the HTML if I may:

    Code:
    <!doctype html>
    Do you intend to use HTML5? If not, use your favorite search engine to search for "doctype"

    Code:
    <script type='text/javascript' src='jquery-1.2.6-min.js'></script>
    <script type='text/javascript' src='script.js'></script>
    Single quotes are not allowed for attributes in HTML. It should be:
    Code:
    <script type="text/javascript" src="jquery-1.2.6-min.js"></script>
    <script type="text/javascript" src="script.js"></script>
    Code:
    <script type="text/javascript">
    $(function() { alert('Ready to do your bidding!'); });
    alert("Hello World_xx");
    </script>
    It's good practice (in my opinion at least) to put some comments around javascript such that (very) old browsers don't output it plaintext. Like so:

    Code:
    <script type="text/javascript">
    /*<![CDATA[*/
    $(function() { alert('Ready to do your bidding!'); });
    alert("Hello World_xx");
    /*]]>*/
    </script>
    Browsers that do not understand javascript won't show it, because it's enclosed in <![CDATA[ ]]>, whereas browsers that do understand javascript will ignore this <![CDATA[ ]]> because it's in javascript comments



    PS. For the purpose of being able to follow the book it's probably a good idea to stick to jQuery 1.2.6 for now, but note that jQuery is currently on version 1.4.2
    Rémon - Hosting Advisor

    SitePoint forums will switch to Discourse soon! Make sure you're ready for it!

    Minimal Bookmarks Tree
    My Google Chrome extension: browsing bookmarks made easy

  6. #6
    SitePoint Member
    Join Date
    Jun 2010
    Posts
    5
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thank you so much for your help

    I think I did every thing you said (I think) and I still get a blank screen - no error code just a blank screen.

    View changes below.

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <html>
    <head>
    <title> JQuery_Test </title>
    <script type="text/javascript" src="jquery-1.2.6-min.js"></script>
    <script type="text/javascript" src="script.js"></script>
    </head>
    <body>
    <script type="text/javascript">
    /*<![CDATA[*/
    $(function() { alert('Ready to do your bidding!'); });
    alert("Hello World_xx");
    /*]]>*/
    </script>
    </body>
    </html>

  7. #7
    Utopia, Inc. silver trophy
    ScallioXTX's Avatar
    Join Date
    Aug 2008
    Location
    The Netherlands
    Posts
    9,096
    Mentioned
    153 Post(s)
    Tagged
    2 Thread(s)
    The screen should be blank, but you should get a popup with the text "Ready to do your bidding!"

    If not, I'd say the file jquery-1.2.6-min.js doesn't exist or is spelled slightly differently (my favorite mistake to make ...)
    Rémon - Hosting Advisor

    SitePoint forums will switch to Discourse soon! Make sure you're ready for it!

    Minimal Bookmarks Tree
    My Google Chrome extension: browsing bookmarks made easy

  8. #8
    SitePoint Member
    Join Date
    Jun 2010
    Posts
    5
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I did find the jquery-1.2.6.min.js was spelled differently jquery-1.2.6-min.js
    note the '-' before min in place of a '.' before min
    I changed that but still a blank screen,and no pop-up or error code.


    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <html>
    <head>
    <title> JQuery_Test </title>
    <script type="text/javascript" src="jquery-1.2.6.min"></script>
    <script type="text/javascript" src="script.js"></script>
    </head>
    <body>
    <script type="text/javascript">
    /*<![CDATA[*/
    $(function() { alert('Ready to do your bidding!'); });
    alert("Hello World_xx");
    /*]]>*/
    </script>
    </body>
    </html>

  9. #9
    SitePoint Addict
    Join Date
    Dec 2008
    Location
    Brussels
    Posts
    377
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I guess there won't be a problem in the jquery script:
    <script type="text/javascript" src="jquery-1.2.6.min.js"></script>
    But you forgot to put ".js " at the end right now.

    But maybe there could be an error in the other script you're loading:
    <script type="text/javascript" src="script.js"></script>
    I don't know what that script does, maybe check aswel with a debugger.

  10. #10
    SitePoint Member
    Join Date
    Jun 2010
    Posts
    5
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thank you very much, it appears that you have found the last of several errors I made.

    What a difference a little js will do for you.
    I now have two pop-ups it surprised me though the "Hello World_xx" poped up first then the "Ready to do your bidding!"
    I guess when I learn more about jquery I'll understand why. I think I read somewhere that jquery doesn't do any thing until the program is finished loading. That way the script alert is acted upon when the program load that line.

    I think I know what happened: to make sure that the spelling was correct i copied and pasted but XP does not show the extension along with the file name, so when I copied I forgot to add the .js.

    once again thank you for your help.

  11. #11
    SitePoint Addict
    Join Date
    Dec 2008
    Location
    Brussels
    Posts
    377
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Nice to know it solved the problem. How such tiny mistakes give us all big heads. I have it all the time.
    Anyway, just started with JQuery aswel 10 days ago. It's a nice and easy thing! Keep on going!

  12. #12
    SitePoint Wizard bronze trophy Immerse's Avatar
    Join Date
    Mar 2006
    Location
    Netherlands
    Posts
    1,661
    Mentioned
    7 Post(s)
    Tagged
    1 Thread(s)
    Code javascript:
    $(function() { alert('Ready to do your bidding!'); });
    Put simply, this tells jQuery to run the supplied function when the document has finished loading (don't confuse that with page, which also includes images, css etc). So jQuery 'waits' until the </html> tag has been loaded, then it runs the function, showing your alert.


    Code javascript:
    alert("Hello World_xx");
    This tells javascript to open your alert immediately, whether the document's finished loading or not.


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
  •