jQuery Girl
  1. jQuery Girl
  3. Remplir les options de la zone de sélection au clic avec Javascript / Jquery avec les données Json
Intereting Posts
Envoi de FormData avec des données binarys à l’aide de jQuery AJAX Rendre la vidéo HTML5 déplaçable sans perdre les contrôles Comment insérer la balise en cas de dépassement de la limite 140, c.-à-d. En négatif? jquery et wordpress Site Web avec épingles ScrollMagic Comment obtenir du code HTML correspondant à l’arborescence DOM actuelle? Utilisation de JQuery event.target pour travailler avec des enfants Comment résoudre / pirater un bogue PNG semi-transparent atténuant dans IE8? Ajouter une icône de police géniale au titre complet du calendrier Relier la molette de la souris au curseur de l’interface utilisateur JQuery setTimeout ne fonctionne pas si je navigue vers une autre page Ajouter un produit configurable au panier en utilisant l’URL La boîte de confirmation JS dans la vue Web Android ne fonctionne .attr (‘coché’, ‘coché’) ne fonctionne pas Statut jQuery AJAX «200 OK», mais pas de réponse aux données

Remplir les options de la zone de sélection au clic avec Javascript / Jquery avec les données Json

J’apprends encore Jquery et je suis un peu confus avec la tâche que j’ai à accomplir.

Cela semble être une tâche simple … J’ai une boîte que je veux remplir avec Options au clic. Je ne veux pas qu’il soit rempli au chargement de la page, mais seulement lorsque quelqu’un demande à voir la liste. En outre, il doit être rempli qu’une seule fois. Je ne veux vraiment pas que la demande de sortir à chaque fois que quelqu’un élargit la liste.

J’imagine que j’aurai probablement un appel de fonction dans mon élément Select

Ensuite, demandez à une fonction Javascript getUsers () d’appeler mon ActionMethod Json GetUsers () pour obtenir cette liste. Comment ?

Quelque chose comme…? 

 function getUsers() { getJSON("/Users/GetUsers", null, function (data){} }

ou JQuery? … 

 $("usersList").click( $.getJSON("/Users/GetUsers", null, function (data) {} )

Je dois mentionner que j’ai vu ce message: remplir la liste de sélection avec des données JSON dans JQuery lorsque la liste de sélection est chargée (pas le document)

Mais j’ai besoin d’aide pour tout mettre en place s’il vous plaît. Merci d’avance!

Voici le code javascript que je voudrais utiliser pour renseigner la zone de sélection. 

 $.getJSON("/Users/GetUsers", null, function(data) { $("#UsersList option").remove(); // Remove all ") // Yes you can do this. .text(item.Description) .val(item.Id) ); }); });

Je vous recommande de déclencher cette opération lors du chargement de la page et non lorsque l’utilisateur clique sur la zone de sélection. jQuery AJAX est asynchrone par défaut (comme il se doit) il y aura donc un moment ou deux où la zone de sélection sera vide, ce qui peut grandement dérouter l’utilisateur.

Était-ce là l’ampleur de votre question ou aviez-vous également besoin d’aide du côté MVC? Si vous utilisez ASP.Net MVC, il existe en fait un type de résultat spécifique de JsonResult, ce qui simplifie un peu la création de méthodes de contrôleur JSON car elles ne nécessitent pas de vues correspondantes. Cela vous permet également d’utiliser des structures de données anonymes, ce qui simplifie un peu les projections spécifiques à une méthode.

EDIT Voici la méthode de base pour renvoyer une structure JSON que le code jQuery ci-dessus comprendra. Notez que les propriétés u.Username et u.ID dépendent de votre object Utilisateurs. 

 [HttpPost] public JsonResult GetUsers() { return Json(new { Users = from u in _usersRepository.Get() select new { Description = u.Username, ID = u.ID } }); }

Je vous recommanderais toutefois d’abandonner cette approche dès que possible et de choisir une structure de message JSON standard. Celui que j’utilise ressemble à ceci: 

 { Success: bool, LoggedIn: bool, ClientErrors: [ { Number: int, Description: ssortingng, Parameter: ssortingng }, { Number: int, Description: ssortingng, Parameter: ssortingng }... ], ServerErrors: [ { Id: int, Message: ssortingng }, { Id: int, Message: ssortingng }... ], Data: {} }

Voici quelques raisons pour cela:

  1. Ne vous y méprenez pas, votre bibliothèque de méthodes JSON est un protocole et utilise un en-tête standard.
  2. La gestion des erreurs en profite le plus. Avoir une méthode cohérente pour informer l’utilisateur que quelque chose s’est mal passé est inestimable pour la suite.
  3. Différencier les erreurs client (nom d’utilisateur incorrect, mot de passe incorrect, etc.) des erreurs de serveur (firebase database hors ligne) est très important. Un utilisateur peut réparer, l’autre non.
  4. Les erreurs client doivent renvoyer non seulement un message, mais également le paramètre de la méthode qui l’a provoqué (le cas échéant), afin que vous puissiez facilement afficher ces messages d’erreur à côté des champs de saisie appropriés.
  5. Les erreurs client doivent également fournir un numéro unique (par méthode) identifiant l’erreur. Cela permet un support multilingue.
  6. Les erreurs de serveur doivent fournir l’identifiant de l’erreur qui a été enregistré. De cette façon, vous pouvez permettre à l’utilisateur de contacter le support technique et de faire référence à l’erreur particulière dans laquelle il s’exécute.
  7. La valeur booléenne connectée permet à toute page utilisant des méthodes nécessitant une authentification de redirect facilement l’utilisateur vers l’écran de connexion si nécessaire, puisqu’un résultat de l’action de redirection d’une méthode JSON n’aura aucun effet.
  8. Enfin, le champ Données est l’endroit où les données spécifiques à la méthode doivent être fournies.

En aucun cas, vous ne devriez considérer ma structure comme un moyen de le faire. Il est clair que vos besoins d’application peuvent être très différents des miens. La cohérence, plus que toute structure particulière est la leçon ici.

EDIT: 06/01/2016 – Vu que les gens regardent toujours cette réponse. En ce qui concerne le remplissage du menu déroulant, je recommanderais d’envisager l’utilisation d’un cadre contraignant dans les deux sens. Personnellement, je préfère Knockout.JS pour sa facilité et sa légèreté, bien qu’Angular.JS fasse également le travail. Mis à part cela, le rest de cette réponse est encore relativement à jour.

EDIT: 8/10/2016 – Il manquait une virgule dans le code.

J’utiliserais l’option jQuery. 

 // You are missing the new anonymous function call $("#usersList").click(function() { // If the select list is empty: if ($(this).find("option").size() > 0) { // Documentation on getJSON: http://api.jquery.com/jQuery.getJSON/ $.getJSON("/Users/GetUsers.php", null, function (data) { $.each(data.items, function(i,item){ // Create and append the new options into the select list $("#usersList").append(""); }); }); } });

Étant donné que les opérations append() sont relativement “coûteuses”, vous pouvez également simplement construire une chaîne contenant les informations et l’append une seule fois, comme suit: 

 var collaboration = ""; $.each(data.items, function(i,item){ collaboration += ""; }); $("#usersList").append(collaboration); ...

Voici un jsfiddle qui montre comment déterminer si la liste de sélection est vide.