Utilizing AJAX to showcase an HTML popup

I am currently working on a project to create an HTML page that will display another HTML file in an alert when a button is pressed. However, I am facing an issue where the content is not being displayed as expected.

<html>
    <head>
        <script>

        var xmlhttp=new XMLHttpRequest();

        function pop() {
            xmlhttp.open("GET","content.html",true);
            xmlhttp.send();
            xmlhttp.onreadystatechange=function() {
                if(xmlhttp.readystate==4&&xmlhttp.status==200) {
                    alert(xmlhttp.responseText);
                }
            }
        }

        </script>
    </head>
    <body>
        <input type="button" name="test" value="Click Me" onclick="pop()">
    </body>
</html>

Below is the content of content.html

<html>
    <body>
        Hello World!
    </body>
</html>

Answer №1

It's actually the readyState. JavaScript is sensitive to case.

Additionally, it may be more effective to send data after configuring everything.

Finally, there is a missing closing curly brace }.

var xhr = new XMLHttpRequest();

function displayContent() {
    xhr.open("GET", "content.html", true);
    xhr.onreadystatechange = function() {
        if (xhr.readyState == 4 && xhr.status == 200) {
            alert(xhr.responseText);
        }
    }
    xhr.send();
}

Answer №2

Aha, I notice three opening curly brackets ({) and just two closing braces (}). Make sure to inspect your browser's error console for these types of mistakes.

Answer №3

Take a look below: The closing bracket is not included in the code snippet.

var xmlhttp=new XMLHttpRequest();

function pop()
{
   xmlhttp.open("GET","content.html",true);
  xmlhttp.send();
  xmlhttp.onreadystatechange=function()
  {

if(xmlhttp.readystate==4&&xmlhttp.status==200)
   {
    alert(xmlhttp.responseText);
   }
  }
}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Error: The value of 'v4' property is not defined and cannot be read

I am encountering an issue with Vue.js: vue.esm.js?efeb:628 [Vue warn]: Error in v-on handler: "TypeError: Cannot read property 'v4' of undefined" found in ---> <AddTodo> at src/components/AddTodo.vue <App> at src/Ap ...

Using Vue.js to eliminate duplicate values from a filtered array of objects

How can I eliminate duplicate data from a v-for loop in Vue.js? I have an array of clients and another array of categories. When filtering the categories based on clientIDs, I noticed that there are duplicates present. Please choose a client from the opti ...

Accessing JSON object with Javascript

I've been struggling with this code snippet and despite looking at similar posts, I can't seem to get it right. var obj2 = JSON.parse('{"venue_data": {"venue_id":"25", "description":"Space Cafe", "venue_type ...

Responsive design is not supported by Ajax data tables

Currently, I am utilizing AJAX to fetch data from a database, but I have encountered some confusion regarding how to incorporate a delete button within the setup. Below is the snippet of my AJAX code: var ajax = new XMLHttpRequest(); ajax.open("G ...

JavaScript and HTML with Node.js

Exploring the world of HTML, running smoothly with a static IP address 192.168.56.152 using apache on the host computer. <!DOCTYPE html> <html > <head> <title>OnlinePage</title> <meta charset="utf-8"& ...

Implementing multiple jQuery Ajax requests in ASP.NET MVC: Efficiently handling concurrent requests

My web page has a tabbed style layout where each tab triggers an Ajax request for their content using jQuery. The backend is ASP.NET MVC running on Visual Studio with the 'ASP.NET Development Server' handling requests. I am encountering the follo ...

I Am unable to locate the '...' after applying the text-ellipsis style to a div

https://i.stack.imgur.com/Tsmf5.png The ellipsis '...' is not showing up even after I have applied text-ellipsis, overflow hidden, and nowrap to this div. Take a look at my code: import Image from "next/future/image"; import Link from ...

Is there a way to modify the text within a "span" element that directly follows an "i" element using jQuery?

I am attempting to modify the text displayed on a button within a plugin by using jQuery. Here is the outer HTML: <button value="[[3,1,1488182400]]" data-group="2017-02-27" class="ab-hour"> <span class="ladda-label"> <i class="ab-hour ...

Masked input fails to accurately capture data

When utilizing VueJS together with the Quasar framework. An issue arises when using a masked q-input, where the value becomes incorrect after a toggle. For instance, if we start with a default value of: officeNum: 654321, mobileNum: 12345678, Then our ...

Converting counterup2 to pure vanilla JavaScript: step-by-step guide

Is there a way to convert the counterUp2 jQuery code to vanilla JavaScript? const counters = document.querySelectorAll('.counter'); function count(element) { let currentValue = 0; const targetValue = parseInt(element.innerText); let interv ...

Unraveling AngularJS: Mastering the Art of Interpolating Interpol

Trying to interpolate a string retrieved from the database, such as "Users({{users_count || 0}})", poses a problem. Using {{}} or ng-bind for interpolation does not work properly. The HTML code written is {{data.usersCount}}, but instead of ren ...

Improving Performance When Handling Multiple Events with Socket.io

Exploring socket.io event handling. Which is the more effective approach: socket.on('message', function (message) { if(message.message1) { // perform action } else if (message.message2) { // take alternative action } else ...

Discovered two instances of duplicate IDs within the elements

When using the same id names in two different form tags, I am encountering the following warnings: [DOM] Found 2 elements with non-unique id Below is a portion of my HTML code: <div class="modal-dialog"> <form action="" ...

What are some ways to enhance the loading time of my PHP-powered website?

Having troubles with my PHP-driven website that showcases real-time stock market data due to slow loading speeds. The site utilizes PHP for scraping financial information from external sources and presenting it on the front end. However, the performance is ...

Send the value to the <input> tag following each iteration in the functions

I am currently utilizing BootstrapVue. In my code, I have implemented a for loop to retrieve unique numbers from an array, which are stored as this.number. For each iteration of the loop, I use input.push() to add a new b-form-input element (in this case, ...

Having trouble establishing a basic websocket connection in NodeJS

I am currently following a tutorial on WebSocket protocol development from this link: . Upon visiting localhost:1337/index.html, I encountered the following error: This localhost page cannot be found. No webpage was found for the web address: http://loc ...

Attempting to designate a comment as private or public by utilizing a checkbox. Employing AJAX to send data to PHP and store it in a MySQL

Currently, the checkbox is returning an [objectO instead of a simple YES or NO value. Currently, my checkbox field is set up as a VARCHAR with a length of 3, but I'm wondering if I should be using TINYINT or Boolean instead. If so, what changes do I n ...

I require assistance in displaying a dynamic, multi-level nested object in HTML using AngularJS

I have a complex dynamic object and I need to extract all keys in a nested ul li format using AngularJS. The object looks like this: [{"key":"campaign_1","values":[{"key":"Furniture","values":[{"key":"Gene Hale","values":[{}],"rowLevel":2},{"key":"Ruben A ...

"Switching Classes with a Click Event: A Step-by-

This script is designed to work with SoundCloud's widget in order to enable remote text buttons. I am attempting to modify it so that it functions as a remote for an image button that toggles between different pictures for pause and play, rather than ...

A step-by-step guide on simulating a click event on an element in React with the help of jest and react-testing

My component displays the following {list.options && list.options.length > 0 ? ( <div data-testId="MyAlertText" onClick={onAddText}> Add Text </div> ) : null} When testing, I am executing the following it('Ensure Add Text lin ...