Inside a jquery dialog I would like to use the jquery autocomplete feature of jqueryUI.
I have then prepared an action in my Controller (I am using ASP.NET MVC2) that is as follow
public ActionResult GetForos(string startsWith, int pageSize)
{
// get records from underlying store
int totalCount = 0;
string whereClause = "Foro Like '" + startsWith + "%'";
List<Foro> allForos = _svc.GetPaged(whereClause, "Foro", 0, pageSize, out totalCount);
//transform records in form of Json data
List<ForoModelWS> foros = new List<ForoModelWS>();
foreach ( Foro f in allForos)
foros.Add( new ForoModelWS() { id= Convert.ToString(f.ForoId),
text= f.Foro + ", Sezione: " + f.Sezione + ", " + f.AuthorityIdSource.Name });
return Json(foros);
}
The class ForoModelWS is a simple class used only to hold the data that shall be transferred in json. Here it is
public class ForoModelWS
{
public string id;
public string text;
}
On the client side I have the following jquery code:
<input id="theForo" />
<script type="text/javascript">
$(document).ready(function() {
$("#theForo").autocomplete({
source: function(request, response) {
$.ajax({
type: "post",
url: "/Foro/GetForos",
dataType: "json",
data: {
startsWith: request.term,
pageSize: 15
},
success: function(data) {
response($.map(data, function(item) {
return {
label: item.text,
value: item.text
}
}))
}
})
},
minLength: 2,
select: function(event, ui) {
},
open: function() {
$(this).removeClass("ui-corner-all").addClass("ui-corner-top");
},
close: function() {
$(this).removeClass("ui-corner-top").addClass("ui-corner-all");
}
});
});
</script>
But the sliding window with the suggeestions does not appear. If I put an alert inside the response function I can see the correct data.
Do I miss something?
Thanks for helping
1st EDIT: Moreover, How to change the code to use the "id" property of the selected element in the returned list?
2nd EDIT: I have checked more with Chrome developer tool and I have seen that when autocomplete starts some error appear. the following:
Uncaught TypeError: Cannot call method 'zIndex' of undefined @ _assets/js/jquery-ui-1.8.4.custom.min.js:317
Uncaught TypeError: Cannot read property 'element' of undefined @ _assets/js/jquery-ui-1.8.4.custom.min.js:321
Uncaught TypeError: Cannot read property 'element' of undefined @ _assets/js/jquery-ui-1.8.4.custom.min.js:320
It seems that the autocomplete plugin does not find an element when it tries to set the z-Index of the sliding suggestion 1 level up its container. The first error appear when the jquery UI Dialog opens. The input for the autocomplete is inside a jquery tab that is inside a jquery Dialog
3rd EDIT: I am adding the HTML markup to be complete
<td width="40%">
<%= Html.LabelFor(model => model.ForoID)%>
<br />
<%= Html.HiddenFor(model => model.ForoID) %>
<input id="theForo" />
<%= Html.ValidationMessageFor(model => model.ForoID, "*")%>
</td>
I have found the problem.
In my case I was using also another plugin, this one.
That plugin was included at the end of my scripts and caused the error described in the question. I have removed the plugin and everything work very fine.
Before removing it I have tried also to isolate the problem putting in a static html both the scripts. I experienced that even the simplest usage of the autocomplete features, like this
<script type="text/javascript">
$(document).ready(function() {
var availableTags = ["ActionScript", "AppleScript", "Asp", "BASIC", "C", "C++", "Clojure",
"COBOL", "ColdFusion", "Erlang", "Fortran", "Groovy", "Haskell", "Java", "JavaScript",
"Lisp", "Perl", "PHP", "Python", "Ruby", "Scala", "Scheme"];
$("#theForo").autocomplete({
source: availableTags
});
});
</script>
would cause the error I got.
My choice has been to remove the menu plugin even because that code is'nt supported anymore.
Thanks!
This discussion is really old however adding it here just in case it helps someone...If the autocomplete is not working at all as in the drop down does not show up then first check for the most simple form of it with hard coded suggestions like below.
$("#txtLanguage").autocomplete({ source: ["c++", "java", "php", "coldfusion", "javascript", "asp", "ruby"] });
If this does not work then it IS a problem of jquery scripts linked. In my case jquery.min.js was an older version 1.7.1 whereas all other scripts were 1.8.18.
Simply replacing the correct version of script solved the problem.
Hope this helps someone stumbling with the basic problem of getting autocomplete to work.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With