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> </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"));
};