JavaScript

Ssaliss

So... I've been asked by a friend of my brother to make a website. I've got the basic functionality up-and-running, but he also wants the text on the website to change when certain links are clicked. Solved it through an onClick function call, but in order to make it a bit more manageable, I'd like the text inserted to be stored in an external file. While this could be solved by external scripting files, it'd also require the person maintaining the site to actually not make mistakes in them (which, quite frankly, I'm fairly certain will happen). What I'd like to do is to have the actual HTML code stored in an external file, and then have the JavaScript insert that text instead (so kinda like frames, but not really). Is this doable?

Rialorm

Erm, can you link an example because I am totally confused by what you are doing. This sounds very complicated for something that should not be.

If you want frame functionality, why not use an iframe? You can load the relevant page into there.

Tarkenton

http://stackoverflow.com/questions/6470567/jquery-load-txt-file-and-insert-into-div

http://stackoverflow.com/questions/13901899/how-can-i-insert-text-from-an-external-file-onto-a-div

Looks like these could get you started.

Ssaliss

Rialorm said:

Erm, can you link an example because I am totally confused by what you are doing. This sounds very complicated for something that should not be.

If you want frame functionality, why not use an iframe? You can load the relevant page into there.

I looked at using an iFrame, but a) I couldn't get it to work, and b) what little I managed to get working was rather ugly. What I want is:

main.html contains the basic framework of the page. A header, a footer, some links, etc.

part1.html and part2.html contains a chunk of html without the head and html tags.

scripts.js contains scripts to alter main.html using innerHtml. I've got that part working fine, but the code will be maintained by someone who doesn't know html and can basically only copy-and-paste, and I don't want to introduce scripting and string concatenations (even if it's only 'test'+'test') on him.

Ssaliss

Tarkenton said:

http://stackoverflow.com/questions/6470567/jquery-load-txt-file-and-insert-into-div

http://stackoverflow.com/questions/13901899/how-can-i-insert-text-from-an-external-file-onto-a-div

Looks like these could get you started.

Don't have time to play with it, but it seems to use ajax and jQuery (which I've never used). Is ajax and jQuery standard parts of JavaScript? I assume they're both client-side scripts? Not sure about the capabilities of the host he's using...

Tarkenton

Personally, in the past for such projects, I generally used PHP since most hosts support it.  

http://stackoverflow.com/questions/8198386/how-can-i-import-html-with-php

Ssaliss

Yeah, I've been considering moving it to PHP (assuming the host can actually deal with it... I don't know). It does make it a bit more complex though (although far more flexible).

Elanorwen

Ssaliss said:

Yeah, I've been considering moving it to PHP (assuming the host can actually deal with it... I don't know). It does make it a bit more complex though (although far more flexible).

Dunno, jQuery is a JavaScript framework... and ajax is part of JavaScript altogether. You won't exactly need to learn much in regards to making it work. Something like:

<script>
$(function() { // This is jQuery's equivalent of document.ready
  $("#link1").click(function() {  //This is jQuery's equivalent of onClick bound to an element with ID 'link1'
    $("#div1").load("/contents1.html"); // This is where the loading from an external file happens. As you can guess, it loads the file contents1.html from the server root directory into an element with id 'div1'
  });
})
</script>

EDIT: The load function also has a filter, so you can also do something like:

$("#div1").load("/extradata.html #paragraph1"); // This will load only the element with id 'paragraph1' from the file you're loading from, so you can use a single file to hold all your extra data.

Rialorm

I'd have gone with PHP and pull the content from a MySQL database, but if that is too complex I'd go with the jQuery solution. Just remember to import jQuery or link to Google's hosted version else you might sit there a while wondering why stuff does not work (been there, done that).

Tarkenton

Most hosts nowadays have PHP by default as part of their hosting package. I'd be really surprised if they don't. Honestly, you could just cut and paste the bit from the link with <?php echo file_get_contents('http://EXTERNAL_URL'); ?> it should work fine. Drop that bit of code wherever it is you want the "dynamic" html and link it out. Easy peasy. Edit: Curse you forum tags.

Tarkenton

Edit: Double post