Reorganized page when refreshed #147277

Ethan-Mircheff · 2024-12-17T05:43:17Z

Ethan-Mircheff
Dec 17, 2024

Body

I am working on a website that will show 1 billion digits of pi (I know its not practical but I thought it would be fun), and I'm having a bug where it will sometimes load with the strings of text switched places, so it ends up looking like this:

instead of this:

This only happens sometimes, and is fixed when I reload the page, so I can't figure out what the issue is. Right now this is my code:

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>One Billion Digits of Pi</title>
  <style>
  body {
    font-size: 20px;
    font-family: "Trebuchet MS", Veranda, sans-serif;
    display: inline-block;
    margin: 10px;
  }
    
  .digits {
    display: inline-block;
    font-family: serif;
  }
  </style>
  <script src="https://code.jquery.com/jquery-3.7.1.js"></script>
</head>
<body>

<h1>One Billion Digits of Pi:</h1>
  <p id="digits"></p>
  
<script>
  $(document).ready(function() {
  var paragraph = $("#digits");
  var loadFiles = ["digits.html","digits2.html"];
  $.each(loadFiles, function(index, file) {
    $.get(file, function(data) {

      var tempDiv = $("<div>").html(data);
      var textContent = tempDiv.text();
      var textNoSpaces = textContent.replace(/\s+/g, "");
      
      paragraph.append(textNoSpaces);
    });
  });
});
</script>
</body>
</html>

If you want to take a closer look, [this](https://github.com/Ethan-Mircheff/pibillion) is my repository with all the files. Thanks in advance for the help!

Guidelines

I have read and understood this category's guidelines before making this post.

Answered by harmeetsingh11

Dec 18, 2024

Hi @Ethan-Mircheff ,

The issue you're encountering is likely due to how the two files (digits.html and digits2.html) are being loaded asynchronously with the $.get() method. Since both requests happen at the same time and you append their results to the same #digits paragraph, it's possible that the data from the files is not being appended in the correct order or at the correct positions, leading to the text appearing "switched."

Solution:

Sequential Loading: Instead of appending the content from both files simultaneously, load the second file only after the first one has finished loading. This way, the text is appended correctly.
You can achieve this by using $.get() within a callback …

View full answer

harmeetsingh11 · 2024-12-18T18:03:21Z

harmeetsingh11
Dec 18, 2024

Hi @Ethan-Mircheff ,

The issue you're encountering is likely due to how the two files (digits.html and digits2.html) are being loaded asynchronously with the $.get() method. Since both requests happen at the same time and you append their results to the same #digits paragraph, it's possible that the data from the files is not being appended in the correct order or at the correct positions, leading to the text appearing "switched."

Solution:

Sequential Loading: Instead of appending the content from both files simultaneously, load the second file only after the first one has finished loading. This way, the text is appended correctly.
You can achieve this by using $.get() within a callback function or using async/await with fetch(). Below are both ways.

Using callback function

Here's the modified code using $.get() with callbacks to ensure sequential loading:

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>One Billion Digits of Pi</title>
  <style>
    body {
      font-size: 20px;
      font-family: "Trebuchet MS", Veranda, sans-serif;
      display: inline-block;
      margin: 10px;
    }
    
    .digits {
      display: inline-block;
      font-family: serif;
    }
  </style>
  <script src="https://code.jquery.com/jquery-3.7.1.js"></script>
</head>
<body>

<h1>One Billion Digits of Pi:</h1>
  <p id="digits"></p>
  
<script>
  $(document).ready(function() {
    var paragraph = $("#digits");
    var loadFiles = ["digits.html", "digits2.html"];
    
    function loadNextFile(index) {
      if (index < loadFiles.length) {
        $.get(loadFiles[index], function(data) {
          var tempDiv = $("<div>").html(data);
          var textContent = tempDiv.text();
          var textNoSpaces = textContent.replace(/\s+/g, "");
          paragraph.append(textNoSpaces);
          
          // Load the next file after the current one is processed
          loadNextFile(index + 1);
        });
      }
    }

    // Start loading from the first file
    loadNextFile(0);
  });
</script>
</body>
</html>

Explanation of changes:

loadNextFile() is a recursive function that loads one file after the other, ensuring the correct order of the digits.
We start by calling loadNextFile(0), which begins with the first file (digits.html), then once that is loaded, the next file (digits2.html) is loaded.

Using async/await and fetch() method

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>One Billion Digits of Pi</title>
  <style>
    body {
      font-size: 20px;
      font-family: "Trebuchet MS", Veranda, sans-serif;
      display: inline-block;
      margin: 10px;
    }
    
    .digits {
      display: inline-block;
      font-family: serif;
    }
  </style>
</head>
<body>

<h1>One Billion Digits of Pi:</h1>
  <p id="digits"></p>
  
<script>
  async function loadDigits() {
    const paragraph = document.getElementById("digits");
    const loadFiles = ["digits.html", "digits2.html"];

    // Load files sequentially
    for (let file of loadFiles) {
      try {
        const response = await fetch(file);
        const data = await response.text();

        // Remove spaces and append to the paragraph
        const textNoSpaces = data.replace(/\s+/g, "");
        paragraph.innerHTML += textNoSpaces;
      } catch (error) {
        console.error(`Error loading file ${file}:`, error);
      }
    }
  }

  // Start loading digits once the document is ready
  document.addEventListener("DOMContentLoaded", loadDigits);
</script>

</body>
</html>

Explanation of changes:

async function loadDigits(): The function is declared async to allow the use of await inside it, enabling us to wait for each file to load before moving to the next one.
fetch(file): The fetch() API is used to load each file. It returns a promise that resolves with the response from the file.
response.text(): Once the response is obtained, we use .text() to get the file's content as a string.
replace(/\s+/g, ""): This removes any spaces or newlines from the loaded content, ensuring the digits are concatenated without gaps.
paragraph.innerHTML += textNoSpaces: The cleaned-up content is appended to the #digits paragraph.
Error handling: If any file fails to load, the error is logged, but the script continues to load the remaining files.

This should resolve the issue of the digits getting mixed up or switched, as the files will now load sequentially and be appended in the correct order.

Thanks

3 replies

Ethan-Mircheff Dec 18, 2024
Author

Thanks so much for the help! Just to confirm, would I be able to add more files to this still? Because of the file size limits on GitHub, I will end up with 10-15 files for all of the digits. For example, would something like this work:

<script>
  async function loadDigits() {
    const paragraph = document.getElementById("digits");
    const loadFiles = ["digits.html", "digits2.html", "digits3.html", "digits4.html"];

    // Load files sequentially
    for (let file of loadFiles) {
      try {
        const response = await fetch(file);
        const data = await response.text();

        // Remove spaces and append to the paragraph
        const textNoSpaces = data.replace(/\s+/g, "");
        paragraph.innerHTML += textNoSpaces;
      } catch (error) {
        console.error(`Error loading file ${file}:`, error);
      }
    }
  }

  // Start loading digits once the document is ready
  document.addEventListener("DOMContentLoaded", loadDigits);
</script>

harmeetsingh11 Dec 19, 2024

Yes, your updated approach with additional files will work perfectly fine. The for...of loop in your loadDigits function will process any number of files listed in the loadFiles array sequentially. Here's a confirmation and a few clarifications:

The loadFiles array can include as many files as you need (e.g., digits3.html, digits4.html, etc.).
The function processes each file in the order they are listed, ensuring all the digits are appended in the correct sequence.
There is no hard-coded limit to the number of files, so you can extend the array to include 10–15 files or more as necessary.

Example:

const loadFiles = [
  "digits.html",
  "digits2.html",
  "digits3.html",
  "digits4.html",
  "digits5.html",
  "digits6.html",
  "digits7.html",
  "digits8.html",
  "digits9.html",
  "digits10.html"
];

As long as the file names are correct and accessible, the script will load and append the digits sequentially.

A Few Tips for Handling Many Files:

Optimize File Access:
- Ensure all files are stored in the same directory or accessible path to avoid URL mismatches.
- You might consider dynamically generating the file paths if they follow a pattern (e.g., digits1.html, digits2.html, etc.).
```
const loadFiles = Array.from({ length: 10 }, (_, i) => `digits${i + 1}.html`);
```
Performance Consideration:
- While this solution works fine for 10–15 files, if you eventually scale up to hundreds of files, consider combining the files into larger chunks to minimize HTTP requests.
Error Handling:
- If a file fails to load, you can display a message or skip it, but ensure the rest of the files still load properly.
```
console.warn(`Skipping file ${file} due to an error.`);
```

Ethan-Mircheff Dec 19, 2024
Author

Thanks for the tips! I am planning on having a total of 12-15 files, so that should work fairly well. I could definitely implement the dynamic file paths though, since they are following the pattern in your example, and they are all pretty similar. The error handling is also a good idea.

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

GitHub Community

Reorganized page when refreshed #147277

{{title}}

Replies: 1 comment 3 replies

{{title}}

{{editor}}'s edit

{{editor}}'s edit

{{title}}

{{title}}

{{title}}

Select a reply

GitHub Community

Reorganized page when refreshed #147277

Ethan-Mircheff Dec 17, 2024

Body

Guidelines

Solution:

Replies: 1 comment · 3 replies

harmeetsingh11 Dec 18, 2024

Solution:

Using callback function

Explanation of changes:

Using async/await and fetch() method

Explanation of changes:

Ethan-Mircheff Dec 18, 2024 Author

harmeetsingh11 Dec 19, 2024

Example:

A Few Tips for Handling Many Files:

Ethan-Mircheff Dec 19, 2024 Author

Ethan-Mircheff
Dec 17, 2024

Replies: 1 comment 3 replies

harmeetsingh11
Dec 18, 2024

Ethan-Mircheff Dec 18, 2024
Author

Ethan-Mircheff Dec 19, 2024
Author