Issue with Dijit form fields failing to render correctly following dojo.destroy and dojo.place operations

Within my form, there is a table labeled as table0 which contains various dijit form controls. Additionally, there are buttons for adding and removing tables where each new table is assigned an ID incremented by 1. For instance, the first click on the add button will result in table1, the second click will create table2, and so on. Clicking on the remove button will remove the last table.

Below is the function for adding a new table:

        function getNewTable() {
        dojo.query('#addTable').onclick(function() {
            var tableNode = dojo.byId('table'+count);
            count++;
            dojo.xhrGet({url: 'addTable.html', 
                         handleAs: "text", 
                         preventCache: true,
                         content:{fieldId:count} ,
                    load: function(data) {
                        var newTable = dojo.place(data, tableNode, 'after');
                        dojo.parser.parse(newTable);
                    },
                    error: function(error) {
                        var newTable = dojo.place("AJAX error: " + error, deductNode, 'after');
                        dojo.parser.parse(newTable);
                    }
            });
        });
    }

The remove function is as follows:

        function removetable() {
        dojo.query('#removeTable').onclick(function() {
            if (count != 0) {
                var tableNode = dojo.byId('table'+count);
                count--;
                dojo.xhrGet({url: 'removeTable.html', 
                             handleAs: "text", 
                             preventCache: true,
                             content: {fieldId:count},
                        load: function(data) {
                                dojo.destroy(tableNode);
                        },
                        error: function(error) {
                            var newTable = dojo.place("AJAX error: " + error, tableNode, 'after');
                            dojo.parser.parse(newTable);
                        }
                });
            }
        });
    }

The count variable is declared globally.

Although the functions are functioning correctly, I am encountering an issue where adding a new table node after removing one will prevent the execution of dojo.parser.parse(newTable) for the node at that specific index.

I have debugged the code and all references seem to be correct. Everything works smoothly unless a node with a destroyed ID is placed.

For example, after clicking add, table1 is created and successfully parsed by dojo. Subsequently, clicking remove will delete table1 without any hitches. However, clicking add again to create table1 will not trigger dojo to parse the node.

Could I potentially be making a mistake somewhere?

Answer №1

It seems like my approach to removing the dijit widgets was not quite right.

After some debugging, I made the following changes within the load callback of the remove function:

dojo.forEach(dijit.findWidgets(dojo.byId(deductNode)), function(w) {
    w.destroyRecursive();   
});
dojo.destroy(deductNode);   

I mistakenly believed that using dojo.destroy on the dom node would also take care of removing the dijit widgets.

Thankfully, everything is functioning as intended now.

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

Unable to hear sound properly through Web Audio

I'm experimenting with playing a wav file using the AudioContext. I've noticed that it plays correctly when loaded with the <audio> tag (as demonstrated in this example on jsFiddle), but encounters issues when using AudioContext. var startB ...

A helpful tip for determining the size of a table: exclude the first and last rows to get an accurate

I'm encountering an issue with a table that has a header (1 row) and footer (1 row). When I try to get the table size, I expect the value to be 50 but it actually returns 52 because it's counting both the header and footer rows. Is there a way to ...

Jquery and Ajax failing to function properly with multiple dropdown selections

I've been working on creating a functionality to have multiple dropdown menus using Bootstrap, JQuery, and AJAX. The goal is to select multiple countries from these dropdowns and store the selected values in CSV format in my database. Initially, I had ...

Stop the child component from activating the parent's onClick event

Trying to implement Material-ui within a React project, I am facing an issue with the <IconButton> component and its onClick behavior conflicting with the parent component's behavior. Specifically, I want the <IconButton> to add an item to ...

Different ways to determine if a given string exists within an Object

I have an object called menu which is of the type IMenu. let menu: IMenu[] = [ {restaurant : "KFC", dish:[{name: "burger", price: "1$"}, {name: "french fries", price: "2$"}, {name: "hot dog", d ...

Guide to Deactivating the ENTER Key Functionality in React Material UI Autocomplete Form

My React component features a Material UI Autocomplete form that is working perfectly, except for one issue - when the user hits ENTER, the input field gets cleared. I simply want to prevent the input field from being cleared when ENTER key is pressed. Des ...

Begin your meteor project with a remote MongoDB server on a Windows operating system

Currently tackling a project that requires me to integrate my meteor project with a remote MongoDB server on Windows. I successfully set the environment variable (MONGO_URL="DB LINK") from OSX using terminal commands, but I'm encountering difficulties ...

Objects cannot be rendered inside JSX. An error is thrown stating that Objects are not allowed as a React child, with the specific object being [object Promise]

Within my React project, I have a Class-based component that serves as a child component. The state it relies on is passed down from a parent component. Within the JSX of this component, there is a map function that iterates over a platformsList array. Whi ...

Is it feasible to dynamically establish the rationale for @ResponseStatus in Spring 3?

My question involves a custom exception class that is set to return a specified HttpStatus: @ResponseStatus(value=HttpStatus.BAD_REQUEST, reason="Invalid parameter") public class BadRequestException extends RuntimeException { public BadRequestException( ...

Deactivating a form field depending on a selected radio button in Angular 2

If I have two radio buttons, with a click function called localClick for the first button to give value 1 and the second button to give value 2. <div class="ui-g-12"><p-radioButton name="group1" value="Local" (click)=localClick(1) label="Local"&g ...

Received an illegal invocation error when attempting to make a POST request to upload

I'm struggling to make a post request with an image. Whenever I try to add the image as a parameter, I receive the error message Uncaught TypeError: Illegal invocation. I have attempted using both .serialize() and other methods, but none of them are w ...

Creating a Pyraminx using triangular shapes

Attempting to create a Pyraminx, a tetrahedron made up of multiple triangles, through my coding. The approach I am taking may not be very precise. You can find my code here: https://codepen.io/jeffprod/pen/XWbBZLN. The issue I'm facing is manually in ...

What could be causing JavaScript's wrapInner function to throw an error?

Somehow, the Firefox add-on I've been working on isn't functioning as expected. The initial line of code is executing without issues, which wraps content in a div element with an id of 'content_cont'. However, any subsequent lines of co ...

The element.find() function is experiencing issues when utilizing a templateUrl within a directive

My aim is to apply focus on an input field using a custom directive within a form. Initially, everything was functioning correctly when utilizing the template property in the directive. However, upon transferring the template into a separate HTML file usin ...

php Ajax call functions correctly on local machine, but fails on server

While attempting to implement a progress bar during script execution, I encountered an issue. The progress bar works correctly in Visual Studio testing, but fails when deployed on a server. Is there a PHP or IIS configuration that might be hindering its fu ...

The CSS class names for Next.js have not been defined yet

Just getting started with next js and trying to use css modules for styling my nav component. However, I noticed that the classname I setup for the nav element is not showing up in the rendered DOM. Even though I can see the generated styles by webpack in ...

Removing dropdown lists from input forms can be achieved without using jQuery by utilizing vanilla JavaScript

Looking to build a custom HTML/JavaScript terminal or shell. Interested in utilizing an input box and form to interact with JavaScript functions/commands. Unsure of how to eliminate the drop-down menu that appears after previous inputs. Pictured terminal: ...

How to Troubleshoot VueJS Component Render Issues After Importing/Calling Components

In one of my projects, I successfully implemented a file uploader component using import and component statements. import fileUploader from '../common/FileUploader.vue'; Vue.component('file-uploader', fileUploader); This implementation ...

Connecting text boxes with JavaScript and JSON for gaming experience

I am currently developing a game and have encountered a slight issue. Currently, there is a text box in the game that prompts the player to run into it to progress to the next level. When the player does so, the next level loads seamlessly, which works per ...

Learn to showcase every enum value with Spring, Thymeleaf, and Bootstrap

Below is the domain model object. @ToString public class Events { private long id; private static long nextId = 1L; @NotBlank(message = "name required") @Size(max = 50, message = "name too long") private String eve ...