Encountered a Dojo error of "TypeError {stack: (...), message: "undefined is not a function"}" when attempting to display a gif during an ajax load

I've been attempting to display a loading gif while an ajax call is in progress. However, I encountered an error at the show statement and the console displayed:

TypeError {stack: (...), message: "undefined is not a function"}

Here's my code snippet:

require(["dojo/_base/xhr"], function(xhr) {
    xhr.get({
        url: uri,
        handleAs: "text",
        load: function(data) {
            require(["dojo/dom-construct", "dojo/_base/window"], function(domConstruct, win) {
                domConstruct.place("<div id='loadgif'><img src='/22.gif' ></img></div> ", win.body());
            });

            dojo.byId("loadgif").show();
            console.log(data);
            txt = data;
            console.log(txt);
            console.log(txt.split("/")[0]);
            console.log(txt.split("/")[2]);
            dojo.byId("loadgif").hide();
            },
        error: function(error) {
            console.log("error");
        }
    });
});

Answer №1

It's important to note that the DOMNode::show() is not a valid function, which means the lines of code below will not work:

dojo.byId("loadgif").show();
dojo.byId("loadgif").hide();

To achieve the desired result, it is recommended to use the dojo/dom-sytle::set() method instead. For instance:

domStyle.set(dom.byId("loadgif"), "display", "block");
domStyle.set(dom.byId("loadgif"), "display", "none");

In addition, there are other inconsistencies in your code. Currently, the loadgif element is only displayed briefly after the AJAX request has been completed (as it is inside the load callback).

If you intend for the indicator to be visible during the network request as well, consider moving this portion of code outside of the load callback. Here's an example:

require([ "dojo/_base/xhr", "dojo/dom-construct", "dojo/dom", "dojo/dom-style", "dojo/_base/window", "dojo/domReady!" ], function(xhr, domConstruct, dom, domStyle, win) {
    domConstruct.place("<div id='loadgif'><img src='/22.gif' /></div>", win.body());
    var node = dom.byId("loadgif");
    domStyle.set(node, "display", "block");
    xhr.get({
        url: uri,
        handleAs: "text",
        load: function(data) {
            console.log(data);
            txt = data;
            console.log(txt);
            console.log(txt.split("/")[0]);
            console.log(txt.split("/")[2]);
            domStyle.set(node, "display", "none");
        },
        error: function(error) {
            console.log("error");
        }
    });
});

Furthermore, consider consolidating the require() functions together.

An illustrative example can be viewed on JSFiddle: http://jsfiddle.net/23VKq/

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

Creating complex concave shapes using Three.js from a point cloud

Currently facing a challenge in dynamically creating shapes in three.js from a point cloud. While ConvexGeometry works well for convex shapes, it becomes complex when dealing with concave shapes. The process involves drawing a line on the 2D plane (red li ...

How to choose an option from a dropdown menu using React

In a React application, I am creating a straightforward autocomplete feature. The code is outlined below. index.js import React from 'react'; import { render } from 'react-dom'; import Autocomplete from './Autocomplete'; co ...

To effectively store the input values from eight labels into an array and subsequently identify the prime numbers within the array using JavaScript, follow these step-by-step instructions

As a newcomer to JavaScript, I am trying to extract the values of 8 labels (text) and store them in an array of 8 numbers. My goal is to then identify the prime numbers within this array. While I have been able to create the array and display the labels in ...

Understanding the Typescript Type for a JSON Schema Object

When working with JSON-schema objects in typescript, is there a specific type that should be associated with them? I currently have a method within my class that validates whether its members adhere to the dynamic json schema schema. This is how I am doing ...

Transform a list of file directories into a JSON format using ReactJS

I am developing a function that can convert a list of paths into an object structure as illustrated below; this script will generate the desired output. Expected Output data = [ { "type": "folder", "name": "dir1& ...

Adding several <div> elements with the correct indices

I need help with a dynamic form that requires users to select a state before revealing the corresponding cities within that state. <form method="post"> <div class="summary"> <div class="trip"> <select name="State" class="s ...

Can you provide guidance on how to successfully transfer an array of JSON objects from the script section of an HTML file to the JavaScript

My webpage contains an array of JSON objects that I need to send to the server. The array, stored in a variable called results, appears normal when checked in the console before trying to POST it. Here is a sample of the data: 0: {id: 02934, uName: "Ben", ...

I'm looking to add autocomplete functionality to a text input in my project, and then retrieve and display data from a MySQL database using

Looking to enhance user experience on my form where users can select inputs. Specifically, I want to implement a feature where as the user starts typing in a text input field with data from a MYSQL database, suggestions will be displayed. The form is locat ...

What is the best way to access and manipulate data stored in a Firestore map using React?

In my Firestore database, I have a field with map-like data: coordinates:{_01:"copper",_02:"gold",_03:"iron"} When viewing this database in the Firestore admin panel, it appears like this: pic However, when attempting to list items using the following c ...

The framework for structuring web applications using Javascript programming

While I have extensive experience in PHP and C# programming, my knowledge of Javascript is limited. When it comes to server side programming, MVC is my preferred method as it allows me to keep my code well-organized. However, when it comes to writing Java ...

Is there a way to apply filters to jquery datatables during initialization process?

Is there a way to server-side filter datatable during initialization? I attempted the following code: function tableFilter(arg1, param2, value3) { var searchTable = $("#tblsearch").dataTable({ "bRetrieve": true, "b ...

Breaking Long Strings into Multiple Lines Using React Material UI Typography

Currently, I am working with ReactJS and incorporating MaterialUI components library into my project. However, I have encountered a problem with the Typography component. When I input a long text, it overflows its container without breaking onto a new lin ...

I am unable to determine if I have already selected a List Item

My goal is to have a functionality where clicking on "Download Drivers" will open the list, and clicking again will close it. This should be achieved with onclick events only, no hover effects. Additionally, I want the list to remain open even if I click o ...

Regular expression: Validate in PHP (on the server-side) or JavaScript (on the client-side)

I am working on a form that validates user input using PHP, JavaScript, and AJAX. I plan to use regex to validate each field, but I'm unsure about which method is best for checking it... In your experience, do you recommend using JavaScript or PHP fo ...

Converting a TypeScript object into a JSON string

When working with TypeScript, I am facing a challenge while trying to initialize an object that requires a JSON string for the "options" parameter. Specifically, it pertains to the object mentioned here. It is crucial that the options parameter be in JSON ...

Using AngularJS, I can bind the ng-model directive to asynchronously update and retrieve data from

I am currently working with Angular to develop a preferences page. Essentially, I have a field in a mysql table on my server which I want to connect my textbox to using ng-model through an asynchronous xhr request for setting and fetching data. I attempt ...

Is it possible to send an entire HTML table to the server and then update the database table with it?

Recently, I encountered an issue that has me stumped. Suppose I have a database table A with multiple columns and the server (PHP script) renders this data into an HTML table for the web client. Now, the challenge lies in allowing users to add/delete rows ...

Including a unicode escape sequence in a variable string value

I'm struggling to find the right way to include a unicode escape in a dynamic string value to display emojis in React. My database stores the hexcode for the emoji (1f44d) I have set up a styled-component with the necessary css for rendering an emoj ...

Using React to create an onScroll event listener within a mapped array

I am currently working on a setup where scrolling over an image mapped from an array updates the state with that image's coordinates, which in turn updates a Google Map. <CloudinaryContext cloudName="hcjmhcjf" fetchFormat="auto"> <div clas ...

Switching between vertical and horizontal div layouts while reorganizing text fields within the top div

function toggleDivs() { var container = document.querySelector(".container"); var top = document.querySelector(".top"); var bottom = document.querySelector(".bottom"); if (container.style.flexDirection === "column") { container.style.flexDirec ...