Javascript help. code working on local server but not when uploaded to webhost?

[kipl20]

Hi,

I have created a site and on one page it uses 2 divs side by side to display text information. in the left hand div it contains 8 links. these links when clicked load up text stored in separate text files and display it in the right hand div.

The code below was working when i ran it from my mac but when i try to load it off the webhost it fails to execute.

$(document).ready(function() {

	  $("#mc").click(function() {
	    $("#innertext").load('mc.txt');
	  });

         $("#sd").click(function() {
	   $("#innertext").load('sd.txt');
	 });

         $("#ma").click(function() {
	  $("#innertext").load('ma.txt');
	 });

	$("#rtm").click(function() {
	$("#innertext").load('rtm.txt');
	});

	$("#cm").click(function() {
	$("#innertext").load('cm.txt');
	});

	$("#r").click(function() {
	$("#innertext").html('r.txt');
	});

	$("#bp").click(function() {
	$("#innertext").load('bp.txt');
	});

	$("#pc").click(function() {
	$("#innertext").load('pc.txt');
	});

});

<div class="wrapper p2">
                        <ul class="list1 col-1">
                          <li>&gt; <a href="javascript:void(0);"  onclick="function("mc");" id="mc">Consultancy</a></li>
                          <li>&gt; <a href="javascript:void(0);" onclick="function("sd"); id="sd">Strategy</a></li>
                          <li>&gt; <a href="javascript:void(0);" onclick="function("ma"); id="ma">Market Assessment</a></li>
                          <li>&gt; <a href="javascript:void(0);" onclick="function("rtm"); id="rtm">Routes to Market</a></li>
                        </ul>
                        <ul class="list1 col-2">
                          <li>&gt; <a href="javascript:void(0);" onclick="function("cm"); id="cm">Change management</a></li>
                          <li>&gt; <a href="javascript:void(0);" onclick="function("r"); id="r">Restructuring</a></li>
                          <li>&gt; <a href="javascript:void(0);" onclick="function("bp"); id="bp">Planning</a></li>
                          <li>&gt; <a href="javascript:void(0);" onclick="function("pc"); id="pc">Project management</a></li>
                        </ul>
                      </div>

here is a link to the page on the webhost--
http://herkes.host56.com/index-2.html

Any ideas to why this does not work? any help is appreciated

[almostbob]

look at your code in the post above, color highlighting shows the problems
you have doublequotes inside double quotes, does not open a new set of quotes, closes first set "open.("closed"open)"closed
replace the innner sets of dquotes with single quotes

<li>&gt; <a href="javascript:void(0);"  onclick="function("mc");" id="mc">Consultancy</a></li>

looks better as

<li>&gt; <a href="javascript:void(0);"  onclick="function('mc');" id="mc">Consultancy</a></li>

get a code highlighting editor, these type of issues show up in development,

sometimes it is only required to turn code highlighting on, in the editor being used,

[kipl20]

look at your code in the post above, color highlighting shows the problems
you have doublequotes inside double quotes, does not open a new set of quotes, closes first set "open.("closed"open)"closed
replace the innner sets of dquotes with single quotes

<li>&gt; <a href="javascript:void(0);"  onclick="function("mc");" id="mc">Consultancy</a></li>

looks better as

<li>&gt; <a href="javascript:void(0);"  onclick="function('mc');" id="mc">Consultancy</a></li>

get a code highlighting editor, these type of issues show up in development,

sometimes it is only required to turn code highlighting on, in the editor being used,

Hi,

thanks for your reply but i have changed those quotes and still nothing.

i dont understand why it works running it from my local machine and then not when its uploaded to the webhost?

is there something wrong with the javascript itself? maybe with where the textfiles are held or something?

im tearing my hair out because it works on the local machine so its really confusing

[Airshow]

Kipl,

Your code should work on the server and will do so if the .txt files have been uploaded and have the same relative path as those on your own computer.

Standard unix permissions after FTP upload (644) appear to be adequate. I just tested my code (below) from a remote (unix) server and it worked fine. I can see no reason why your code should not work too (with Bob's corrections).

Both your Javascript and your HTML can be significantly simplified as follows :

$(document).ready(function() {
	function loadFile(container, filename){
		// loadFile forms a closure in which the fully resolved filename is remembered,
		// thus avoiding the erroneous use of loop counter i later (when user clicks).
		return function(){
			$(container).load(filename);
			return false;//suppress normal href behaviour of links
		};
	}
	var ids = ["mc","sd","ma","rtm","cm","r","bp","pc"];
	for(var i=0; i<ids.length; i++) {
		$('#'+ids[i]).click(loadFile("#innertext", ids[i]+'.txt'));
	}
});

<div class="wrapper p2">
	<ul class="list1 col-1">
		<li>&gt; <a href="" id="mc">Consultancy</a></li>
		<li>&gt; <a href="" id="sd">Strategy</a></li>
		<li>&gt; <a href="" id="ma">Market Assessment</a></li>
		<li>&gt; <a href="" id="rtm">Routes to Market</a></li>
	</ul>
	<ul class="list1 col-2">
		<li>&gt; <a href="" id="cm">Change management</a></li>
		<li>&gt; <a href="" id="r">Restructuring</a></li>
		<li>&gt; <a href="" id="bp">Planning</a></li>
		<li>&gt; <a href="" id="pc">Project management</a></li>
	</ul>
</div>

NOTES:
1. This degree of simplification is possible because your .txt files have the same filenames as your link ids. That said, only a slight modification would be necessary if the filenames and ids were to differ.
2. If it was intentional that "Restructuring" should be treated slightly differently (with $("#innertext").html('r.txt'); rather than $("#innertext").load('r.txt'); ), then you may need to handle it as an exception. There are several ways in which this can be done.

Airshow

[almostbob]

look also at line 5 of you html there is an odd number of dquotes there

[Airshow]

All the onclick="function("xx");" handlers can be safely removed because they are overridden by the handlers attached in $(document).ready .

All the href="javascript:void(0);" attributes can be reduced to href="" by ensuring that false is returned by the onclick handler.

(Both as per my suggested simplification).

Airshow

[Lee Turner]

I'd check the FTP software is uploading the file properly also. I've seen it before... if you view the source through a browser and find all the code in one long line, that'll be the problem. Use a different FTP client and make sure the source shows the proper line breaks.