I have 2 external JavaScript files, one is set up like a "namespace", and the other file calls it.
Here is how my "namespace" looks like
var GlobalScript = {
GetAllStates: function () {
$.ajax({
type: "GET",
url: URLParam.GetStatesForDropdown,
contentType: "application/json; charset=utf-8",
success: function (data, textStatus, jqXHR) {
ShowStates(data);
}
})
},
ShowStates: function (stateData) {
$("#acVendorState").kendoDropDownList({
dataSource: stateData,
dataTextField: "StateName",
dataValueField: "StateID",
animation: false,
optionLabel: {
StateName: "-- Select State --"
}
});
}
}
Here is the script that is calling the GetAllStates() function,
$(document).ready(function () {
GlobalScript.GetAllStates();
});
Now this doesn't work, however, if make the "namespace" file look like this...
function ShowStates(stateData){
$("#acVendorState").kendoDropDownList({
dataSource: stateData,
dataTextField: "StateName",
dataValueField: "StateID",
animation: false,
optionLabel: {
StateName: "-- Select State --"
}
});
}
var GlobalScript = {
GetAllStates: function () {
$.ajax({
type: "GET",
url: URLParam.GetStatesForDropdown,
contentType: "application/json; charset=utf-8",
success: function (data, textStatus, jqXHR) {
ShowStates(data);
}
})
}
}
Then my view that has the dropdownlist will populate.
My question is how to make it work the way I have it the first way because if I do it the second way then its kind of pointless (at least to the best of my knowledge) to do it the way I am doing it.
ShowStates
isn't a variable. It is a property of the object assigned to GlobalScript
.
ShowStates(data);
should be GlobalScript.ShowStates(data);