Sharkn8do Sharkn8do - 11 days ago 7
jQuery Question

How To Load Jquery

So I have THIS FIDDLE

Which works how I want it to. But, the issue is I can not get it to work on my site. I have

$( ".total" ).change(function hello() {
140 Lines of code from fiddle
}



in between script tags in my body.

I have

<script src="/jquery-3.1.1.min.js">< /script>


in my head. I have the jquery downloaded, its in my public_html (godaddy hosting with linux cpanel) and you can see it's on my SITE
My body tag looks like this

<body onload="hello()">


and my code was literally copied and pasted from the fiddle. With the First Lines of the table looking like this

<label id="printchatbox" ></label>
<table>
<tr>
<td>
<input type="number" class="total" name='barrelwrap' value "<?=isset($_POST['barrelwrap']) ? htmlspecialchars($_POST['barrelwrap']) : '' ?>">
</td>
<td>Barrel Wrap 47"x31" </td>
<td id='barrelwrapPrice'>39.38 </td>
<tr>
<td>
<input type="number" class="total" name="smallcase" value "<?= isset($_POST['smallcase']) ? htmlspecialchars($_POST['smallcase']) : '' ?>">
</td>
<td>Case Card - Small 4.25"x11" </td>
<td id='smallcasePrice'>1.50 </td>
</tr>


The first lines of my script, again copies and pasted.

$( ".total" ).change(function hello() {
var barrelwrapInput = document.getElementsByName('barrelwrap')[0];
var smallcaseInput = document.getElementsByName('smallcase')[0];
var mediumcaseInput = document.getElementsByName('mediumcase')[0];
var largecaseInput = document.getElementsByName('largecase')[0];
var coolerclingInput = document.getElementsByName('coolercling')[0];
var poletopperInput = document.getElementsByName('poletopper')[0];
var smallflyerInput = document.getElementsByName('smallflyer')[0];
var largerflyerInput = document.getElementsByName('largerflyer')[0];
var shelftagInput = document.getElementsByName('shelftag')[0];
var stanchionInput = document.getElementsByName('stanchion')[0];
var smallwindowInput = document.getElementsByName('smallwindow')[0];


Anyone have any idea what i've done wrong?

Answer

Even though the file is on your site, you may not be referencing it correctly. Different servers have different configurations and requirements that may affect whether these reference rules work or not.

For example, GoDaddy web hosting often provides an "httpDocs" folder at the root of a web site. You don't have to use it, but that's where their servers expect the site's content to be placed. Not following those rules result in relative paths not working.

But, before we get further into this. Have you tried linking to JQuery from a hosted source, like:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

If using this works, then the problem is definitely your reference to your local JQuery file. If that's the case, then read on...

If the resource you need is part of the same web site (not talking about folder structure here, talking about domain), you should use relative paths, where:

a. fileName.ext is all you need if the resource is in the same folder as the currently loaded document.

b. folderName/fileName.ext is what you need if the file you need is in a sub-folder of the current folder that the loaded document is in.

c. ../fileName.ext is what to use if the file you need is one directory higher than the current document's folder. The ../ can be repeated if you need to go up more than one level (i.e. ../../fileName.ext).

d. /fileNameext or /folderName/fileName.ext indicates that the file or folder specified should be found starting from the root of the web site, regardless of where the current document is. If the resource you need is located on another domain, you'd use an Absolute Path (http://something.something/file.ext).

e. DO NOT use absolute paths for local resources! This may work but causes the domain name to have to be resolved again, resulting in a longer load time.

WARNING: Many servers are hosted on operating systems the have case-sensitive file systems, so always refer to files and folders in the same case that is actually used. Again, not doing this may work for you locally, while you develop (because you haven't moved the files to the remote server yet), but don't let that lull you into thinking that case doesn't matter.