Having trouble selecting the second item in a Dojo Select dijit after adding an item to the top

My dilemma involves two Select dijits that utilize the same data store. The first dijit requires a response, while the second dijit is optional. I'm attempting to add an extra item "None" at the top of the list for the second dijit. However, when this added item is selected, it overrides the ability to select the following item in the list. You can experience this issue by selecting "General lakebed mapping" in the second dijit on this JSBin.

require(["dijit/form/Select",
  "dojo/data/ObjectStore",
  "dojo/store/Memory",
  "dojo/domReady!"
], function (Select, ObjectStore, Memory) {

  var data = [
      { id: 0, label: 'General lakebed mapping' },
      { id: 1, label: 'Bathymetry/Digital Elevation Model' },
      { id: 2, label: 'Ferrous object detections/magnetic anomalies' },
      { id: 3, label: 'Ground-truth data' },
      { id: 4, label: 'Lakebed color' },
      { id: 5, label: 'Lakebed surface type, hardness/smoothness/slope' },
      { id: 6, label: 'Sub-bottom geology' }
  ];

  var store = new Memory({
    data: data
  });

  var os = new ObjectStore({ objectStore: store });

  var s = new Select({
    store: os,
    sortByLabel: false
  }, "target");
  s.startup();

  data.unshift({ id: -1, label: 'None' })
  store.setData(data);
  var s1 = new Select({
    store: os,
    sortByLabel: false
  }, "target1");
  s1.startup();

  s1.on("change", function () {
    console.log("my value: ", this.get("value"))
  });
})

Answer №1

Avoid using the value 0 as an id, since it is considered a falsey value in JavaScript. There is a possibility that the Select dijit source interprets it incorrectly and causes issues. It would be best to substitute with a different value instead.

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

Challenges with calculating the total sum of numbers

Create a function called "countInRange" that accepts a list of numbers as an argument and returns the count of values in the input that fall between 15.3 and 42.19, exclusive of these endpoints. Check out my implementation below: function countInRange(num ...

issue with transparent html5

Here is the code snippet I am struggling with: function clear(){ context2D.clearRect(0, 0, canvas.width, canvas.height); } function drawCharacterRight(){ clear(); context2D.setTransform(1, 0.30, 1, -0.30, 10, 380);//having issues here c ...

Efficient techniques for developing lazy-loading ajax services

What are some efficient ways to create lazy ajax services in angular-js? For instance, I need a resource that returns a promise such as: angular.module('MyModule',[]) .factory('myService', function() { return { getData: fun ...

Scanning barcode and Qrcode with Angular js HTML5 for seamless integration

Looking to scan Barcode and Qrcode on Android, iPhone, and iPad devices for a project that is built on AngularJS and HTML5 as a mobile website. The requirement is not to download any third-party native application on the device, ruling out the use of nati ...

Sharing models between AngularJS controllers

I am currently in the process of developing an application that will showcase various charts and controls to filter the presented data. I have structured the HTML page in a way that remains consistent throughout, leading me to consider creating an HTML tem ...

Error Message: "react has not been defined in Chrome browser"

Currently, I am enrolled in a course on React by Grider on Udemy. Unfortunately, I have encountered an error that I am struggling to resolve. I have attached screenshots for reference, and would appreciate any guidance on how to fix this issue. You can vie ...

generate new content for a webpage by clicking on a product

Hello everyone, I am currently in the process of creating a website dedicated to t-shirts. Utilizing a JSON file, I have successfully set up dynamically generating preview cards for each product. However, I now face the challenge of needing to generate c ...

Incredibly peculiar actions exhibited by a coffeescript/javascript array of functions

Something strange is happening with my code in Chrome, creating a mysterious quantum duel state where functions turn into undefined when pushed to an array... eerie! I am constructing an array of functions using the code below to chain them together for c ...

accept various query parameters in a GET request in a REST API written in Node.js

Is there a way to dynamically receive multiple parameters in a GET request without knowing which ones will come and which ones won't, in order to filter using the find() method? This pertains to NODE JavaScript with Mongoose app.get('/venta&apos ...

Locating a specific item within a mongoDB array

In my collection, I have a mix of strings, objects, and an array containing multiple objects. I'm trying to delete all orders with the object id of ObjectId("587ec66e5ed5cb0061092dbe"). Please refer to the schema and data provided below. I've exh ...

Error Message: Nodemon Node Error - Module 'C:Program FilesGit ode_modules odemonin odemon.js' Not Found

Currently diving into the world of NodeJS. Running a Windows 7 64 Bit setup. Node.js and NPM are up and running smoothly. Nodemon is also installed locally and globally. When trying to execute the command: "nodemon server.js" or simply "nodemon" An er ...

How to eliminate a <script> tag from the DOM by referencing the script ID in Angular

Just starting out with js and angular, so any help is greatly appreciated. I'm dealing with a situation where 3 scripts are added to the child component's dom in the ngOnit lifecycle, based on an id received from a parent input. My goal is to rem ...

Is it possible to create my TypeORM entities in TypeScript even though my application is written in JavaScript?

While I find it easier to write typeorm entities in TypeScript format, my entire application is written in JavaScript. Even though both languages compile the same way, I'm wondering if this mixed approach could potentially lead to any issues. Thank yo ...

Navigating iFrames using Phantomjs Watir

Trying to access a login page using my script: Using PhantomJS and Watir. The issue with the login page is that the login textfields are within an iFrame: <iframe class="hiFrame" data-reactid=".0.0.0.1.0.1.0.0.$frame" src="https://instagram.com/accou ...

Display the cost in a dynamic label that adjusts accordingly as the user modifies its value

Currently, I am facing the following issue. I am in the process of creating a form where users can choose from a selection of products they want to order. The form currently looks like this: <input type="number" class="bestelformulier" name="PizzaMaga ...

Authenticate the user by comparing the entered username and password with the database records. If they match, proceed to redirect the user to their profile page. Otherwise, log

Attempting to complete this assignment which involves a user entering their username and password. If the information matches what is stored in the database, the user should be redirected to their profile page where a personalized greeting message is displ ...

monitor updates to the nodejs database table

Is there a way to monitor changes in a table using Node.js and Sequelize for the connection? My goal is to track changes in user data and send an event to the frontend when a change occurs. I'm currently using Socket.io and I want to avoid using timeo ...

Unable to locate the value property of a null object

I'm currently working on creating a Shopping Cart using HTML, CSS, JavaScript, and JQuery. The idea is that when you click "Add to Cart" for the orange item, most of the HTML elements will disappear, leaving only the table displaying the Shopping Cart ...

Steps to create a shake animation effect for a <span> element within a <div>

<div id="about-desc"> <p> Lorem dolor amet, consectetur adipisicing elit. Officia reprehenderit, sit eligendi deserunt, blanditiis quas porro omnis provident quidem voluptate! Fugit ipsa mollitia, atque commodi asperiores, rerum dicta rat ...

Locate a specific option that matches the value of the selected data-status and set it as "selected" using jQuery

Currently, I am facing an issue where I need to load 2 separate ajax responses into a select dropdown. The select dropdown will have a data-status attribute, and my goal is to loop through the options to find the one that matches the value of the select da ...