J'ai une page qui a une liste de tâches qui dispose chacune d'une liste déroulante avec une liste d'équipes que la tâche est assignable, mais en raison de la quantité de tâches que je ne peux pas pré-peupler dans l'action car elle ralentit dans la pagination / affichage des tâches de manière assez significative. Donc, à la place, le clic de la liste déroulante, j'ai une fonction JQuery qui appelle une action renvoyant une chaîne JSON.
Tout cela fonctionne bien dans Firefox, mais en chrome lorsque l'utilisateur clique sur la liste déroulante, l'appel est effectué, mais La liste déroulante ne remplit pas. L'utilisateur doit cliquer et rouvrir la liste déroulante qui a ensuite les données de l'appel initial (il n'y a pas de second appel). Les données sont correctement ajoutées parfaitement au HTML, mais la liste déroulante ne se rafraîchie pas. P>
$("#teamsSpanFor1354405").click(function () {
var issueId = 1354405;
var ddl = $("#teamsSpanFor1354405").find("select.ddlTeamsAssignTask");
if (ddl.find("option").length == 1) {
$.ajax({
url: '/Tracker/Task/DisplayAssignTaskToTeam',
data: { milestoneId: 1, issueId: issueId, jsonRequest: "true" },
type: 'POST',
async: true,
success: function (data) {
console.log(data);
var html = "<option value=''>Assign to Team</option>";
$.each(data, function () {
html += "<option value='" + this.Id + "'>" + this.Name + "</option>";
});
console.log(html);
ddl.html(html);
}
});
}
});
@using (Ajax.BeginForm("AssignTaskToTeam", new AjaxOptions { UpdateTargetId = "assignTaskForIssue" + Model.IssueId, OnSuccess = "ConfirmAssignment(" + Model.Milestone.Id + ")" }))
{
<input id="MilestoneId" name="MilestoneId" type="hidden" value="1"/>
<input id="InspectorIssueId" name="InspectorIssueId" type="hidden" value="1354405"/>
<span id="teamsSpanFor1354405">
<select id="TeamId" class="ddlTeamsAssignTask" style="width: 125px; " name="TeamId">
<option value="">Assign to Team</option>
</select>
<input class="btnAssign btnClassDisabled" type="submit" value="Assign" disabled="disabled"/>
</span>
}
3 Réponses :
Avez-vous essayé d'utiliser À mon avis, ils devraient tous les deux travailler de la même manière, mais cela vaut peut-être un coup de vue pour essayer de le changer car alternativement, si Chrome refuse simplement d'actualiser la liste déroulante en cas de circonstance, vous pourrez peut-être remplacer la liste déroulante avec un lien, puis effectuez l'appel AJAX lorsque l'utilisateur clique sur le lien et remplacez l'élément de liaison avec une liste déroulante nouvellement construite et ouverte. ou (peut-être plus pirate) que vous pourriez créer dans un délai ( .append au lieu de .html ? Comme: .html ne se comporte pas. < / p> Settimeout pendant le document.Ready) pour renoncer automatiquement à la liste déroulante après la page. avait chargé, que l'utilisateur a cliqué dessus, évitant la nécessité d'actualiser les options une fois que la sélection était déjà ouverte.
En fait, je l'ai fait.
La solution de liaison pourrait fonctionner ouais, mais ce n'est pas une solution que j'aime beaucoup: / Le retard pourrait être une solution également, mais je serais en mesure d'annuler les appels apportés si l'utilisateur déciderait de paginer et de ne pas vouloir charger le Premières pages 'Dropdown?
Oui, si vous souhaitez annuler la fonction retardée, vous pouvez stocker la valeur de retour de settimeout , puis transmettez-le sur ClearTimeout , comme: var ival = Settimeout (Yourfunc , 3000); Cleartimeout (Ival);
P.s. Je conviens que les deux solutions sont Subpar ... Bummer que l'actualisation ne fonctionne pas à la volée! Bonne chance!
Que diriez-vous de quelque chose comme ceci: et ensuite, au lieu de l'événement de clic, vous attachez à l'événement MouseDown, qui est appelé avant em> les écrans déroulants . Vous pourriez même aller jusqu'à ce que votre appel AJAX soit synchrone à la place de l'asynchrone, ils pourraient voir / ressentir la douleur, mais cela aura le travail. P> $(function() {
$("#selTasks").mousedown(function () {
if ($(this).find("option").length === 1) {
$(this).html("<option>option one</option><option>option two</option>");
}
});
});
Ainsi, lorsque vous cliquez sur la liste déroulante, vous faites appel et repeuplez une liste déroulante? Pourquoi ne pas se lier à l'événement 'Onchange' puis appendez la balise comme @matt Winckler décrit. J'ai utilisé ceci pour plusieurs listes déroulantes en cascade et ça marche génial !!! Veuillez poster si vous avez besoin d'instructions supplémentaires sur le codage, mais je me sens confiant que cela fonctionnera;)
À quoi ressemble la jQuery rendu? Je suppose que les trucs avec les signes
@ sont les trucs du côté serveur ASP.NET?Ouais ceci utilise une application Web ASP.NET MVC3. J'ai édité le message un peu comme je remarquais que Firebug n'affiche pas le HTML mais que l'outil de développeur chrome le montre simplement bien. Donc, le problème est chrome ne pas rafraîchir la liste déroulante lorsque de nouvelles options HTML s'y sont ajoutées.
JQuery (et JavaScript dans son ensemble) fonctionne le côté client, en affectant la jQuery que le navigateur voit peut aller un moyen de résoudre votre problème, de cette façon de ne pas avoir à déduire ce que le navigateur pourrait voir .
Mise à jour du code pour montrer ce que l'une des tâches ressemblerait.