Le formulaire de rappel de la Bootbox ne fonctionne pas correctement

Je crée dynamicment des formulaires et j’utilise bootbox 4 avec bootstrap 3 et jquery 3.1.0 dans une application MVC5.

Edit: J’ai mis à jour jQuery de mon projet de 1.10.2 à 3.1.0, toujours le même problème ci-dessous.

Utilisation: cliquez sur remove, bootbox confirme la suppression via modal et, si elle est confirmée, appelez l’action .submit () sur le formulaire.

Capture d’écran de l’application

• La validation JQuery ne valide pas les nombres correctement?
• Javascript Windows.Location passe un object JSON complexe
• Ajax submit fait un post complet après la première soumission
• La validation à distance discrète jQuery ASP.NET-MVC renvoie des faux positifs
• Entrée de balise html de type = “nombre” et séparateur décimal basé sur la culture

Le problème: je clique sur le bouton de suppression et un modal apparaît pour confirmer l’action, et je clique sur «continuer», mais cela ne fait rien. Il semble n’y avoir qu’une seule action de soumission active parmi tous les éléments de formulaire. Je peux donc appeler avec succès submit sur un élément par rafraîchissement de page.

Je suis nouveau dans le javascript, j’ai donc une compréhension de base pour le moment et j’essaie de comprendre ce que je fais mal avec mon code ci-dessous. Toute aide serait appréciée.

Mon code de vue :

@foreach (var user in Model.Users) {   @user.Id   @user.FirstName @user.LastName   @Html.CheckBox("role", user.IsAdmin)   @using (Html.BeginForm("UpdateUserRole", "Admin", FormMethod.Post, new {@class = "btn-inline"})) { @Html.Hidden("id", user.Id) @Html.Hidden("role", user.GetRole(user.IsAdmin)) Update } @using (Html.BeginForm("RemoveUser", "Admin", FormMethod.Post, new {@class = "btn-inline", @id=user.Id+"Form"})) { @Html.Hidden("id", user.Id) Remove }   } 

Mon script (ajouté au bas de la vue) :

 @section scripts {  $(function () { $('form').on('click','button.buttonElement',function (e) { var user = $(this).attr("data-user-id"); e.preventDefault(); bootbox.dialog({ message: "Do you want to continue ?", title: "Remove User", buttons: { main: { label: "Cancel", className: "btn btn-default", callback: function () { return true; } }, success: { label: "Continue", className: "btn btn-default", callback: function () { $('#'+user+'Form').submit(); } } } }); }); });  } 

Edit : Voici quelques sorties HTML:

 
 
 
 
 Joe 
 
 Joe Cuevas 
 
  
 
 
  Update 
 
  Remove 
 
 
 
  

Edit: Solution

Il s’est avéré que modelstate remplaçait la valeur id de tous les formulaires générés par la boucle foreach à partir de View, sur la sortie HTML finale. Ceci explique pourquoi tous les symptômes ci-dessus se produisaient. J’ai simplement ajouté le code suivant à mon contrôleur avant de renvoyer mon viewModel et il a été corrigé: ModelState.Remove (“id”);

• content-disposition ne provoque pas une sauvegarde en tant que
• jQuery (ou peut-être le navigateur) est un script chargé d’ajax chargé
• Mettre à jour la valeur en utilisant DataTables row-reorder dans ASP.Net MVC 5
• Impossible de sélectionner une option par programme à l’aide de Select2
• comment passer des données de View au contrôleur en utilisant ajax get ou post in mvc avec des parameters

 $('form').on('click','button.buttonElement',function (e) { var user = $(this).attr("data-user-id"); var form = $(this).closest('form'); // <-- add this e.preventDefault(); bootbox.dialog({ message: "Do you want to continue ?", title: "Remove User", buttons: { main: { label: "Cancel", className: "btn btn-default", callback: function () { return true; } }, success: { label: "Continue", className: "btn btn-default", callback: function () { form.submit(); // <-- change this } } } }); }); 

 $('form').on('click','button.buttonElement',function (e) { var user = $(this).attr("data-user-id"); var form = $(this).closest('form'); // <-- add this e.preventDefault(); bootbox.confirm({ message: "Do you want to continue ?", title: "Remove User", buttons: { cancel: { label: "Cancel", className: "btn btn-default" }, confirm: { label: "Continue", className: "btn btn-default" } }, callback: function(result) { if(result == true) { form.submit(); } } }); });