Ways to modify the shown data in dojox DropDownSelect

I have a DropDownSelect element set up with the following HTML tags:

<select id="someId" dojoType="dojox.form.DropDownSelect" >
<option>Loading...</option>
</select>

Now, when the xhr load function is triggered, I want to replace the initial "Loading..." option with a new option like "Choose Option". Here's my current approach:

load: function(response) {
        // Removing the existing option while keeping it displayed
        dojo.byId("someId").removeChild(dojo.byId("someId").lastChild); 
        // Adding the new desired option below
        dijit.byId("someId").addOption({label: "Choose Option", value:"Select"});
        // Attempt to set the displayedValue (not working)
        //dijit.byId("someId").setAttribute('displayedValue','Select');
        // Adding additional options fetched through ajax
        dijit.byId("someId").addOption(response);
        return response;
        },

Can anyone suggest how to display a different option in a DropDownSelect using Dojo version 1.3?

javascriptdojo

Answer №1

//1. creating a drop-down menu in HTML

<select id="ddselect" name="selection" dojoType="dojox.form.DropDownSelect">
    <option value="none">
        Loading...
    </option>
</select>

// 2. Handling the onLoad event:

    handleLoad: function(response) {
                    // accessing widget by its id
        var dropdown = dijit.byId("ddselect");
        // removing the loading option
                    dropdown.removeOption(0);
                    // adding a new option
        dropdown.addOption({ label: 'newValue1', value: 'nv1'});
                    // or add multiple options at once
        dropdown.addOption([{ label: 'newValue2', value: 'nv2' }, { label: 'newValue3', value: 'nv3'}]);
    }

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

When using getStaticPaths, an error is thrown stating "TypeError: segment.replace is not a function."

I am a beginner when it comes to using Next.js's getStaticPaths and I recently encountered an error that has left me feeling lost. Below is the code I have written (using query from serverless-mysql): export async function getStaticPaths() { cons ...

javascriptreactjsnext.js

Utilizing streams for file input and output operations in programming

This unique piece of code allows for real-time interaction with a file. By typing into the console, the text is saved to the file and simultaneously displayed from it. I verified this by manually checking the file myself after inputting text into the cons ...

javascriptnode.jsnode.js-stream

Update the div using AJAX following the form submission

I'm having trouble displaying the loading image before every AJAX response when I submit the form. Currently, the image only shows on the first submission. Here's the code I'm using: $('form.ajax').on('submit', function ...

javascriptphpjqueryhtmlajax

What could be causing the syntax error I'm encountering while trying to extract data from this JSON file?

I've been encountering a syntax error in my console that reads "Uncaught SyntaxError: Unexpected token '}'. I've checked my JavaScript code, but being new to coding, I'm not sure why this is happening. Could the error be on the JSO ...

javascriptnode.jsjsondiscord.js

obtain a Javascript variable within a Jade template by using inline code

script. var hide_section = 'block'; .title(style='display:#{hide_section}') I received an undefined value, any thoughts on why? Could it be because #{hide_section} is trying to access a variable from the back-end, such as the cont ...

javascriptnode.jspug

Changing the Style of a CSS Module Using JavaScript

Embarking on a journey into Javascript and React, I am currently working on my first React app. My aim is to adjust the number of "gridTemplateRows" displayed on the screen using a variable that will be updated based on data. Right now, it's hardcode ...

javascriptcssreactjssasscss-modules

Troubining AJAX for Generating a New Template: Addressing Missing Template Error

I have been working on integrating AJAX into my to-do application, but I keep encountering a missing template error (Missing template items/create, application/create with {:locale=>[:en], :formats=>[:html], :variants=>[], :handlers=>[:erb, :bu ...

javascriptruby-on-railsajax

The art of slipping away from a character in JavaScript while adding HTML using jQuery

I am trying to add multiple HTML canvas elements to an existing HTML canvas. <div> <canvas id="BackGroundImage" width="800" height="300" style="position: absolute; z-index: 0;"></canvas> <canvas id="canvas" width= ...

javascriptjqueryhtmlcanvas

Animating SVG elements with the rotation property in SVG.js

Currently, I am utilizing Javascript, Jquery, SVG, and SVG.js in my project. My goal is to rotate a circle around its origin while it's animating. The issue arises when the animation keeps restarting abruptly, causing a jittery motion. Here is the ini ...

javascriptjqueryanimationsvgsvg.js

What is the best way to enforce a required selection from one of the toggle buttons in a React form?

Is there a way to require the user to click one of the toggle buttons in a react form? I need to display an error message if the user submits the form without selecting a button. I tried using the "required" attribute in the form but it didn't work. H ...

javascriptnode.jsreactjs

How to Override Certificate Expiry in JavaScript

Is there a way to bypass security for an expired certificate when making an Https post request in Javascript? I have been successful in doing this with C# and Java, but unsure about how to proceed in JavaScript. function post() { var xmlhttp; xmlhtt ...

javascriptajaxpostssl-certificate

React + Redux triggering excessive re-renders of mapped components when making additional API calls

I am in the process of developing a website similar to MyAnimeList(MAL) using Jikan, an unofficial MAL API integrated with React and Redux. I want to replicate the promotional video section on the home page that showcases thumbnails of popular anime videos ...

javascriptreactjsredux

Include draggable functionality to a seating chart that is generated dynamically

I developed a function that generates table seats dynamically with equal spacing. The issue arises when I try to drag names from a list and drop them onto the seats as children. Unfortunately, I can't seem to achieve this functionality with the dynami ...

javascriptjqueryhtmlcssjquery-ui

A lateral sliding motion

Here is the HTML code I am working with: <div class="menuTabs"> <div class="mtabArrowLeft">Left</div> <input class="menutabBTN" name="" type="button" value="a" /> <input class="menutabBTN" name="" type="b ...

javascriptjquerycss

Error: There was an issue registering the component as the target container is not recognized as a valid DOM element

Upon executing the React code below, I encountered the following error: import React from 'react'; import ReactDOM from 'react-dom'; ReactDOM.render( <div id="root"> <h1>Hello, world!</h1></div>, document ...

javascriptreactjsdomreact-router

Identifying the Origin of the Mouse Pointer When Hovering Over Elements

Could someone please advise on how to detect the movement of the mouse pointer using jQuery when it hovers over an element such as a div? I am looking for a way to determine if the mouse pointer entered the element from the top, left, bottom, or right sid ...

javascriptjquery

Hover over the pop-up menu

Struggling with adding mouseover effect to a website created using basic html and css (not html5). Looking to display text with background image when user hovers over a link. Here is an example... REGULAR: ON HOVER: I'm not sure if it's achiev ...

javascripthtmlcssxhtmldhtml

The ES6 method of binding click handlers with parameters in React

After reading numerous articles on the usage of () => {} syntax, binding in the constructor, and binding in the props, I have come to understand that binding this can be performance-intensive. Furthermore, automatic binding with arrow functions incurs a ...

javascriptreactjsecmascript-6

Handling conditional statements in JSX

Here is an example of my straightforward component: function Messages(props) { return ( <View> <View style={styles.messageWrapper} > <View style={styles.isNotMine}> <View style={s ...

javascriptreactjsreact-native

Having a problem with the xmlhttprequest, not confident if it is being called correctly

I encountered a problem with the code I have where a user selects a sales center and it should trigger a currency change. Both selections are dropdowns, but when I choose a sales center, I receive an error saying ReferenceError: makeRequest is not define ...

javascriptajax