typeahead updater extension method not calling javascript

[joey2264]

@Html.Bootstrap().TextBoxFor(x => x.Name).TypeAhead(new TypeAhead().Action("GetUsersAndGroups").Updater("pan.ActionNotifications.Updater(item)")).HtmlAttributes(new { @class = "form-control", @id = "UserOrGroupName" });

and javascript: ns.Updater = function (item) { alert(item + " picked"); return item; }

I'm not sure how I'm supposed to call the javascript function in the Updater extension method above. I've tried a variety of different ways, but my updater javascript never gets called.

[DmitryEfimenko]

do you have TwitterBootstrapMvc.js referenced in your project? If yes, make sure it's latest. There was a bug a while ago regarding this that was resolved. You can get latest from nuget.

[joey2264]

I have the latest 3.0.4 installed from your website. Is the syntax I used above correct? ("pan.ActionNotifications" in my view maps to "ns" in my javascript file)

[DmitryEfimenko]

website does not have latest version. I'll be removing it from the website. Please get latest from the Nuget. In order to see if the function get's hit, just put a alert('hit') in there and see if you see the alert.

[joey2264]

I put an alert in my updater, as you can see above. my updater function is not hit (the default updater is still hit).

I updated via Nuget to 3.14.10. Still doesn't work.

[DmitryEfimenko]

try:

@Html.Bootstrap().TextBoxFor(x => x.Name).TypeAhead(new TypeAhead().Action("GetUsersAndGroups").Updater("updateFunction")).HtmlAttributes(new { @class = "form-control", @id = "UserOrGroupName" });

and:

function updateFunction(item) {
    alert('hit');
    console.log(item);
}

[joey2264]

I tried it. It still hits the default updater in bootstrap.typeahead.js

[DmitryEfimenko]

all right, let's dive a bit deeper. Please show me the html generated by @Html.Bootstrap().TextBoxFor... line.

Also please open TwitterBootstrapMvc.js file and make sure it has the following (lines 148-176):

$('[data-provide=typeahead]').each(function () {
    var self = $(this);

    var items = self.attr('data-items');
    var minLength = self.attr('data-minlength');
    var matcher = self.attr('data-matcher');
    var sorter = self.attr('data-sorter');
    var updater = self.attr('data-updater');
    var highlighter = self.attr('data-highlighter');

    var typeaheadOptions = {
        source: function (term, process) {
            var url = self.data('url');

            return $.getJSON(url, { term: term }, function (data) {
                return process(data);
            });
        }
    };

    if (items) typeaheadOptions['items'] = items;
    if (minLength) typeaheadOptions['minLength'] = minLength;
    if (matcher) typeaheadOptions['matcher'] = function (item) { window[matcher](item); };
    if (sorter) typeaheadOptions['sorter'] = function (items) { window[sorter](items); };
    if (updater) typeaheadOptions['updater'] = function (item) { window[updater](item); };
    if (highlighter) typeaheadOptions['highlighter'] = function (item) { window[highlighter](item); };

    self.typeahead(typeaheadOptions);
});

Let me know your findings. PS: Please use Github formatting when posting code. It's easier to read this way

[joey2264]

I had a reference to the old TwitterBootstrapMvcJs-3.0.4 in my bundle, so updating that to TwitterBootstrapMvcJs makes it at least try to call my function. But I get the undefined is not a function error. I tried changing the string I pass to the Updater razor extension method to updateFunction(), updateFunction(item) and pan.ActionNotifications.updateFunction(item) (changing the javascript to the following in the last case)

ns.updateFunction = function(item) {
    alert("hit");
    console.log(item);
}

I think the main issue might be that parameter (item) I am passing into the javascript. It seems like it would need to be passed in, but hardcoding in the text item doesn't make sense.

[joey2264]

Here it the generate html from the textbox. I'm not sure why it is putting the input-validation-error class on the box, because there is not a validation error message showing.

<input autocomplete="off" class="input-validation-error form-control " data-provide="typeahead" data-updater="pan.ActionNotifications.updateFunction(item)" data-url="/ActionNotifications/ActionNotifications/GetUsersAndGroups" data-val="true" data-val-length="Maximum length is 50 characters." data-val-length-max="50" data-val-required="Name is required" id="UserOrGroupName" name="Name" type="text" value>

[joey2264]

I still need to resolve this issue. Have you figured out yet why the updater might not be getting called?

[DmitryEfimenko]

do exactly what I wrote before. Use just the string of a function name in the Updater extension:

.Updater("updateFunction")

Notice, there is no brackets... just the name of the function. The rendered data attribute should look like this:

data-updater="updateFunction"

Then declare the updateFunction on the window scope. No ns. or any other crap like that - just like I showed you before:

function updateFunction(item) {
    alert('hit');
    console.log(item);
}

This will work.