How can I extract text from .txt files to set as personalized response text?

Currently, I am working on creating a straightforward photo upload system. When a file is selected and the upload button is clicked, a loading gif appears along with a percentage uploaded. Once the upload is complete, an alert displays a message from an array containing various feedback messages.

Despite my initial idea not yielding results, I resorted to using an array for the feedback messages. Is there a way to utilize a .txt file as the responseText for my AJAX request? For example, if the text file contains the phrase Images Uploaded To Server, how can I extract that information from the file and display it in an alert after the upload?

This function is currently invoked upon completion of the upload...

xhr.addEventListener("load", function() { document.getElementById("loadingicon").style.display = "none"; 
    alert(message[0]); addIcon();} , false);

I attempted to use .open("GET", "text.txt", true); but encountered an error stating Undefined. Can anyone offer assistance with this issue?

javascriptajax

Answer №1

$(document).ready(function() {
    $("#clickMeButton").on("click", function() {
        $.ajax({
            url : "greetings.txt",
            dataType: "text",
            success : function (result) {
                $("#displayText").html(result);
            }
        });
    });
});

http://api.jquery.com/jQuery.ajax/

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

Using Angular to sort arrays based on the values in a separate array

I have a unique setup where there is a table containing select options in each row. The value of the select option changes based on the 'dataType' specified for that particular row. Here is an example of my Table Array: { 'name':' ...

javascriptangular

Error Alert: Invalid Hook Call detected while using the useSelector hook within a Functional Component

I am encountering an error Error: Invalid hook call. Hooks can only be called inside of the body of a function component. The versions of React and the renderer (such as React DOM) might not match There could be violations of the Rules of Hooks Multiple ...

javascriptreactjsreact-reduxreact-hooks

Unusual issue with jQuery's AJAX functionality

Utilizing jQuery AJAX, I am fetching data from a PHP page and displaying a loading GIF image in the placeholder to indicate that results are being processed. $(".project").change(function(){ $(".custName").html("<img src='/admin/images ...

phpjqueryajaxpostpreloader

Animate the transition effect as soon as the block is displayed

Looking to create a smooth page transition using CSS changes with the help of Javascript (jQuery). Initially, one of the pages is set to display none. page1 = $('.page1'); page2 = $('.page2'); page1.removeClass('animate').cs ...

javascriptjquerycssanimation

Is there a way to transfer ngClass logic from the template to the TypeScript file in Angular?

I am implementing dropdown filters for user selection in my Angular application. The logic for adding classes with ngClass is present in the template: <div [ngClass]="i > 2 && 'array-design'"> How can I transfer this ...

javascriptangulartypescriptng-class

There was an unhandled rejection error stating: "TypeError - Unable to access property 'push' as it is undefined"

I am encountering an issue while trying to create a function that returns all indexes of an array. I'm not sure what mistake I might be making, as I keep getting an error stating that push cannot be used due to an undefined value. Here's the cod ...

javascriptreactjstypescript

Having trouble retrieving a value from the $http promise, causing the code within the then() function to not run as expected

In the past, I encountered a challenge with the $http service which I managed to solve by creating a dedicated service for handling my requests. However, as my requests grew larger, this solution started to seem inefficient. Instead of just assigning a sim ...

javascriptangularjspromiseangularjs-serviceangular-promise

What is the best way to incorporate my CSS file into an HTML file when using Express?

When I try to host my html file using Express, it seems that my CSS is not getting applied. Why is this happening and what is the best way to include my CSS file with Express? const express = require('express'); const bodyParser = require('b ...

javascriptnode.jsexpressbackend

What is the best way to retrieve a variable in AngularJS1 after the HTML has been divided into multiple child HTML files?

I have segmented my main HTML page into multiple subpages and included them in the main file. However, it seems that each subpage is referencing different '$scope' variables. I am trying to reference ng-modle="My-model" from one subpage to anothe ...

javascripthtmlangularjs

Following an ajax request, the tooltip feature in bootstrap fails to function properly

I am currently facing an issue with my files. I have an index.php file where I include another file named file1.php (which consists of all the necessary files for jQuery, js, etc.). Within file1.php, there is a table with buttons that trigger modals. The i ...

javascriptjqueryajaxtwitter-bootstraptooltip

Pop-up notification badge using AJAX technology

Is there a way to implement a notification number badge using Ajax, similar to what Facebook does? I can't provide an image here, but most people are probably familiar with the concept. It's like when you sign into Facebook and see a small number ...

phpjqueryajaxcss

Node.js with Koa: Discontinuation of generator usage on the next step

I am working with a custom object in which I pass a parameter, and then I need to search for all documents in my collection and process them. Here is the code for my custom object: var db = require('../lib/db'); function Widget(n,l,c,o,t,p) { ...

javascriptnode.jskoa

Rails responds with a 406 error when encountering issues within a respond_to block

I encountered a "406 Not Acceptable in 13ms (ActiveRecord: 0.6ms)" error while trying to implement ajax functionality. The code works fine in normal HTML, but as soon as respond_to blocks are introduced, the error arises. Despite searching on Stack Overflo ...

rubyajaxruby-on-rails-3

The PHP mail function is not functioning properly in conjunction with this particular AJAX code, however, it works perfectly fine without the AJAX code. When I include an echo statement in my PHP code

In my HTML code, I want to display a message above the form indicating that an email is being sent and then show a Thank you message afterwards. <form id="main-contact-form" name="contact-form" method="post" action="sendemail.php"> <div class ...

phpajax

Two DIV elements are merging together with a cool zooming effect

As a beginner in using Bootstrap 4, I am working on creating a practice website. While designing the layout, I encountered an issue that seems simple but I can't seem to figure it out. <div id="box-container" class="container-fluid"> &l ...

javascriptjqueryhtmlcssbootstrap-4

Retrieving data from a database using a Symfony2 controller in JavaScript

I have been trying to retrieve a list of categories from my database and store it in my JavaScript code for future use. However, I have run into issues with this task as the list appears empty after being returned to JavaScript. Below is the code for my S ...

javascriptjqueryajaxdatabasesymfony

Select2 Remote Data feature is not dynamically generating or choosing options

Using Ajax, I am making a call to a URL in order to receive data and populate it within a select element that is integrated with Select2 and remote data. While the remote data loads successfully when searching within the select, the issue arises when atte ...

jqueryajaxjquery-select2

The alignment issue persists when attempting to set 'relative' on the parent and 'absolute' on the inner element in a Bootstrap column for bottom alignment

Here is a snippet of my basic HTML code: <div class = "row"> <div class = "col-xs-8"> <p>long long long long text that generates a taller column</p> </div> <div class = "col-xs-4"> <p> ...

javascriptjqueryhtmlcsstwitter-bootstrap

When using the `display: table-cell` property on a div element, it does not automatically respect

How can I restrict the width of columns by defining a width attribute on the div.dcolumn DOM element to preserve the layout with overflowing cells? I want the content of any overflowing cell (like the 9px column) to be hidden while maintaining the specifie ...

javascripthtmlcss

Design a unique input component tailored specifically for react-day-picker

While working on a custom Material UI component for DayPickerInput, I encountered an issue where the onDayChange event triggers an error. handleToDateChange = (selectedDay, modifiers, dayPickerInput) => { const val = dayPickerInput.getInput().value ...

javascriptreactjsmaterial-uireact-day-picker