Forum Home Lusternia.com Lore Wiki Vote! Forum Rules VOTE ON TMS!
Home› Life Outside of Lusternia› The Real World

JavaScript

SsalissSsaliss
in The Real World
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?
image

Comments

  • RialormRialorm
    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.
    image
    You have received a new honour! Congratulations! On this day, you have shown your willingness to ensure a bug-free Lusternia for everyone to enjoy. The face of Iosai the Anomaly unfolds before you, and within you grows the knowledge that you have earned the elusive and rare honour of membership in Her Order.
    Curio Exchange - A website to help with the trading of curio pieces in Lusternia.
  • TarkentonTarkenton Traitor Bear
    http://stackoverflow.com/questions/6470567/jquery-load-txt-file-and-insert-into-div

    Looks like these could get you started.
    image
  • SsalissSsaliss
    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.
    image
  • SsalissSsaliss
    Tarkenton said:
    http://stackoverflow.com/questions/6470567/jquery-load-txt-file-and-insert-into-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...
    image
  • TarkentonTarkenton Traitor Bear
    Personally, in the past for such projects, I generally used PHP since most hosts support it.  

    image
  • SsalissSsaliss
    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).
    image
  • ElanorwenElanorwen The White Falconess
    edited February 2014
    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.
    image

    Forgiveness is the fragrance that the violet sheds on the heel that has crushed it.
  • RialormRialorm
    edited February 2014
    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).
    image
    You have received a new honour! Congratulations! On this day, you have shown your willingness to ensure a bug-free Lusternia for everyone to enjoy. The face of Iosai the Anomaly unfolds before you, and within you grows the knowledge that you have earned the elusive and rare honour of membership in Her Order.
    Curio Exchange - A website to help with the trading of curio pieces in Lusternia.
  • TarkentonTarkenton Traitor Bear
    edited February 2014
    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.
    image
  • TarkentonTarkenton Traitor Bear
    edited February 2014
    Edit: Double post
    image
Sign In or Register to comment.