Refreshing the dat.gui variable is like giving it a fresh

In the dat.gui interface, there is a dropdown list that allows users to select a number. Once a number is chosen, the jumpSwitcher will correspond to that number. The goal is to replace each list with items specific to the number chosen for Starsystem.

https://i.sstatic.net/POqEf.png

For example, when the number 2 is selected, the list will show 

solPlanets= ['Ilos', 'Tuchanka', 'Illium', 'Palaven']
. However, by default, the list displays ['Mercury', 'Venus', 'Earth', 'Mars', 'Jupiter', 'Saturn', 'Uranus', 'Neptune'] because the default jumpSwitcher value is 1.

The issue arises when the list always displays 

solPlanets= ['Mercury', 'Venus', 'Earth', 'Mars', 'Jupiter', 'Saturn', 'Uranus', 'Neptune']
, regardless of whether the jumpSwitcher is set to 2.

Although an alert message pops up when jumpSwitcher is set to 2, indicating that the value has changed, the list does not update. This issue is likely related to dat.gui not refreshing properly. Despite attempting the listen() method, suggested as the solution, it has not resolved the problem.

A fiddle has been created to demonstrate the issue.

PS: A previous question was asked regarding this matter, but it seems the problem lies with dat.gui failing to refresh values, rather than a JavaScript issue. Therefore, the previous question was deleted as it was targeting the wrong audience, and a fiddle was not provided at that time.

javascriptthree.jsdat.gui

Answer №1

To properly manage the list of planets, you need to recreate the controller.

I made some adjustments to your jsfiddle example, which you can view here. The key changes are:

function updatePlanets(id) {
    var controller = gui.__controllers[2];
    controller.remove();
    gui.add(data, 'Planets', planets[id]).onChange(doSomeStuff);

    //reset to the first element
    data.Planets = 0;
    gui.__controllers[2].updateDisplay();
}

Additionally, the solution started to function properly after switching the version of DAT.GUI to 0.6.1

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

Postman Guide: Mastering the Evaluation of JSON Arrays

One of the features in Postman allows users to save a specific field from the response body as a variable and then utilize that variable in a subsequent call. For instance, after my initial call to the web service, the response body contains: [ { "id" ...

javascriptjsonpostman

JavaScript hard-coded object functions as an argument, however it does not reference the global object

Recently, I encountered a strange issue while working with JQuery Flot. Initially, my code looked like this: var plot = null; function initPlot () { plot = $.plot("#graph", myData, { /* my options here */ }); } and everything was functioning correc ...

javascriptjqueryscopeflot

Steps to send a prop value to a Vue.js SCSS file

I am trying to include the props (string) value in my scss file Within my component, I am using the nbColor prop with a value of 'warning'. I want to be able to use this value in my scss file where I have a class called .colorNb {color: color(nb ...

javascriptvue.jsvuejs2vue-componentvuejs3

What causes my paragraph textContent to vanish after briefly displaying its value?

As a beginner in JavaScript and HTML, I am taking on the challenge of learning these languages from scratch independently. I have encountered an issue with my code where the word "Hi!" briefly flashes below the "Click Me!" button before disappearing compl ...

javascripthtml

Which one relies on the other: angular-data or angular-cache?

I'm struggling to get angular-cache set up properly. According to the documentation: Angular-cache is a dependency of angular-data and must be loaded before angular-data if you are using angular-data. That's all well and good, but what if I only ...

javascriptangularjscaching

What steps can I take to persistently subscribe to SignalR from an Angular service even in the event of connection failures?

Is there a way to safely attempt to connect to SignalR with intervals between attempts until the connection is established? Also, does anyone have advice on how to handle the different stages of connectivity to the web sockets effectively? We are utilizin ...

javascriptnode.jsangulartypescriptsignalr

Choose between creating an observable pipe within a function or storing it in a variable

Currently, I have a functional code snippet that leverages the Angular service to create an Observable pipeline. This pipeline utilizes operators like mergeMap, filter, map, and shareReplay(1) to manage user authentication and fetch the onboarding status f ...

javascriptangularfirebaseclassrxjs

What is the process for accessing the data attributes of div elements and then transferring them to a cookie?

Although this question may have been answered before, I couldn't find a specific solution. Imagine I have the following div elements... <div class="listings-area"> <div itemtype="http://schema.org/Product" itemscope=""> <a class="lis ...

javascriptjqueryhtmlcss

Troubleshooting Port Issue When Deploying Node/Sequelize Application on Heroku

I am in the process of developing a Node/Postgres application that will be deployed to Heroku. During my attempts to launch the app in a production environment, I encountered a timeout error. According to Heroku, this error is likely due to database or por ...

javascriptnode.jspostgresqlherokusequelize.js

What is the best way to assign an identifier to a variable in this scenario?

script.js $('a').click(function(){ var page = $(this).attr('href'); $("#content").load(page); return false; }); main.html <nav> <a href="home.html">Home</a> <a href="about.html">About</a> < ...

javascriptjqueryhtml

Why does findOneandReplace continue to throw an error stating: "Error: Atomic operators are not allowed in the replacement document"?

I am currently working on a Pokemon Team Builder application with a React front end and an Express back end using MongoDB for the database. After reviewing my TeamSchema, it seems that there are no atomic operators included. Take a look at my TeamSchema b ...

javascriptnode.jsmongodbmongoose

Error: You cannot implement an import statement beyond a module while utilizing reactjs CDN Links

I am developing a Reactjs app using react CDN Links instead of 'npx create-react-app'. I have set up an index.html, index.js, and App.js files. My goal is to import the App.js component into the Index.js file using import App from '../compon ...

javascriptreactjsimportfrontend

Angular renders HTML elements

Greetings! I am currently experimenting with using AngularJS for the frontend and Wordpress as the backend of my project. To load content from Wordpress into Angular, I am utilizing a JSON wordpress plugin along with making $http requests. The content th ...

javascripthtmlwordpressangularjs

I need to know the right way to send a file encoded in Windows-1255 using Express

I'm currently developing an API that is responsible for generating text files. The purpose of this API is to support legacy software that specifically requires the use of Windows 1255 encoding for these files. To create the content of the file, I am r ...

javascriptnode.jsexpresscharacter-encodingiconv

React and Material UI: Ensuring Proper Whitespace Handling in Strings

Exploring the use of Typography component from Material UI (https://material-ui.com/api/typography/) The main objective is to maintain the new lines and spaces in a saved string. For instance, if the string contains leading spaces and new lines, it shoul ...

javascripthtmlreactjsmaterial-ui

Transferring identification data between views within an application (AngularJS, NodeJs, HTML)

I'm working on an HTML page that lists users from MongoDB. The page allows for deleting and updating users. I am encountering an issue with the update button - I want a new HTML page to appear with a form when the button is clicked, capturing the user ...

javascripthtmlangularjs

Is it possible to configure Lambda NodeJS 12.x flags (like --experimental-modules) when using AWS SAM local start-api?

When setting up my nodejs server, I chose to use ES6 module syntax: package.json "type": "module" So far, running my server locally as a nodejs process has been successful. For example: "scripts": { "dev": "npm outdated ; nodemon --experimental-modul ...

javascriptnode.jsaws-lambdaes6-modulesaws-sam-cli

Navigating to a randomly generated ID in Firestore using Vue - A Step-by-Step Guide

My app uses Firestore as a backend for posts. On the screen displaying all categories, when a new category is created it's added to the list. When a category is clicked, I use its id as a parameter to navigate to that specific category and show the po ...

javascripthtmlvue.jsgoogle-cloud-firestorevue-router

What is the best way to add additional buttons to my React App after the initial button has been clicked?

Currently, I am in the process of developing a CSV file loader that converts data into JSON format. The loader will consist of three buttons: 1. The first button allows me to select a file from my computer and load the CSV data for conversion to JSON. 2. ...

javascriptjsonreactjsapi

Choosing read-only text fields using JQuery

I am working on an ASP.NET MVC project and I am looking to select all text boxes with the "readOnly" attribute on the current page. Once identified, I want to trigger a modal jQuery dialog on keypress for each of these disabled text boxes. Any suggestion ...

javascriptjquery