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

The data provided was deemed incorrect. Modifying the function to include file uploads in Laravel 8 and Vue 2

I've been attempting to create an update function that includes file upload capability. Here is what I have experimented with so far: <b-form @submit.prevent="update" enctype="multipart/form-data"> . . . . <b-form-f ...

Modify the image source using Javascript

I need to update the src attribute of an image in a parent element nested within a ul li when a link is clicked. Here's my code so far. I know how to use JavaScript to change the src attribute, but I'm not sure how many levels I need to go up to ...

The hover effect is not functioning properly after loading jQuery with load();

When loading elements into a div using the load() function, I noticed that the :hover effect in CSS stops working for those elements. It's a dynamic menu setup, as shown below: <div id='main-menu'> <ul> <li class='click ...

Using JavaScript to extract variables from parsed JSON data

Could someone please help me understand how to run this code smoothly without encountering any errors? var test = 'Something'; JSON.parse('{"xxx": test}'); I am inquiring about this because I have a JSON object containing variables th ...

Replace jQuery CSS with standard CSS without using !important to override styles

Recently, I encountered a puzzling situation: I have an element with the following CSS properties ($(this) represents the cloned object): clone.css({ 'width': $(this).width() + 'px', 'height': $(this).height() + ' ...

How can I dive into a nested array to access the properties of an object within?

My array, called sportPromise, is structured like this: 0: Array[0] 1: Array[1] 2: Array[2] 3: Array[3] When I run console.log(angular.toJson($scope.sportPromise, 'pretty'));, the output looks like this: [ [], [ { "id": 5932, ...

Tips for retrieving a variable from an XML file with saxonjs and nodejs

I came across an xml file with the following structure: <?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE agent SYSTEM "http://www.someUrl.com"> <myData> <service> <description>Description</description> < ...

Building a table using a JSON object in a React component

I have been dynamically creating a table in React based on the API response received. data = {"name":"tom", "age":23, "group":null, "phone":xxx} Everything was working fine until I encountered a scenario w ...

Struggling to effectively use XPath to target LI elements that contain specific text

Below is the HTML code for the list item in question: <li class="disabled-result" data-option-array-index="1" style="">4" (0)</li> Here is my attempt at using JavaScript to hide this list item, but it's not working as expected: var xpat ...

Creating a default option in a Select tag with React when iterating over elements using the map method

After learning that each element in the dropdown must be given by the Option tag when using Select, I created an array of values for the dropdown: a = ['hai','hello','what'] To optimize my code, I wrote it in the following ...

What is the purpose of specifying http://localhost:3000 when accessing API routes in Next.js?

I created an API route within the pages directory of my NextJS project. It is functioning properly as I am able to retrieve data by directly accessing the URL like http://localhost:3000/api/tv/popular. My goal is to fetch this data using getStaticProps and ...

Utilize external functions in evaluated code

After working with a TypeScript file containing the following code: import { functionTest } from './function_test' function runnerFunctionTest() { console.log("Test"); } export class Runner { run(source : string) { eva ...

Having trouble with the dropdown multiselect feature in AngularJS?

I'm striving to develop a straightforward multi-select dropdown utilizing angular JS, bootstrap, and JS. This dropdown should display days (mon, tue...sun), with options for select all and unselect all. My goal is to create a controller that will de- ...

Trigger the callback function once the datatables DOM element has finished loading entirely

Hello there! I have a question regarding datatables. Is there any callback function available that is triggered after the datatables DOM element has finished loading? I am aware of the callbacks fnInitComplete, but they do not serve my purpose. Specificall ...

Issue with Angular Datatable: Table data is only refreshed and updated after manually refreshing the page or performing a new search query

Having trouble updating Angular Datatable after selecting different data? The API response is coming in but the table data is not being updated. Can anyone suggest how to properly destroy and reinitialize the table for the next click? Below is a snippet ...

How can you assign a value to an HTML Input by dragging an SVG shape or canvas?

I am currently in the process of creating a user interface for setting pricing parameters. There are three categories that need to be visually represented, along with two sliders to determine suggested Buy/Sell prices. To demonstrate my progress so far, I ...

Is there a way to change the font size with a click in JavaScript or Angular?

Here is a breakdown of the 4 steps: 1.) Begin by clicking on a category 2.) The filtered products will be displayed 3.) Select the desired products from the filter 4.) Once selected, the products will appear in the rightmost part of the screen within t ...

What is the best way to extract a thumbnail image from a video that has been embedded

As I work on embedding a video into a webpage using lightbox, I'm looking for advice on the best design approach. Should the videos be displayed as thumbnails lined up across the page? Would it be better to use a frame from the video as an image that ...

Numerous buttons activating a single modal component

I have an array called videos, which contains objects of the type Video (defined below). My goal is to create a functionality where clicking on a specific video button opens a modal containing information about that particular video. interface VideosInfo ...

Sorting JavaScript Objects By Date

My goal is to arrange my array of objects with date values in descending and ascending order. Here is the code I am using: function comp(a, b) { return new Date(a.jsDate) - new Date(b.jsDate); } function compNewestFirst(a, b) { return new Date(b.jsD ...