Jquery Question posted in
The official Jquery Api Documentation can be found here.

jQuery does not load txt/html file

I need to make a simple website,that contains header(needs to be in a different file) and main part.All of that should be running on server.

App.js

const fs = require("fs")
const http = require("http")
let server = http.createServer((req, res) => {
    res.writeHead(200, {"Content-Type": "text/html; charset=utf-8"})
    
    if(req.url == "/"){
        fs.readFile("ultimate.html", "utf-8", function(error, data){
            console.log("Loaded") //confirms the loading of a page
            res.end(data)
        })
    }
})

const PORT = 3000
const HOST = "localhost"

server.listen(PORT, HOST, () => { 
    console.log(`Server is up: http://${HOST}:${PORT}`)
})

ultimate.html

<html>
    
</head>
    <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
    <script type="text/javascript">
        jQuery(document).ready(function(req,res){
                    console.log(status)
                    $("#header").html('Did i disappear?'); //This message is present on the screen
                    $("#header").load("Text.txt"); //This thing doesnt load at all
        });
    </script> 
    
</head>

    <body>
        <div id="header"></div> 
    </body>
    
</html>

I tried loading a small txt file and a html file as a header, but nothing works. The only thing that works is .html but that’s about it.Also console log (status) has a blank value.
Im using NODEJS if thats helps

Tags:

2

Answers


  1. 0

    Is the code you have given complete ? As you can read in the .load documentation, $.load('Text.txt') will act in the same as $.get(Text.txt). It will execute a request to the /Text.txt path.

    On the server side, nothing seems ready to handle this. You should add a route to Text.txt that loads the file and return its content.

    You can see this for yourself by opening your browser devtools and going to « network » tab. You should see a request to Text.txt, resulting with a 404 status.

    Your console.log has a blank value because the status variable is undefined.

    Login or Signup to reply.
  2. 0

    My answer is a bit late, but exactly as Slokilla mentionned, your backend
    code isn’t handling the request to the text file.

    This could be done with something like this, using regular expressions:

    import fs from "fs";
import http from "http";

const server = http.createServer((req, res) => {
    console.log(`Request for ${req.url}`);

    // Query for the index page, with optional path and query string, case insensitive:
    // - /
    // - /index.htm
    // - /index.html
    // - /ultimate.html
    if (req.url.match(/^/(index.html?|ultimate.html?)?(?.*)?$/i)) {
        res.writeHead(200, {"Content-Type": "text/html; charset=utf-8"});
        fs.readFile("ultimate.html", "utf-8", function(error, data) {
            res.end(data);
        });
    }
    // Query for the text file, case insensitive.
    else if (req.url.match(/^(/text.txt)(?.*)?$/i)) {
        res.writeHead(200, {"Content-Type": "text/plain; charset=utf-8"});
        fs.readFile("Text.txt", "utf-8", function(error, data) {
            res.end(data);
        });
    // Unknown path -> 404 error. You could load a 404.html file instead of this inline response.
    } else {
        res.writeHead(404, {"Content-Type": "text/html; charset=utf-8"});
        res.end(
            `<!DOCTYPE html>
            <html lang="en">
            <head>
                <title>Page not found</title>
            </head>
            <body>
                <h1>Page not found</h1>
            </body>
            </html>`.replace(/^s{12}/gm, '')
        );
    }
})

const PORT = 3000;
const HOST = "localhost";

server.listen(PORT, HOST, () => { 
    console.log(`Server is up: http://${HOST}:${PORT}`);
})
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search