CODEWITHSUNDEEP
jqueryasp.netasp.net-mvc-4twitter-bootstrapbootstrap-typeahead
Hamdi Baligh
Hamdi Baligh

Reputation: 892

Bootstrap Css Typeahead Not Working ASP.NET MVC 4

I have a problem with typeahead plugin of twitter bootstrap. Here are my jquery and bootstrap references in the _Layout.cshtml :

 <html lang="en">
        <head>
            <meta charset="utf-8" />

            <title>@ViewBag.Title - My ASP.NET MVC Application</title>
            <link href="~/favicon.ico" rel="shortcut icon" type="image/x-icon" />
            @Styles.Render("~/Content/css")
            <link href="@Url.Content("~/Content/themes/base/Bootstrap/bootstrap.css")" rel="stylesheet" type="text/css" />
            @Scripts.Render("~/bundles/modernizr")
            @Scripts.Render("~/bundles/jquery")
            <script src = "@Url.Content("~/Scripts/jquery-ui-1.8.20.min.js")" type="text/javascript"></script>
            <script src=  "@Url.Content("~/Scripts/Bootstrap/bootstrap.min.js")" type="text/javascript"></script>
            <link href="@Url.Content("~/Content/themes/base/jquery-ui.css")" rel="stylesheet" type="text/css" />
            <script src ="@Url.Content("~/Scripts/Bootstrap/bootstrap-typeahead.js")" type="text/javascript" />
........

And Here is My javascript function wich uses the plugin :

<script type="text/javascript">

    $("#searchAeroRetour").typeahead({
        source: function (query, process) {
            var countries = [];
            map = {};

            // This is going to make an HTTP post request to the controller
            return $.post('/AutoComplete/AeroportLookUp', { query: query }, function (data) {

                // Loop through and push to the array
                $.each(data, function (i, country) {
                    map[country.Nom] = country;
                    countries.push(country.Nom);
                });

                // Process the details
                process(countries);
            });
        },
        updater: function (item) {
            var selectedShortCode = map[item].Nom;

            // Set the text to our selected id
            $("#details").text("Selected : " + selectedShortCode);
            return item;
        }
    });

</script>

Here is the input :

.....<td>
      <input type="text" id="searchAeroRetour" name ="searchAeroRetour" data-provide="typeahead" placeholder="Aeroport" autocomplete="off" />
      </td>.....

And here is my Controller called by the javascript function :

public ActionResult AeroportLookUp()
    {
        var aeroports = _aeroRepo.GetAll();
        var compAvs = new List<Aeroport>();
        foreach (var aero in aeroports)
        {
            compAvs.Add(new Aeroport() { Nom = aero.Nom, Id = aero.Id });
        }
        return Json(compAvs, JsonRequestBehavior.AllowGet);
    }

-I have put a Break Point on the method to see if it's called or not and it was not called at all when I type in the textbox. The strange thing is that the same code worked for many inputs in this same page yesterday and today nothing works. Thank you.

Edit : screen shot of Console Console error

Upvotes: 1

Views: 2766

Answers (2)

Hamdi Baligh
Hamdi Baligh

Reputation: 892

Okay, I think I found the problem :) First of all I am referencing two times the typeahead.js file, once in the bootstrap.min.js that includes himself the typeahead plugin and once with an explicit file that I downloaded. The second problem is the post of the javascript function. I am working with areas, so the best way to call an action is not to hard code the URL using the @Url.Content("~ ....").

Upvotes: 2

Cybercop
Cybercop

Reputation: 8694

In your controller your return type is ActionResult while you are returning Json value.Try to change your method to

public JsonResult AeroportLookUp()

Upvotes: 0

Related Questions