0

I'm trying to use autocomplete MVC with Jquery but I can't find my issue.

my Java script not launching and my console is't showing any error. in fact it isn't showing nothing at all. I want to populate my attributes with the relevant data (I started with the student num) of course that my c# function isn't launching also.

thank you for your help

my Controller functions are:

[AcceptVerbs(HttpVerbs.Post)]
        public JsonResult AutoCompleteStudentName(string term)
        {
            //Note : you can bind same list from database  
            var result = new List<KeyValuePair<string, string>>();
            UseClass US = new UseClass();
            List<Student> Lstudents = US.SearchStudentsName(term);
            IList<SelectListItem> List = new List<SelectListItem>();
            foreach (Student s in Lstudents)
            {
                List.Add(new SelectListItem { Text = s.StudentName, Value = s.StudentNum.ToString() });
            }


            foreach (var item in List)
            {
                result.Add(new KeyValuePair<string, string>(item.Value.ToString(), item.Text));
            }

            return Json(result, JsonRequestBehavior.AllowGet);
        }
        [AcceptVerbs(HttpVerbs.Post)]
        public JsonResult GetStudentDetail(int id)
        {
            Student s;
            UseClass US = new UseClass();
            s = US.GetStudentDataStudentID(id.ToString());
            return Json(s);
        }

my HTML code is:

<div class="form-group" id="aa">
            @Html.LabelFor(model => model.StudentName, htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-10">

                insert here
                @Html.TextBox("PassId")

                @Html.TextBox("StudentID")
            </div>
        </div>

and my javascript is:

@section Scripts {
    @Scripts.Render("~/bundles/jqueryval")
    <script src="~/Scripts/jquery-1.12.4.js"></script>
    <script src="~/Scripts/jquery-ui-1.12.1.js"></script>
<script type="text/javascript">
    $(document).ready(function () {
        $("#PassId").autocomplete({
            source: function (request, response) {
                var customer = new Array();
                $.ajax({
                    async: false,
                    cache: false,
                    type: "POST",
                    url: "@(Url.Action("AutoCompleteStudentName", "StudentSubscriptions"))",
                    data: { "term": request.term },
                    success: function (data) {
                        for (var i = 0; i < data.length ; i++) {
                            customer[i] = { label: data[i].Value, Id: data[i].Key };
                        }
                    }
                });
                response(customer);
            },minLength: 1,
            select: function (event, ui) {
                //fill selected customer details on form
                $.ajax({
                    cache: false,
                    async: false,
                    type: "POST",
                    url: "@(Url.Action("GetStudentDetail", " StudentSubscriptions"))",
                    data: { "id": ui.item.Id },

                    success: function (data) {

                        $("#StudentID").html(data.StudentNum)

                        action = data.Action;
                    },
                    error: function (xhr, ajaxOptions, thrownError) {
                        alert('Failed to retrieve states.');
                    }
                });
            }
        });})
</script>
}
user2235161
  • 21
  • 1
  • 6
  • 2
    `response(customer);` is just your initial empty array. Ajax is async. That line of code is called before the ajax call has returned any data. –  Oct 05 '17 at 08:50
  • Try putting `response(customer);` on `success` part (awaiting the AJAX call to be success first then use `response` argument). When `response(customer)` placed outside AJAX call it treated as next statement to be executed regardless AJAX call has successful response or otherwise. – Tetsuya Yamamoto Oct 05 '17 at 08:56
  • I moved the response argument to the success part. still no action or c# method called success: function (data) { for (var i = 0; i < data.length ; i++) { customer[i] = { label: data[i].Value, Id: data[i].Key }; } response(customer); } – user2235161 Oct 05 '17 at 09:13

0 Answers0