Closed joey2264 closed 9 years ago
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.
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)
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.
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.
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);
}
I tried it. It still hits the default updater in bootstrap.typeahead.js
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
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.
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>
I still need to resolve this issue. Have you figured out yet why the updater might not be getting called?
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.
@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.