When items are removed client-side, the Listbox becomes null

Given a Web Forms project inherited by me, I am relatively new to the field of Web development. The page in question features 2 listboxes: lstCaseLoad, containing "Caseloads" (ID numbers), and lstAssignedCaseLoad, filled with Caseloads chosen by the Form User. Users can select Caseloads from lstCaseLoad and use a button to transfer them to lstAssignedCaseLoad using client-side JavaScript. Additionally, users can also remove Caseloads from lstAssigned and move them back to lstCaseLoad on the client side. To save these changes to SQL, the user must click a submit button.

The process of adding new CaseLoads from lstCaseloads to lstAssigned and submitting is functioning properly. However, I am encountering difficulties when attempting to remove items from lstAssigned. It appears that lstAssigned becomes null during submission, preventing successful saving. Please see the code snippet below for reference:

Listboxes:

<asp:ListBox ID="lstCaseLoad" runat="server" SelectionMode="Multiple" />
<asp:ListBox ID="lstAssignedCaseLoad" runat="server" Height="175px" SelectionMode="Multiple" /> 

            //Adding Caseload to Assigned
            $("#btnAddCaseLoad").bind("click", function () {
                var options = $("[id*=lstCaseLoad] option:selected");
                $("[id*=lstAssignedCaseLoad]").append($(options).clone());

                $(options).remove();

                return false;
            });


            //Removing Caseload from Assigned
            $("#btnRemoveCaseLoad").bind("click", function () {
                var options = $("[id*=lstAssignedCaseLoad] option:selected");
                $("[id*=lstCaseLoad]").append($(options).clone());
                $(options).remove();

                return false;
            });

Code Behind

        protected void Page_Load()
        {

            if (!IsPostBack)
            {
                //Retrieving and Binding listboxes. No issues here
                GetData();
                BindData();
            }
            else
            {
                var test= Request.Form.AllKeys;
                //Temp variable to check all elements for debugging. lstAssignedCaseLoad is missing when deleting. Is fine when adding new caseload
     
          
                //Read listAssignedCaseLoad items to comma seperated strings. Becomes null when trying to remove items
                string strCaseLoad = Request.Form[lstAssignedCaseLoad.UniqueID];


                //Transfer string strCaseload to (field)List<string> for saving. Works fine when string is not empty
                userCaseLoadList = ProcessListString(strCaseLoad, lstAssignedCaseLoad);
            }
        }
        //Submit button method. Works as intended
        protected void EditUser_Click(object sender, EventArgs e)
        {
            identityMgr.EditUser(Email.Text, userRoleList, userCaseLoadList);
        }

I have tried searching for solutions but haven't been able to find an exact match for this issue. Thank you for your time and assistance!

Answer №1

The reason for this behavior is related to the "selected" attribute of options in a listbox. When you choose an option from the "lstCaseLoad" that does not have the "selected" attribute, and then click on the remove button, it will be added to the "lstAssigned" without the "selected" attribute because we are using cloning. To reverse this process, you need to select (click) the option again from the "lstAssigned" before clicking on remove. You can verify the behavior of the "selected" attribute by inspecting the options before clicking the button.

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

Vue.js and the hidden input value that remains unseen

I am currently developing a shopping list application using Vue.js and I was wondering if there is a conventional method to achieve my requirements. My app consists of a list of items with add and delete buttons: https://i.stack.imgur.com/yQfcz.png const ...

Is it possible for me to sum up each row in the table and then deactivate it using a checkbox?

I am facing an issue with my code. The problem arises when I utilize the each() function; it iterates from the first cell to the end of the row, fetching every value along the way. What I actually want is for it to retrieve the value from each row individu ...

Utilize AngularJS to bind to the input field's "enter" key and automatically submit the form if the input

I have been tasked with creating a directive that allows users to navigate to the next input or button in a modal window: .directive('autoVrm', function () { return function (scope, element, attrs) { var counter = 0; ...

Changing a callback function into a promise in Node.js for OpenTok integration

MY FUNCTIONAL CODE (SUCCESSFULLY WORKING!) I have developed a function with callback to generate tokens and create sessions for OpenTok. This function is then exported to the application. The function //Dependencies var opentok = require('./ot&ap ...

Moving icon that appears when hovering over a menu button

Before diving into this, please take a moment to visit the following website to understand my goal: You'll notice there is a noticeable RED arrow positioned below the menu. What I aim to accomplish is... when I hover over a menu button, the arrow smo ...

Fetching images stored on an external website and loading them into an iframe within an Electron application

I am contemplating turning my website into a desktop application using either an iframe or webview within an Electron app. My website contains numerous images that I wish to cache in the Electron app to prevent repeated downloads. Is it possible to access ...

The datatable fails to render after executing a function in AngularJS

When I load the page without calling a function, the data is displayed in a datatable perfectly fine. However, if I try to generate the datatable after calling a function, it does not work. HTML: <div class="widget-body no-padding"> ...

I developed an RPG game with an interactive element using jQuery. One of the biggest challenges I'm facing is the random selection process for determining which hero will be targeted by the enemy bots during battles

Hello, this marks my debut on stack overflow with a question. I've created a game inspired by old school RPGs where players choose from three heroes based on the Marvel universe to battle one of three enemies. The problem I'm facing is that even ...

How can we transfer a jQuery value from an input field without using a single

This task may seem challenging. How can single quotes be eliminated from a variable when passed directly to another variable? I am using jQuery variable $("#test").val() to extract the value from an input below <input type="text" ...

Enhancing highcharts gauge with dynamic data from JSON

I've been working hard to get my Gauge looking just right, and now I'm attempting to update it with JSON data from Thingspeak. However, when I check the page, I keep running into a ReferenceError - it says "data is not defined." If you want to t ...

Tips for creating a versatile generic function in javascript that covers all arguments sizes

When working with node.js, a tcp server typically has several methods for listening: server.listen(port, [host], [backlog], [listeningListener]) server.listen(path, [listeningListener]) server.listen(handle, [listeningListener]) In the context of creatin ...

Adding values to an array with the click of a submit button in React JS

I have a unique challenge with creating a form that includes custom inputs. const Input = (props) => { return ( <div> <label className={classes.label}>{props.label} <input className={classes.input} {... ...

Discover the way to utilize the java enum toString() function in jQuery

In my Java Enum class called NciTaskType, I have defined two tasks: Pnd Review Woli and Osp Planning. public enum NciTaskType { PndReviewWoli, // 0 OspPlanning, // 1 ; @Override public String toString() { switch (this) ...

Learn the ins and outs of Ember.js with our comprehensive tutorial and guide. Discover solutions to common issues such as DS

Learning Ember has been a challenging experience for me. The guide I am using seems to be lacking important information that I need. I keep encountering two specific errors: Uncaught Error: Ember.State has been moved into a plugin: https://github.com/e ...

Ways to avoid scrolling on a fixed element

Here is the HTML setup I have... body .top .content The issue I am facing is that when scrolling reaches the end of the ul in the .top element, the background starts to scroll. This can be quite disorienting and makes the site slow on tablets. Even ...

Managing the vertical space within a nested accordion section

I've built a custom accordion component, but I'm encountering scrolling issues when trying to use nested levels within the accordion. I'd like to prevent scrolling inside the accordion section and instead have the page scroll below it. Any ...

Initiate communication with the Office365 Graph API

I am looking to make Office365 Graph HTTP requests using C#. For example, making a graph query like https://graph.microsoft.com/v1.0/users will retrieve all users in a json format. I need to accomplish this using C# so that I can efficiently work with th ...

Instead of only one menu icon, now there are three menu icons displayed on the screen. (Additionally, two more divs containing

When visiting on a smartphone browser, you may notice that instead of one menu icon, three icons appear. Upon inspecting the elements, you will find that there are three div's that look like this: <div class="responsive-menu-icon">&l ...

Is there a way to automatically fill number fields by clicking on radio buttons using a JavaScript function?

Currently, I am facing an issue with a task that involves three elements: 1. Two Number fields (from standard class) that need to be populated dynamically. 2. A Javascript function designed to extract coordinates using geolocator. 3. A radio button which, ...

What could be causing my post request to function properly in POSTMAN but not in my React application?

Here are my POSTMAN headers along with the settings I used to send my POST. It only started working when I switched the Content-Type to application/json. https://i.stack.imgur.com/Xz2As.png https://i.stack.imgur.com/aJtbD.png This pertains to the server ...