The selected data is not being displayed

My input field is not displaying anything.

Below is the script function in my view:

<script>
var Features = [];

function LoadFeatures(element) {
    if(Features.length === 0)
    {
        $.ajax({
            url:'@Url.Action("GetFeatures","Inspection")',
            type: 'GET',
            cache: false,
            dataType: 'json',
            success: function(data){
                Features = data;
                alert(data);
                renderFeature(element)
            },
            error: function (e) {
                console.log(e)
            }
        });
    }
    else
    {
        renderFeature(element);
    }
}

function renderFeature(element) {
    var $ele = $(element);
    $ele.empty();
    $ele.append($('<option/>').val('0').text('Select'));
    $.each(Features, function (i, val) {
        $ele.append($('<option/>').val(val.FeatureId).text(val.Description));
    })
}

The Select element where I intend to display the data:

<table class="table table-responsive">
    <tr>
        <td>Feature</td>
        <td>Result</td>
        <td>&nbsp;</td>
    </tr>
    <tr class="mycontainer" id="mainrowFeature">
        <td>
            <select id="IDFeatures" class="form-control"> ----- Show Data
                <option>Select</option>
            </select>
            <span class="error">Select a Feature</span>
        </td>
        <td>

                <input type="radio" id="RadioOK" name="result" value="1"> OK<br>
                <input type="radio" id="RadioNOK" name="result" value="0"> NOK<br>
        </td>
        <td>
            <input type="button" id="BtnAdd" value="Add" style="width:80px" class="btn btn-success" />
        </td>
    </tr>
</table>

Controller Function:

public JsonResult GetFeatures()
    {
        QualityEntities db = new QualityEntities();
        var data = from f in db.Features select f;
        return Json(data.ToList(), JsonRequestBehavior.AllowGet);
    }

Although the controller is supposed to pass data in the JsonResult function, nothing is displayed in the select field.

In my initial view script:

<script type="text/javascript">
            window.onload = function () {
                LoadFeatures($("#IDFeatures"));
            };

Answer №1

At last, I've figured it out. I made a change to my controller function:

 public JsonResult RetrieveCharacteristics()
    {
        int typeId = 10; -- For now
        QualityEntities db = new QualityEntities();
        var data = (from c in db.Characteristics where c.ComponentId == typeId
                    select new {
                        CharacteristicId =c.CharacteristicId,
                        Description = c.Description
                    }).ToList();
        return Json(data, JsonRequestBehavior.AllowGet);
    }

I'm not sure why, but this seems to be the only way it works for me. Thanks everyone.

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

Exploring the Depackaging of ES6 Nested Objects

How can I implement ES6 with Destructuring to give users options? I'm having trouble dealing with nested objects and preventing the defaults from being overwritten by partial objects. Check out this simple example on MDN: function drawES6Chart({si ...

Unable to activate animation within a nested ngRepeat loop

I'm struggling to understand how to initiate animations within a nested ngRepeat using Angular. The CSS class ".test" is supposed to be animated. However, when I apply ".test" on the inner ngRepeat, it doesn't seem to work (Plunker): <div ng ...

Utilizing spine.js in conjunction with haml

Recently, I've been experimenting with spine.js and delving into its view documentation. In particular, the example using eco as the templating engine left me feeling less than impressed. Personally, I much prefer working with haml for my templating n ...

Managing HTTP requests across different HTML pages in a Cordova mobile application

I have developed a Multiple Page Application (MPA) for Android and iOS which navigates to different pages when users want to view them. Everything is running smoothly so far, but I now want to add some backend sync features. The issue I am facing is that I ...

Tips on retrieving an input value from a dynamic list

I am struggling to retrieve the correct value with JavaScript as it always shows me the first input value. Any help would be greatly appreciated! Thank you in advance! <html> <head> </head> <body> <?php while($i < $forid){ ...

Issues have been identified with React Native UI components RCTBubblingEventBlock and RCTDirectEventBlock not functioning as expected

In my custom native view within an Ignite project, I am facing a challenge with setting up communication from Objective-C to React Native. While the communication from React Native to iOS works using HTML injection, the reverse direction is not functioning ...

Application unable to save data to file with no indication in error logs

Recently, I've been experimenting with the Capture-Website package, which is designed to save website screenshots to a file. Initially, everything was working smoothly until I decided to restart the server. Now, although my code is running without a ...

Troubleshooting a Malfunctioning AJAX Request in a WordPress Plugin

After carefully reviewing this post about a jQuery Ajax call in a Wordpress plugin page, I found that it closely matched my current issue. My basic Wordpress plugin is designed to offer a specific membership form that passes payment details to PayPal for p ...

I'm having trouble getting the HTML checkbox symbol to show up correctly. My goal is to create all the elements using the DOM

I am currently building all of my elements manually through the DOM tree, and I am attempting to insert a checkbox symbol in this manner: //Add date var tdDate = document.createElement("td"); tdDate.textContent = ("" + workoutList[idx].date); ...

Utilizing data in mongoose: A beginner's guide

I have two database models: User and Conversations. The User model has the following schema: const userSchema = mongoose.Schema({ username: String, logo: String, ..... }) and the Conversation schema is as follows: const conversationSchema = mongo ...

How to incorporate text into the white circle object using three.js

View the current state of my project on this JS Fiddle. I am looking to incorporate rotating text, whether in 3D or 2D. The text should rotate in sync with the white circle. I am open to any method that achieves the desired outcome. Below is the provided c ...

The function is not explicitly declared within the instance, yet it is being cited during the rendering process in a .vue

import PageNav from '@/components/PageNav.vue'; import PageFooter from '@/components/PageFooter.vue'; export default { name: 'Groups', components: { PageNav, PageFooter, }, data() { return { groups: ...

Interested in retrieving the dynamically changing value of LocalStorage

Hopefully I can articulate my issue clearly. I am implementing a feature where CSS themes change upon button clicks. When a specific theme button is clicked, the corresponding classname is saved to LocalStorage. However, since the key and value in LocalSt ...

When "this" doesn't refer to the current object, how to self reference an object

I am currently working on developing a modular series of element handlers for an application that features pages with different configurations. For example, the 'Hex T' configuration includes elements labeled from 'A' to 'O', ...

Is it possible to send data to the server in node.js before the page is loaded?

Once a user has logged in, their data is stored on the client side. There are certain pages that can be viewed without requiring a user to log in... For instance, I have created a route on node.js which generates a profile page based on a URL parameter. ...

Transferring information between pop-up and webpage

I have developed a simple form within an ERP system that allows users to create quick support tickets. However, instead of manually inputting the client ID in the form, I want to provide them with a more user-friendly option. My idea is to include a search ...

Discovering the Nearest Point to the Mouse Cursor using Three JS Ray Casting

Three.js version r85 While using raycasting in Three JS, a list of points is generated, and I am interested in identifying the point closest to the cursor. It appears that the first point returned is typically the one nearest to the camera. Is there a me ...

When utilizing Md-select in Protractor, how can the dropdown list be accessed?

I am having trouble locating the option from the dropdown menu that I need to select. Despite trying various methods, I have not been successful. <md-select ng-model="card.type" name="type" aria-label="Select card type" ng-change="$ctrl.onCardSelecti ...

Selecting JavaScript Libraries During the Development of a Web Application

Transitioning from PHP & Java/Android development to web app development can feel overwhelming, especially with the abundance of Javascript Frameworks available. Check out this comparison of popular JavaScript frameworks View a list of the top JavaSc ...

developing a fresh node within the jstree framework

Recently, I have been working on creating a node using crrm as shown below $("#TreeDiv").jstree("create", $("#somenode"), "inside", { "data":"new_node" }); This specific function is triggered by a wizard, enabling me to seamlessly create a new node withi ...