Jump to content
Larry Ullman's Book Forums

Recommended Posts

Hi Larry,

 

After moving along through the chapter, I had a generic question.  For the calculator.js and calculator.html, should my webpage still run even though I do not have calculator.php linked to the HTML? 

 

The code is exactly how the book laid out, but when I attempt to test the calculator in a browser and press "Calculate!" I receive a message that calculator.php does not exist and the request cannot be completed.

 

In essence, my question is "Is there something in the browser (Mercury Firefox) that is not loading properly or installed?" or "Does the HTML need both the php and JS to run?".  I am currently under the assumption that JS is separate from PHP and can essentially take over the functionality of PHP but keep the requests on the client side.

 

Thanks!

Share this post


Link to post
Share on other sites

You are correct in most cases, but when it comes to Ajax request, you need the PHP file to get the correct response from your request. This is not a browser issue, (most likely) and I would bet you'd get the same response using Opera, Chrome or Safari too.

Share this post


Link to post
Share on other sites

Okay.  Would having the <form action="calculator.php" ....> be taking over for the JS?  It seems like I cannot get a request through.

 

I did test the JS out using the test.html and test.js and that worked.  But, for this calculator problem, it seems like my JS is not even receiving a request.

Share this post


Link to post
Share on other sites

Ok. I have downloaded and checked the code now. Calculator.html should work without Calculator.php. There might be several reasons why this is not the case, thought.

 

1. Make sure you include the jQuery framework.

- Basicly make sure the "js" folder is located at the same path as Calculator.html. The easiest way to check this is to view the document source in Firefox (right click and find view source) and try to click the link to jquery.js. If that doesn't work, your browser won't be able to find the JS file neither. Move the folder or change your path until it works.2

 

2. Make sure you include calculator.js

- This is the file that "overloads" or progressively enhances the user experience. As with the jQuery.js file, make sure it's reachable for your browser, using the same methods.

 

If non of that solves the problem, try to download the book resources one more time and ask again if that doesn't work...

 

Within this file, you find a line looking like this:

// Assign an event handler to the form:
$('#calculator').submit(function() { 
...

That line will prevent your browser from doing a request to calculator.php, but will instead let the JavaScript do the calculation. However, If that line is not available (js file not found) or jQuery is not loaded (then $('#calculator') won't register the event handler correctly) the script will post to calculator.php in the end. That's what progressive enhanchement is all about.

 

3. The 404 message

- This is not the reason why your Javascript does not work. However, you still need that file as a fallback solution, should your JS fail or something along does line happen.

 

Make sure your file hierarchy looks along these lines

- calculator.html
- calculator.php
- js / jquery-1.6-1.min.js
- js / calculator.js

Hope that helps you out.

  • Upvote 1

Share this post


Link to post
Share on other sites

Thanks, Antonio, for the help.  These were great suggestions and lead me towards where the problem was occurring.  My calculator.js file had case insensitivity and either my variables did not match what was being called in the calculator.html file or the functions I was calling in the JS file were not properly called.

 

Ex.  Originally, I had

 

$('#taxP').addclass('error');

 

I then capitalized the 'C' in class throughout my JS file and it worked.

 

Are the built in functions case sensitive in JS or am I on the wrong track?

  • Upvote 1

Share this post


Link to post
Share on other sites

Yes, they are case sensitive. The easiest way to avoid problems with that is to download JS syntax highlighting to your IDE/Programming software, install Firebug in Firefox to catch any errors that way, to check your code using something like Jsbin.com (built in syntax highlighting) or by using jslint.com.

 

Glad you solved it. Nice work.

Share this post


Link to post
Share on other sites

1. Make sure you include the jQuery framework.

- Basicly make sure the "js" folder is located at the same path as Calculator.html. The easiest way to check this is to view the document source in Firefox (right click and find view source) and try to click the link to jquery.js. If that doesn't work, your browser won't be able to find the JS file neither. Move the folder or change your path until it works.2

 

>>>

 

Can I add something to this point? If, like me, you take the lazy option and use the supporting files you've downloaded from larryullman.com, make sure you change the jquery.js version number.

 

If you're basing calculator.html on test.html, you've already done it. But the supporting files refer to 1.6.1. I couldn't figure out why my calculator submission wasn't being intercepted by jQuery, and I suddenly remembered (thanks to this post) that my jQuery version was 1.11.0.

 

Yes, yes, I know. I shouldn't have taken the lazy option. Act in haste, repent at leisure. I'm repenting.

Share this post


Link to post
Share on other sites

That is a valid point, bluejay.

jQuery has changed a lot over its lifetime, and going from 1.6.x to 1.10.x will definitely make a difference in how things are coded.

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
Sign in to follow this  

×
×
  • Create New...