Unable to load a different webpage into a DIV using Javascript

Question

Unable to load a different webpage into a DIV using Javascript

Today has been a bit challenging for me. I've been attempting to use JavaScript to load content into a <div>. Here is the JavaScript code I'm working with:

function loadXMLDoc(filename) {
    var xmlhttp;
    if (window.XMLHttpRequest) {
        xmlhttp = new XMLHttpRequest();
    } else {
        xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
    }
    xmlhttp.onreadystatechange = function () {
        if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
            after_load_function(xmlhttp.responseText);
        }
    }
    xmlhttp.open("GET", filename, true);
    xmlhttp.send();
}

function after_load_function(responseText) {
    document.getElementById("right").innerHTML = responseText;
}

window.onload = function () {
    loadXMLDoc("welcome.html");
}

Here is my div:

<div id="right"></div>

Does anyone have any insights on what might be causing the issue?

javascript html css

Answer 1

Answer №1

Have you considered utilizing a jQuery abstraction such as the load method? It can simplify your code and make it more efficient.

$( document ).ready(function() {
    $("#right").load( "welcome.html" );
})

This solution seems quite effective in my opinion.

Answer 2

Have you considered utilizing a jQuery abstraction such as the load method? It can simplify your code and make it more efficient.

$( document ).ready(function() {
    $("#right").load( "welcome.html" );
})

This solution seems quite effective in my opinion.

Answer 3

Answer №2

I recently encountered a similar issue and found a solution that is working really well for me.

Below is the code snippet:

<html>
<head>
    <title> pageOne </title>
    <script src="jquery-1.11.1.min.js"></script>
</head>

<body>

    <input class='loadBtn' type='submit' value='Load a Different Page!:'>

    <div id="page"></div>

</body>
</html>

Here's the JavaScript function:

//click function:
$(".loadBtn").click(function(){

        //div to hide/replace
        $('#page')

            //fadeOut div content:
            .delay(200).fadeOut('slow')

            //load method:
            .load

            //url #divToReplace
            ('pageTwo.php #page')

            //fadeIn new div content:
            .hide().delay(300).fadeIn('slow');

        //prevent default browser behavior
        return false;
    });

Answer 4

I recently encountered a similar issue and found a solution that is working really well for me.

Below is the code snippet:

<html>
<head>
    <title> pageOne </title>
    <script src="jquery-1.11.1.min.js"></script>
</head>

<body>

    <input class='loadBtn' type='submit' value='Load a Different Page!:'>

    <div id="page"></div>

</body>
</html>

Here's the JavaScript function:

//click function:
$(".loadBtn").click(function(){

        //div to hide/replace
        $('#page')

            //fadeOut div content:
            .delay(200).fadeOut('slow')

            //load method:
            .load

            //url #divToReplace
            ('pageTwo.php #page')

            //fadeIn new div content:
            .hide().delay(300).fadeIn('slow');

        //prevent default browser behavior
        return false;
    });

Unable to load a different webpage into a DIV using Javascript

Answer №1

Answer №2

Similar questions

Using PHP to send JSONP callback responses

Extracting Menu Information from Weedmaps

Why isn't the button border displaying the color I assigned to it?

Is it possible to create and access a PDF file using file handling in PHP?

Please select the option to choose all values

Is QA supported by LG WebOS 3.5 through webdriver?

Tips for adapting the position of a floating div according to its height and environment

Tips for emphasizing matches within a string using JSX

Setting line chart data for Chart.js

Adjusting the dimensions of a Twitter widget to fit the screen size

Learn the steps to retrieve a user's profile picture using the Microsoft Graph API and showcase it in a React application

An effective method for linking a value from one ng-model to another is by identifying and matching a specific string

"activeStyle" attribute consistently being implemented on links within pagesindex.js

What is the best way to make JavaScript display the strings in an array as bullet points on different lines?

Issue: npm encountered an error due to writing after reaching the end

Obtaining the pathname in a NextJS file like _document.js is a matter of accessing

PHP and MySQL with jQuery and AJAX combine to create a real-time news feed update system similar to Twitter

What steps can be taken to stop the update function from inserting data into MongoDB from a Meteor application

I'm currently developing a Chrome application specifically designed for editing plain text. To achieve this, I am utilizing the <textarea> element. However, the app will not expand to full screen

What could be causing the issue of req.body being undefined within the destination function of Multer's diskStorage?