jQuery saisie semi-automatique ne s'affiche pas
À l'intérieur d'un dialogue jquery je voudrais utiliser le jquery fonctionnalité saisie semi-automatique de jqueryUI.
J'ai ensuite préparé une action dans mon Contrôleur (je suis en utilisant ASP.NET MVC2) qui est comme suit
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);
}
La classe ForoModelWS est une simple classe utilisée uniquement pour contenir les données qui doivent être transférées en json. Ici, il est
public class ForoModelWS
{
public string id;
public string text;
}
Sur le côté client, j'ai le texte suivant 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>
Mais la fenêtre coulissante avec le suggeestions n'apparaît pas. Si j'ai mis une alerte à l'intérieur de la fonction de réponse que je peux voir les données correctes.
Dois-je raté quelque chose?
Merci pour votre aide
1ère ÉDITION:
Par ailleurs, Comment modifier le code pour utiliser la propriété "id" de l'élément sélectionné dans la liste retournée?
2ème EDITION:
J'ai vérifié plus avec Chrome developer tool et j'ai vu que lors de la saisie semi-automatique démarre une erreur apparaît. suivantes:
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
Il semble que la saisie semi-automatique plugin ne pas trouver un élément lorsqu'il tente de définir le z-Index de la sole de glissement de la proposition 1 niveau de son conteneur. La première erreur apparaît lorsque le jquery UI boîte de Dialogue s'ouvre. L'entrée pour la saisie semi-automatique est à l'intérieur d'un onglet jquery qui est à l'intérieur d'un Dialogue jquery
3ème ÉDITION:
Je suis l'ajout de la balise HTML, pour être complet
<td width="40%">
<%= Html.LabelFor(model => model.ForoID)%>
<br />
<%= Html.HiddenFor(model => model.ForoID) %>
<input id="theForo" />
<%= Html.ValidationMessageFor(model => model.ForoID, "*")%>
</td>
Semble ok pour moi. Est-il une erreur javascript? Est-ce votre css en le cachant ou quelque chose comme ça?
et Charlino: Veuillez vous référer à la question de la modifier
OriginalL'auteur Lorenzo | 2010-09-14
Vous devez vous connecter pour publier un commentaire.
J'ai trouvé le problème.
Dans mon cas, j'ai été en utilisant également un autre plugin, cette une.
Que le plugin a été inclus à la fin de mes scripts et a provoqué l'erreur décrite dans la question. J'ai supprimé le plugin et tout fonctionne très bien.
Avant de l'enlever, j'ai essayé aussi d'isoler le problème en mettant en html statique à la fois les scripts. Je l'ai vécu, même les plus simples d'utilisation de la saisie semi-automatique de fonctionnalités, comme ce
serait la cause de l'erreur que j'ai eu.
Mon choix a été de supprimer le menu plugin, même parce que le code est pas supportée.
Merci!
pouvez-vous partager votre code s'il vous plaît? ou au moins vous donner plus d'informations sur les changements à faire... 🙂 merci!
De toute façon, le menu ne m'a pas permis de joindre jquery événements au moment de l'exécution de la <a> élément (menuitem). vraiment sympa, mais vraiment mauvais!
C'est un changement rapide dans le fg.menu.js. Modifiez la ligne qui lit " $.fn.menu = function(options) { ""$.fn.fgmenu = function(options) { ". Et puis utiliser le menu vous appelez $().fgmenu().
Hey @CoreyDownie votre commentaire résolu mon problème aujourd'Hui. Je goggled et de lire votre commentaire et le problème a disparu. Je vous remercie. 🙂
OriginalL'auteur Lorenzo
Cette discussion est vraiment vieille toutefois l'ajout d'ici, juste au cas où il aide quelqu'un...Si la saisie semi-automatique ne fonctionne pas du tout comme dans le menu déroulant ne s'affiche pas alors vérifiez tout d'abord pour la forme la plus simple de lui avec codé en dur suggestions ci-dessous.
Si cela ne fonctionne pas, alors c'EST un problème de scripts jquery liés. Dans mon cas jquery.min.js était une ancienne version 1.7.1 tandis que tous les autres scripts ont été 1.8.18.
Simplement réinstallation de la bonne version de script résolu le problème.
Espère que cela aide quelqu'un d'achoppement avec le problème de base de l'obtention de la saisie semi-automatique pour le travail.
[ { label: "Choice1", value: "value1" }, ... ]
mais pour quelque raison il n'aimait pas cela, jusqu'à ce que j'ai ajouté des guillemets autour de la label et valeur étiquettes:[ { "label": "Choice1", "value": "value1" }, ... ]
Puis il a travaillé bien espérons que cela aide quelqu'un d'autre aussi!OriginalL'auteur Shashank
Tout comme j'ai répondu ici, prendre un butin à mon exemple de travail de jQuery UI autocomplete. Attention à la
source
partie. Espérons que cela aide:Si vous n'êtes pas de le faire maintenant, obtenir Firebug. C'est un outil précieux pour le développement web. Vous pouvez définir un point d'arrêt sur cette JavaScript et voir ce qui se passe.
J'ai eu une profonde recherche de votre échantillon et il me semble presque identique. Je n'ai pas besoin de passer des données.d" de la fonction map. De toute façon comme je l'ai écrit sur ma question, si j'écris "alert(item.texte)" à la première istruction à l'intérieur de la fonction map, je peux voir les données correctes.
d'essayer d'analyser la "source", comme indiqué dans mon exemple. La personne précédente, j'ai aidé (et moi-même) ont eu des problèmes à moins que nous avons analysé $.carte.
Qu'entendez-vous par l'analyse de la carte? Pour moi, il me semble que je suis en utilisant la carte fonctionne exactement comme votre échantillon. Pourriez-vous expliquer davantage? merci
vous avez raison, le vôtre est assez identique à la mienne. Pourriez-vous s'il vous plaît essayer deux choses: l'ajout de la dataFilter et contentType propriétés à votre $.ajax à partir de mon code. C'est la seule différence que je peux spot (en plus de vos données: {} ne soit pas envoyé json analysée, comme " {"term": '" + request.+ "' }").
OriginalL'auteur rebelliard
fgmenu à l'Aide de la fonction menu() ET la saisie semi-automatique à l'Aide de la fonction
Le nom de la fonction est la même problèmes se produisent
Vous pouvez modifier le nom de la fonction dans le fgmenu.js
OriginalL'auteur sadeg hadi
basé sur Lorenzo réponse, j'ai modifié
à
de ce plugins menu et il a bien fonctionné (à la fois la saisie semi-automatique et le menu plugin)
OriginalL'auteur user854364