SitePoint Sponsor

User Tag List

Results 1 to 15 of 15
  1. #1
    SitePoint Member
    Join Date
    Aug 2013
    Posts
    7
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Javascript not working in HTML5

    Hi,

    It seems the Javascript doesnt work in HTML5. Details as follows:
    1) HTML4
    In http://www.brilliant-storage.com.hk/QA.html , whenever you click a question, the corresponding answer will appear in the bottom.

    2) HTML5
    In http://www.self-storage-hk.com/test/storageQA.htm , whenever you click a question,the answer remains the answer to question 1.

    The content of faq.js is the same in the above cases. They are:
    function showdiv(id) {
    var qaCount = $(".qalist dt").length;
    for (var i = 0; i < qaCount; i++) {
    if (i == id-1) {
    if ($(".qalist dd").eq(i).is(":visible")) {
    $(".qalist dd").eq(i).hide();
    } else {
    $(".qalist dd").eq(i).show();
    }
    } else {
    $(".qalist dd").eq(i).hide();
    }
    }
    }

    function showQA(id) {
    var qaCount = $(".qalist dl").length;
    for (var i = 0; i < qaCount; i++) {
    if (i == id) {
    if ($(".qalist dl").eq(i).is(":visible")) {
    $(".qalist dl").eq(i).hide();
    } else {
    $(".qalist dl").eq(i).show();
    }
    } else {
    $(".qalist dl").eq(i).hide();
    }
    }
    }

    I cant figure out where is the problem. Can someone kindly give me an advice ?

    Thanks in advance.

    Regards,

    Tony

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    23,598
    Mentioned
    411 Post(s)
    Tagged
    6 Thread(s)
    The script calls on the $() function, which is usually a jQuery function. You have jQuery loaded on the page where it's working, but you don't have the jQuery library on the page where it's not working. So the error message is "$ is not defined ".

  3. #3
    SitePoint Member
    Join Date
    Aug 2013
    Posts
    7
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ralph.m View Post
    The script calls on the $() function, which is usually a jQuery function. You have jQuery loaded on the page where it's working, but you don't have the jQuery library on the page where it's not working. So the error message is "$ is not defined ".
    Hi Ralph,

    Thanks very much for the information.
    As I dont have any knowledge in javascripts & jQuery, can you please tell me how can I have the jQuery loaded on the page where it's not working.

    Best Regards,

    Tony

  4. #4
    SitePoint Member
    Join Date
    Aug 2013
    Posts
    7
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi Ralph,

    Thanks for the information.
    I search the internet & then inert the line:
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
    and problem fixed.

    Best Regards,
    Tony

  5. #5
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,604
    Mentioned
    24 Post(s)
    Tagged
    1 Thread(s)
    If you don't know JavaScript then why are you trying to use jQuery. You need an intermediate level knowledge of JavaScript to use jQuery properly.
    Stephen J Chapman

    javascriptexample.net, Book Reviews, follow me on Twitter
    HTML Help, CSS Help, JavaScript Help, PHP/mySQL Help, blog
    <input name="html5" type="text" required pattern="^$">

  6. #6
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    23,598
    Mentioned
    411 Post(s)
    Tagged
    6 Thread(s)
    Glad that helped, Tony.

    Quote Originally Posted by felgall View Post
    If you don't know JavaScript then why are you trying to use jQuery.
    Are you asking this of Tony, or of the 90+% of web designers out there? They are using jQuery because they don't know JavaScript.

  7. #7
    SitePoint Member
    Join Date
    Aug 2013
    Posts
    7
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Angry

    Quote Originally Posted by felgall View Post
    If you don't know JavaScript then why are you trying to use jQuery. You need an intermediate level knowledge of JavaScript to use jQuery properly.
    Bad advice !

    If I works like you,I cant do anything.
    Utilizing the knowledge provided in the internet & asking experts like Ralph in forums, I can almost finish writing my responsive website even I dont have any knowledge in HTML5,css,javascript & jQuery !!!

    Thanks
    Tony

  8. #8
    SitePoint Wizard bronze trophy chris.upjohn's Avatar
    Join Date
    Apr 2010
    Location
    Melbourne, AU
    Posts
    2,183
    Mentioned
    17 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by tonyliu View Post
    Bad advice !

    If I works like you,I cant do anything.
    Utilizing the knowledge provided in the internet & asking experts like Ralph in forums, I can almost finish writing my responsive website even I dont have any knowledge in HTML5,css,javascript & jQuery !!!

    Thanks
    Tony
    As much as you may not like this reply I have to agree with felgall as you will eventually find yourself needing to code something that jQuery doesn't do such as data management, of course this forum will be here to help but I would strongly recommend you visit coding tutorial websites that have videos as requesting help from others will only get you so far before you get stuck again.
    Blog/Portfolio | Evolution Xtreme | DFG Design | DFG Hosting | CSS-Tricks | Stack Overflow | Paul Irish
    Having lame problems with your code? Let us help by using a jsFiddle

  9. #9
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,604
    Mentioned
    24 Post(s)
    Tagged
    1 Thread(s)
    I have seen lots of code people are having trouble with that consist of 20+ lines of JQuery calls where five or six lines of ordinary JavaScript would do the same thing and actually work.

    I have also seen people asking how to do things with JQuery that are really basic JavaScript commands.

    JQuery is an advanced piece of JavaScript code - you need to have a good knowledge of JavaScript in order to be able to use it.

    Sure some people can get some things to work in JQuery without knowing JavaScript just as some people manage to create web pages without knowing any HTML. It is all fine until something doesn't work and then they don't know enough to fix it plus their code is such a mess that to fix it properly will require a complete rewrite. By all means use these tools without having learnt the basics but expect that when you ask for help when something doesn't work that the responses you get are to rewrite it properly - since most of the problems these people have can't happen if the code is written properly.

    If you can't get your JQuery to work and you don't know JavaScript then the first step to fix your problem is to learn JavaScript.
    Stephen J Chapman

    javascriptexample.net, Book Reviews, follow me on Twitter
    HTML Help, CSS Help, JavaScript Help, PHP/mySQL Help, blog
    <input name="html5" type="text" required pattern="^$">

  10. #10
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,604
    Mentioned
    24 Post(s)
    Tagged
    1 Thread(s)
    Just to make it a bit clearer for the web designers I'll use a corresponding example.

    I know red from blue from green so I can create web pages that use colours. The web pages don't quite liik right somehow because the colours seem to clash. Can one of you wseb designers who believe in using tools without having to learn the basics first please provide me with all the necessary alterations to the colours to get them to work together properly. I want to be able to use colours on my page without having to learn anything about colour theory (or whatever that web designer stuff is called).
    Now web designers - what would your response to such a query be? Unless your response would be to spend time doing all the work fixing the colours so that the person posting the question doesn't have to learn web design then don't expect a web developer to fix your script for you rather than telling you to learn the basics (in this case JavaScript) first. (Oh and if you really do think that people should be able to use JQuery without knowing JavaScript and then get someone to fix it for them free of charge when it doesn't work then please take a look at my JavaScript web site and write a new stylesheet for me to fix the colours and layout).
    Stephen J Chapman

    javascriptexample.net, Book Reviews, follow me on Twitter
    HTML Help, CSS Help, JavaScript Help, PHP/mySQL Help, blog
    <input name="html5" type="text" required pattern="^$">

  11. #11
    SitePoint Zealot moretea's Avatar
    Join Date
    Jun 2004
    Location
    Texas, USA
    Posts
    117
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Touché!

  12. #12
    SitePoint Member
    Join Date
    Aug 2013
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by felgall View Post
    If you don't know JavaScript then why are you trying to use jQuery. You need an intermediate level knowledge of JavaScript to use jQuery properly.
    JQuery is often marketed as a quick way to build dynamic elements in your website, even if you aren't a JS developer to begin with. Many designers skip over raw JS because JQuery (and JQuery UI) comes pre-packaged with most of the common functionality you see on modern websites / web apps. It's a shortcut for a lot of people because it's simpler. The same way Bootstrap is often a shortcut for developers who don't want to work their way through CSS and responsive design, and would rather let a framework do it for them. Same things goes for Wordpress and PHP. I can crank out a dozen sites using Wordpress without knowing any PHP at all. In a sense, JQuery gives designers that same kind of "copy + paste" development ability that Wordpress does.

    They're lose examples, but it's the nature of the industry. More and more people are being asked to overlap between disciplines, and the quickest way to turn out a product is to use something that gives you a leg up. Is it the right way to do things? Not necessarily, but as someone who started in JQuery before I back-tracked into raw JS, I can certainly say that sometimes the cart needs to come before the horse.

    Overall, I do agree with you that in an ideal scenario, people ought to learn JS before JQuery. However, it's just not feasible for everyone.

    Note: Sorry if this reads poorly. Running low on coffee this morning.

  13. #13
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,604
    Mentioned
    24 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by jaydub View Post
    Overall, I do agree with you that in an ideal scenario, people ought to learn JS before JQuery. However, it's just not feasible for everyone.
    There is nothing wrong with a web designer using JQuery as a quick way to add some functionality as long as they realise that it is not necessarily going to be the most efficient way to achieve the result and that if what they have doesn't work that they are likely to have to learn JavaScript to be able to fix it properly. That's just like a web developer throwing together some CSS and images that kind of work for their site but which are nowhere near as effective or efficient as could be produced by a web designer.

    I have seen lots of situations where someone asks how to fix 20 lines of JQuery calls that are intended to do what could be done in 5 or 6 ordinary JavaScript statements without JQuery. Obviously in those situations the answer is to completely redo the code. I've also seen lots of cases where someone asks for help with 5 or 6 lines of JQuery calls where 20 l;ines of ordinary could do the same thing. Unless Jquery is being used elsewhere in the page that is another situation where it is better to scrap the JQuery and start over. JQuery is a JavaScript library - it is not intended to replace ordinary JavaScript commands and trying to use it that way will therefore not work.
    Stephen J Chapman

    javascriptexample.net, Book Reviews, follow me on Twitter
    HTML Help, CSS Help, JavaScript Help, PHP/mySQL Help, blog
    <input name="html5" type="text" required pattern="^$">

  14. #14
    Grüße aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,313
    Mentioned
    178 Post(s)
    Tagged
    9 Thread(s)
    As felgall says :

    20091116-so-large.gif

  15. #15
    SitePoint Member
    Join Date
    Aug 2013
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by felgall View Post
    There is nothing wrong with a web designer using JQuery as a quick way to add some functionality as long as they realise that it is not necessarily going to be the most efficient way to achieve the result and that if what they have doesn't work that they are likely to have to learn JavaScript to be able to fix it properly. That's just like a web developer throwing together some CSS and images that kind of work for their site but which are nowhere near as effective or efficient as could be produced by a web designer.
    'Efficient' is subjective in this instance. If you know some JQuery but are unfamiliar with vanilla JS and need to add some quick functionality to a site, then adding JQuery in place of vanilla is likely to be the most efficient way to achieve the desired result. You're weighing the value of reduced code against the time needed to learn the method of how to implement said code. Tens, perhaps hundreds of minutes of learning something new all to save yourself a few milliseconds of page load time.

    More often than not, heavy JQuery users are going to learn some vanilla JS along the way. It's a common 'side effect' of JQuery development. While JQuery might not be 'JavaScript' in the truest sense, it doesn't mean that using it is wrong or that there ought to be some sort of "You need to know X amount of vanilla to ride" sign tacked on the entry gate.


Tags for this Thread

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
  •