How can you extract information from a text document and seamlessly incorporate it into an HTML webpage?

Question

How can you extract information from a text document and seamlessly incorporate it into an HTML webpage?

I am currently working with an HTML file structured like this..

<html>
<body>
<table border="1" cellpadding="5">
<tr>
<td>Some Fixed text here</td>
<td id="data">---here data as per values in external text file---</td>
</tr>
</table>
</html>

Within the same directory, I have a text file called data.txt alongside the index.html file.

My goal is to use scripts to read the text file and place specific innerHTML content in the id=data based on the values in the first character of the text file.

For example,

for 0 in the first character, innerHTML=

<div style="color:red; border:2px dotted blue;">Alpha</div>

for 1 in the first character, innerHTML=<div>Beta</div>

for 2 in the first character, innerHTML=

<div>Gamma<span>more text</span></div>

and so on...

I have attempted to implement various scripts using jQuery and AJAX, but they have not provided the desired results. Due to my limited knowledge of these technologies, I am struggling to identify the issue. Is there anyone who can assist me in creating a script using JavaScript or a similar language?

javascript jquery html css ajax

Answer 1

Answer №1

Here's a jQuery solution to check the first character of a plain text file:

$( function(){
    $.ajax({
        url: 'data.txt',
        type: 'get',
        success: function(data) {
            if (data.substr(0,1) == 0)
                {$("#data").html('<div style="color:red; border:2px dotted blue;">Alpha</div>');}
            if (data.substr(0,1) == 1)
                {$("#data").html('<div>Beta</div>');}
        },
    });
});

You can include additional conditions as needed for your specific requirements.

Note:

Ensure to include the jQuery library in your HTML document when using jQuery code:

<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>

Answer 2

Here's a jQuery solution to check the first character of a plain text file:

$( function(){
    $.ajax({
        url: 'data.txt',
        type: 'get',
        success: function(data) {
            if (data.substr(0,1) == 0)
                {$("#data").html('<div style="color:red; border:2px dotted blue;">Alpha</div>');}
            if (data.substr(0,1) == 1)
                {$("#data").html('<div>Beta</div>');}
        },
    });
});

You can include additional conditions as needed for your specific requirements.

Note:

Ensure to include the jQuery library in your HTML document when using jQuery code:

<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>

Answer 3

Answer №2

Read and save the content to a variable in JavaScript :

var content = new XMLHttpRequest();
content.open('GET', '/data.txt');
content.onreadystatechange = function() {
  alert(content.responseText);
}
content.send();

Alternatively, embed the content directly into the page using PHP (an easier option in my opinion) :

<div><p><?php include('data.txt'); ?></p></div>

Answer 4

Read and save the content to a variable in JavaScript :

var content = new XMLHttpRequest();
content.open('GET', '/data.txt');
content.onreadystatechange = function() {
  alert(content.responseText);
}
content.send();

Alternatively, embed the content directly into the page using PHP (an easier option in my opinion) :

<div><p><?php include('data.txt'); ?></p></div>

How can you extract information from a text document and seamlessly incorporate it into an HTML webpage?

Answer №1

Answer №2

Similar questions

refresh the page and submit a post to his own profile

How to effectively leverage useMediaQuery in material ui?

Deleting list items by clicking a button

Enliven the transition between grid sizes

Is it considered proper to initialize an empty array within the data object of a Vue.js component?

Decline the input according to the percentage

SVG Opacity Transitions seem to ignore the constraints of CSS rules and bounce chaotically beyond their designated boundaries

Finding the element in the HTML using selenium and Python

Sending state information through props in a Vuex environment

Exploring Angular 6: Unveiling the Secrets of Angular Specific Attributes

Retrieve an element within a jQuery each loop

The error occurs when Facebook and Twitter iframes are attempting to access and set 'document.domain'

Transform js into a more dynamic format to avoid redundancy when displaying items upon click

What purpose does the "io" cookie serve in Socket.IO?

Display a tooltip when the cursor hovers close to a line in D3 visualizations

How can we export data to excel using react-export-excel while ensuring certain columns are hidden?

Using PHPMailer and AJAX to attach a file to an email

Tips for fashionable dressing &

What causes the "Cannot read properties of undefined" error in Vue when an array is initialized and output is still being displayed?

Unable to transmit Props to Component - Fluctuating Behavior