How do I program an HTML page to update text imported from a text file on button click?

Question

I'm been having a lot of trouble figuring out a way to update the text in a section without having to reload the page. What I would like the code to do is update the text and a picture in a section (id="section2" below) when you click on one of the tabs.

What I want the page to do when you click on one of the tabs is to load text (and in the future a .jpg too) from a local .txt file. As of right now, the changeText function updates the text but only when you manually type in the text.

From my code below this works:

$('#section-text').html("test of text1");

but what I would like to do would be to load text in from a .txt file called "text1.txt"

$('#section-text').html("text1.txt");

I'm just starting to venture into the web programming so I have very little experience with JavaScript and JQuery so most of the stuff that I've shown below is trial and error from other sites. I've tried many other methods that I've found online but with very little success. So far this is the closest I've got to my ideal solution, but I find if I just copy and paste my text it loses formatting.

Any help would be greatly appreciated. And if people have any suggestions on cleaning up some of the code it would also be very welcome.

Here is my HTML:



   
  

  Test Page

  

  



  
  
    Example 1
    Example 2
    Example 3

The CSS:

AJAX attempt:

var reader = new XMLHttpRequest() || new ActiveXObject('MSXML2.XMLHTTP');

function loadFile() {
  reader.open('GET', 'text1.txt', true); 
  reader.onreadystatechange = displayContents;
  reader.send(null);
}

function displayContents() {
  if(reader.readyState==4) {
    var el = document.getElementById('page_content');
    el.innerHTML = reader.responseText;
  }
}

UPDATED - My Solution:

For those of you who run into the same problem as I did here is the solution I used. After a lot of searching and asking around I used the display option in my css file. So add the following to your css file:

.hidden { display: none; }
.unhidden { display: block; }

In my case I wanted to update some text and a picture with a click on each tab so I added the following script to my html:

and here is the html script that I used:


  
    
    
        Example 1 
        Example 2   
      
    

  
    
       Text for Example 1 
    

    
       Add your text here for Text 2

DinoMyte · Accepted Answer

There are bunch of things you would need to do. Following is a mockup that would help you understand how you can get the text from an external file. Since you are more looking at a configuration approach, I would recomment using an xml file instead of text ( but the choice is upto you ).

// Register click event for every 'li' element
$('li').click(function()
{
    var response = '';
    // grab the id of the 'li' for lookup
    var value = $(this).attr("id");
    $.ajax({
        url: "https://url/xml/test.xml", // Check for the structure below
        dataType: "xml",
        success: function(data) {            
              xmlDoc = $.parseXML(data);             
              $(xmlDoc).find("id").each(function ()
              {
                  if($(this).text() == value)
                  {
                      $("#section-text").text($(this).find("title").text());
   $(".Centered").attr("src",$(this).find("title").text());                      
                  }
              });     
        }
    }); 
});

// structure of text file as xml

"Example1Text Of Example 1images/example1Image.imgExample2Text Of Example 2images/example2Image.img",

http://jsfiddle.net/gcfLso5s/4/

I would also recommend reading some articles on jquery and ajax to enhance the understanding on how it works.

Let me know if you got any questions.

How do I program an HTML page to update text imported from a text file on button click?

Answers (2)

Related Questions