Develop Reference

on change from jquery is not doing what it supposed to do

I have 4 Ajax Scripts that update chained dropdowns based on other one selections
<script type="text/JavaScript">
//get a reference to the select element
$select = $('#building');
//request the JSON data and parse into the select element
$.ajax({
url: '/api/get_building/',
dataType:'JSON',
success:function(data){
//clear the current content of the select
//iterate over the data and append a select option
$.each(data, function(key, val){
$select.append('<option value="' + val.id + '">' + val.as_char + '</option>');
})
},
});
function getunit() {
//get a reference to the select element
$select = $('#unit');
$id_lease = $('#id_lease');
$id_leaseterm = $('#id_leaseterm');
//request the JSON data and parse into the select element
var c_id = ($("select[name='building'] option:selected").attr('value'));
c_url = "/api/get_unit/"+c_id+"/";
$.ajax({
url: c_url,
dataType:'JSON',
success:function(data1){
//clear the current content of the select
$select.empty();
$select.append('<option value="-1"> Select unit </option>');
$.each(data1, function(key, val){
$select.append('<option value="' + val.id + '">' + val.as_char + '</option>');
})
getlease();
},
});
}
function getlease() {
//get a reference to the select element
$select = $('#id_lease');
$id_leaseterm = $('#id_leaseterm');
//request the JSON data and parse into the select element
var s_id = ($("select[name='unit'] option:selected").attr('value'));
s_url = "/api/get_lease/"+s_id+"/";
$.ajax({
url: s_url,
dataType:'JSON',
success:function(data1){
//clear the current content of the select
$select.empty();
$select.append('<option value="-1"> Select lease</option>');
//iterate over the data and append a select option
$.each(data1, function(key, val){
$select.append('<option value="' + val.id + '">' + val.as_char + '</option>');
})
},
});
}
function getleaseterm() {
//get a reference to the select element
$select = $('#id_leaseterm');
//request the JSON data and parse into the select element
var l_id = ($("select[name='lease'] option:selected").attr('value'));
//var l_id = 13;
l_url = "/api/get_leaseterm/"+l_id+"/";
$.ajax({
url: l_url,
dataType:'JSON',
success:function(data1){
//clear the current content of the select
$select.empty();
$select.append('<option value="-1">Select term </option>');
//iterate over the data and append a select option
$.each(data1, function(key, val){
$select.append('<option value="' + val.id + '">' + val.as_char + '</option>');
})
},
});
}
</script>
And the following controls in my form I am updating
<select name="building" id="building" onchange="getunit();">
<option id="-1">Select building</option>
</select>
<select name="unit" id="unit" onchange="getlease();">
<option id="-1">Select unit</option>
</select>
<select class="select" id="id_lease" name="lease">
<option value="" selected="selected">---------</option>
</select>
<select class="select" id="id_leaseterm" name="leaseterm">
<option value="" selected="selected"></option>
</select>
My problem is that when I update the dropdown id_lease it dosent have the on change call. (it is automatically generated from backend)
So for this reason I am adding this line with jquery line in script
$("#lease_id").on("change", getleaseterm());
but it gives me an error 404 that cannot find the values for "get_leaseterm" since I assume it get triggered when page is loading. And all my script are not loading.
So problem is in this last line. How can I solve it?

As Pointy specified removing the () helped as well I was calling wrong id
final version that worked is:
$("#id_lease").on("change", getleaseterm);

Why always getting last row from json array result when iterate through with Jquery

I have json data in this structure
here is my json code
https://jsonblob.com/309e8861-7f26-11e7-9e0d-cf3972f3635e
and here is my jquery code example
$("#getJsonData").click(function(){
$.get(base_url + 'roles/index', function(data) {
var data = $.parseJSON(data);
$.each(data, function(index, val) {
$("#result").html("<p>" + val.name + "</p>");
});
});
});
HTML file
<button id="getJsonData">Load role list</button>
<div id="result"></div>
I don't get this, I get every value from json in console when do console.log, but when use html method to display result as html in screen it just showing last value from ending last json array. What is wrong here?

jquery .html always overrite previous html so we cant use html in loop section instead of that we can use append it simply append your p tag in result div
Instead of using this:-
$("#result").html("<p>" + val.name + "</p>");
use like this:-
$("#result").append("<p>" + val.name + "</p>");

You are overwriting the html with the code
$("#result").html("<p>" + val.name + "</p>");
Instead you can store the result in variable and then you write it to the element.Like this
$("#getJsonData").click(function(){
$.get(base_url + 'roles/index', function(data) {
var data = $.parseJSON(data);
var html = '';
$.each(data, function(index, val) {
html +="<p>" + val.name + "</p>";
});
$("#result").html(html);
});
});

Your code should be :
$("#getJsonData").click(function(){
$.get(base_url + 'roles/index', function(data) {
var data = $.parseJSON(data);
var listHtml="";
$.each(data, function(index, val) {
listHtml=listHtml+ "<p>" + val.name + "</p>";
});
$("#result").html(listHtml);
});
});
And Html should be same as your
<button id="getJsonData">Load role list</button>
<div id="result"></div>
Working example is here

Dropdown populated througn javascript is showing each character as a dropdown option

I am using this javascript method to populate dropdown-
<script type="text/javascript">
function openPopup()
{
$("#wrapper").html('');
$.get('getClanLeads', function(data){
var options = '';
$.each(data, function(i,data){
options +='<option value="'+ data +'">' + data + '</option>';
});
$("#wrapper").append('<select>' + options + '</select>');
alert(data);
location.href = "#divModalDialog1";
});
}
</script>
But this is showing the data's characters as the options of the dropdown. Not the data values fetched from the database.
The data is returned from server as--
[{"user_id":3},{"user_id":4}]
But it is added to dropdown as '[', '{', '"', 'u', 's', 'e', 'r', ...

The data isn't being interpreted as JSON. Changing the outer call to:
$.get('getClanLeads', function(data){
// ...
}, 'json');
should help.
After that, you need to be careful about which part of each element you use:
$.each(data, function(i,item){
options +='<option value="'+ item.user_id +'">' + item.user_id + '</option>';
});

MVC Dropdownlist Cascade - how to fire event on third ddl when first ddl selection changes?

I have three DDL's in a view. I fire a javascript function on 'onchange' of the first DDL to populate the second, and of the second to populate the third. Works fine.
Problem is, when first DDL is set to unselected i.e. "Select a Value", the second DDL gets fired and sets itself to "Select a Value", but the second DDL 'onchange' event does not fire, so the third DDL remains populated with the data that it got from the previous selection.
How do I get the second DDL to fire an event I can use to refresh the third DDL? Or is there another way?
Code below:
#{
ViewBag.Title = "CascadingList";
Layout = "~/Views/Shared/_Layout.cshtml";
}
#{Html.EnableUnobtrusiveJavaScript(true);}
<script type="text/javascript">
$(document).ready(function () {
getMarket();
});
function getMarket() {
var url = '#Url.Content("~/Strategies/MarketList")/';
$.getJSON(url, function (data) {
var items = "<option>Select a Market</option>";
$.each(data, function (i, market) {
if (market.Value.indexOf("\'") > -1) {
s = market.Value + " " + market.Text;
alert(s + ": Market.Value cannot contain \'")
}
items += "<option value='" + market.Value + "'>" + market.Text + " </option>";
});
$('#MarketsID').html(items);
});
}
function getShareType() {
var url = '#Url.Content("~/Strategies/ShareTypeList")/' + $('#MarketsID').val();
$.getJSON(url, function (data) {
var items = '<option>Select an Asset Type</option>';
$.each(data, function (i, shareType) {
items += "<option value='" + shareType.Value + "'>" + shareType.Text + " </option>";
});
$('#ShareTypesID').html(items);
});
}
function getShare() {
var url = '#Url.Content("~/Strategies/ShareList")/' + $('#MarketsID').val() + '|' + $('#ShareTypesID').val();
$.getJSON(url, function (data) {
var items = '<option>Select a Share</option>';
$.each(data, function (i, share) {
items += "<option value='" + share.Value + "'>" + share.Text + "</option>";
});
$('#SharesID').html(items);
});
}
</script>
<h2>Strategy</h2>
<div id="MarketsDivID">
<label for="Markets">Markets</label>
<select id="MarketsID" name="Markets" onchange="getShareType()"></select>
</div>
<div id="ShareTypesDivID">
<label for="ShareTypes">ShareTypes</label>
<select id="ShareTypesID" name="ShareTypes" onchange="getShare()" ></select>
</div>
<div id="SharesDivID">
<label for="Shares">Shares</label>
<select id="SharesID" name="Shares" ></select>
</div>

Try selecting a value for the select after populating it using $('#selectID').val(), if that doesn't work trigger onchange like this ; $('#selectID').trigger('change')

Thanks - I tried that and went around in circles - but it made me think differently. Fixed it by adding a call to the function that populates the third DDL in the function that populates the second DDL - that way it always gets called.
function getShareType() {
var url = '#Url.Content("~/Strategies/ShareTypeList")/' + $('#MarketsID').val();
$.getJSON(url, function (data) {
var items = '<option>Select an Asset Type</option>';
$.each(data, function (i, shareType) {
items += "<option value='" + shareType.Value + "'>" + shareType.Text + "</option>";
});
$('#ShareTypesID').html(items);
});
**** Added This ****
getShare();
}

Parsing JSON data into SELECT prints UNDEFINED

My JSON being sent from the server is like this:
data[
{"userFullName":"Tim, Bill","id":"LOt3","organisation":"FAP","loginSystem":"A","userId":0},{"userFullName":"Bruce, David","id":"LNA","organisation":"ES","loginSystem":"A","userId":0}
]
In the success of my AJAX call,I am handling the data as follows :
success: function (data) {
javascript: console.log('data' + data);
$.each(data, function(key, value) {
javascript: console.log('id' + value.id);
$('#selectStaff').append('<option value="' + value.id+ '">' + value.userFullName + '</option>');
});
}
selectStaff is the ID of the SELECT control...
The SELECT control is drawing with 'undefined' populated in the drop down.
The console.log('data' + data) prints the following line:
data[{"userFullName":"Tim, Bill","id":"LOt3","organisation":"FAP","loginSystem":"A","userId":0},{"userFullName":"Bruce, David","id":"LNA","organisation":"ES","loginSystem":"A","userId":0}]
However, the line javascript: console.log('id' + value.id) prints out 'UNDEFINED'
Would someone please describe the correct syntax to me?

Error in your code val.id
Working Fine
Fiddle
Script
var user=[{"userFullName":"be, apple","id":"xdsd3","organisation":"FL ","userId":0},{"userFullName":"Mack, David","id":"lol323","organisation":"ES","userId":0}]
$.each(user, function(key, value) {
console.log('id' + value.id);
$('#selectStaff').append('<option value="' + value.id + '">' + value.userFullName + '</option>');
});