jquery function is not executed. What I am missing

Question

@model CETAPPSUGG.Models.CustomAppViewModel
@{
 ViewBag.Title = "UPLOAD YOUR APPLICATION";
}
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<script src="@Url.Content("~/Scripts/jquery.unobtrusive-ajax.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.validate.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.validate.unobtrusive.js")" type="text/javascript"></script>
<script type="text/javascript">
 $(document).ready(function()
 {
 var locationFile;
 $('#txtUploadFile').on('change', function (e) {
 alert('tta"');
 var files = e.target.files;
 //var myID = 3; //uncomment this to make sure the ajax URL works
 if (files.length > 0) {
 if (window.FormData !== undefined) {
 var data = new FormData();
 for (var x = 0; x < files.length; x++) {
 data.append("file" + x, files[x]);
 alert('tta"');
 }
 $.ajax({
 type: "POST",
 url: '/Apps/UploadHomeReport',
 contentType: false,
 processData: false,
 data: data,
 success: function (result) {
 locationFile = result;
 $('#hat').val(result);
 console.log(result);
 },
 error: function (xhr, status, p3, p4) {
 var err = "Error " + " " + status + " " + p3 + " " + p4;
 if (xhr.responseText && xhr.responseText[0] == "{")
 err = JSON.parse(xhr.responseText).Message;
 alert('errrrror"');
 console.log(err);
 }
 });
 } else {
 alert("This browser doesn't support HTML5 file uploads!");
 } }
 });
 function GetCity(_stateId) {
 alert("It called");
 var procemessage = "<option value='0'> Please wait...</option>";
 $("#ddlcity").html(procemessage).show();
 var url = "/Home/GetCityByStaeId/";
 $.ajax({
 url: url,
 data: { stateid: _stateId },
 cache: false,
 type: "POST",
 success: function (data) {
 var markup = "<option value='0'>Select Sub Category</option>";
 for (var x = 0; x < data.length; x++) {
 markup += "<option value=" + data[x].Value + ">" + data[x].Text + "</option>";
 }
 $("#ddlcity").html(markup).show();
 },
 error: function (reponse) {
 alert("error : " + reponse);
 }
 });
 }
 });
</script>
<div class="col-md-12">
@using (Html.BeginForm("AppPost", "Apps", null, FormMethod.Post, new { enctype = "multipart/form-data" }))
{
 @Html.HiddenFor(model => model.Apps.AppFileLocation, new { id = "hat" });
 <table class="table" width="200">
 <tbody>
 <tr>
 <td>Application Name: </td>
 <td>@Html.EditorFor(model => model.Apps.AppName, new { htmlAttributes = new { @class = "form-control" } })
 @Html.ValidationMessageFor(model => model.Apps.AppName, "", new { @class = "text-danger" }) </td>
 </tr>
 <tr>
 <td>Application Description: </td>
 <td>@Html.EditorFor(model => model.Apps.AppDescription, new { htmlAttributes = new { @class = "form-control" } })
 @Html.ValidationMessageFor(model => model.Apps.AppDescription, "", new { @class = "text-danger" })</td>
 </tr>
 <tr>
 <td>Select Category: </td>
 <td>@Html.DropDownListFor(m => m.SelectedFlavorId, Model.FlavorItems) 
 @Html.ValidationMessageFor(model => model.Apps.Categories.Id, "", new { @class = "text-danger", @onchange = "javascript:GetCity(this.value);" })</td>
 </tr>
 <tr>
 <td>Select Sub Category: </td>
 <td>@Html.DropDownListFor(m => m.SelectedFlavorSubCategoryId, Model.FlavorSubCategoryItems)
 @Html.ValidationMessageFor(model => model.Apps.SubCatagories.Id, "", new { @class = "text-danger" })</td>
 </tr>
 <tr>
 <td>Upload Picture: </td>
 <td>@Html.EditorFor(model => model.icon, new { htmlAttributes = new { @class = "form-control" } })
 @Html.ValidationMessageFor(model => model.icon, "", new { @class = "text-danger" })</td>
 </tr>
 <tr>
 <td>Select your Application from Computer: </td>
 <td><input type="file" name="Upload From Computer" id="txtUploadFile" class="makethispretty" required/></td>
 </tr>
 <tr>
 <td class="text-primary">Click Create to Submit</td>
 <td><input type="submit" value="Create" class="btn btn-success" />
</td>
 </tr>
 </tbody>
 </table>
 <select id="deneme" onchange="javascript:GetCity(this.value);"> <option value="1">Opsiyon1 </option>
 <option value="2">Opsiyon2</option></select>
 <select id="ddlcity" name="ddlcity" style="width: 200px"></select>
}
 </div>

function GetCity(_stateId) is not executed. The other functions for txupload file and ajax works fine but getCity function do not work. I even cannot see the alert?. What I am missing. Is there any confusion for the browser. Thank you

• epascarello: because getCity is not global

Answer 1

You are adding the onclick event handler to the ValidationMessageFor. Presumably, you mean to add it to the DropdownListFor?

Also, the function GetCity is defined inside the DOMReady scope. It is not available in the global context where the onclick handler is executed. You'll need to move it outside of $(document).ready(function() { ... });.