Solved

Javascript stopped working?

Posted on 2014-12-26
11
219 Views
Last Modified: 2014-12-26
Hi
On this page I have a form that works out some values for you
http://www.petenetlive.com/KB/Article/0000903.htm

Its stopped working and I dont know why? (I know nothing about Javascript). Can anyone see why its not working?


Pete
0
Comment
Question by:Pete Long
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 6
  • 4
11 Comments
 
LVL 57

Author Comment

by:Pete Long
ID: 40518486
0
 
LVL 30

Expert Comment

by:Alexandre Simões
ID: 40518487
I don't know what exactly isn't working but from the dev tools I see that you have a couple of errors.

I would recommend you to remove the async attribute from the jquery and lightbox script blocks.
Using async will not guarantee the scripts dependency so in this case, lightbox apparently loads faster than jquery causing unexpected behavior.

I see that you use async later on for google ads and there is a perfect scenario to use it as it's a stand alone script.
0
 
LVL 30

Expert Comment

by:Alexandre Simões
ID: 40518491
Also you have this script block:
<script language="JavaScript">
<!--
function $(id) { return document.getElementById(id); };

function conv(GB){
    var bytes = GB.value * Math.pow(1024,3);
    $("ex10").value = bytes / 32;
    $("ex07").value = bytes / 8;
}
//-->
</script>

Open in new window

What are those html comment tags doing inside a script block?
Remove them so it becomes like:
<script language="JavaScript">
function $(id) { return document.getElementById(id); };

function conv(GB){
    var bytes = GB.value * Math.pow(1024,3);
    $("ex10").value = bytes / 32;
    $("ex07").value = bytes / 8;
}
</script>

Open in new window

0
PeopleSoft Has Never Been Easier

PeopleSoft Adoption Made Smooth & Simple!

On-The-Job Training Is made Intuitive & Easy With WalkMe's On-Screen Guidance Tool.  Claim Your Free WalkMe Account Now

 
LVL 30

Accepted Solution

by:
Alexandre Simões earned 500 total points
ID: 40518492
And I just realized another major error... why are you overriding the $ sign with a function to return an element by id?
Replace the whole block by this:
<script language="JavaScript">
function conv(GB){
    var bytes = GB.value * Math.pow(1024,3);
    $("#ex10").val(bytes / 32);
    $("#ex07").val(bytes / 8);
}
</script>

Open in new window

0
 
LVL 57

Author Comment

by:Pete Long
ID: 40518499
Hi Alexandre Simões

Thanks for your responses, I've duplicated the page and changed the code as per your last post, it appears to be working  :)
http://www.petenetlive.com/KB/Article/0000903test.htm
0
 
LVL 30

Expert Comment

by:Alexandre Simões
ID: 40518504
Yep, looks better :)

Still you didn't remove the async attribute from the jquery and lightbox script blocks. I strongly suggest you to do it.
0
 
LVL 57

Author Comment

by:Pete Long
ID: 40518509
I did that because Google Analytics was complaining that I needed to put that in as the code was slowing down the page?
0
 
LVL 30

Expert Comment

by:Alexandre Simões
ID: 40518532
I saw that you don't know javascript but to understand this it requires a bit of knowledge...

So as Google Analytics says, it kind of is because javascript is a blocking task.
When the HTML parser reaches a script block the HTML rendering stops and the contents of the script block (or the referenced file) is sent to be processed by the javascript engine.
The HTML parsing will only resume when the javascript engine processing is finished.
This means that if you're referencing a javascript file (like jquery) you need to wait for it to be downloaded and parsed, only after the HTML can continue to be parsed.

Async attribute kind of mitigates this problem but only by the time it takes to load the file. The javascript processing time will still block the HTML parsing.

Now the main problem in using async with jquery is that other javascript files (like lightbox) deppend on jquery and they should only be loaded and executed after jquery is already loaded and executed.
If this doesn't happen, you'll be presented with kind of intermitent errors. They are intermitent because some times one file might load faster, others slower due to different factors causing the error or not.

Another thing to consider is that the browser will only load them once, after that the browser will cache them and it will be super fast to use them.

So bottom line, if you want to optimize this page, there's a lot more to consider than these two script blocks.
Drop the async from jquery and lightbox just to avoid unexpected and/or intermitent errors :)
0
 
LVL 57

Author Comment

by:Pete Long
ID: 40518541
Hi Alexandre

Thanks for the explanation, and taking the time to point that out, I will remove the async from those two :)

Pete
0
 
LVL 30

Expert Comment

by:Alexandre Simões
ID: 40518580
Just as a final note and if you have to deal with javascript, take the time to learn it.
Not only the language itself but also (and very importantly) how it interacts with its surroundings.

It's really easy to start with javascript but very hard to master it.

The following books will put you in the right track.
After mastering javascript you can use any of the "fancy" javascript frameworks actually knowing what and how they do it.

Javascript: The good parts
High performance javascript

Cheers!
0
 
LVL 70

Expert Comment

by:Jason C. Levine
ID: 40518720
This is a great answer.  Nicely done, Alexandre.
0

Featured Post

On Demand Webinar - Networking for the Cloud Era

This webinar discusses:
-Common barriers companies experience when moving to the cloud
-How SD-WAN changes the way we look at networks
-Best practices customers should employ moving forward with cloud migration
-What happens behind the scenes of SteelConnect’s one-click button

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

This article discusses how to create an extensible mechanism for linked drop downs.
This article discusses how to implement server side field validation and display customized error messages to the client.
The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…
HTML5 has deprecated a few of the older ways of showing media as well as offering up a new way to create games and animations. Audio, video, and canvas are just a few of the adjustments made between XHTML and HTML5. As we learned in our last micr…

752 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question