Ошибка отправки обратного вызова Bootbox

Question

Я динамически создаю некоторые формы, и я использую bootbox 4 вместе с бутстрапом 3 и jquery 3.1.0 в приложении MVC5.

Редактировать: Я обновил jquery моего проекта от 1.10.2 до 3.1.0, по-прежнему имеет такую ​​же проблему ниже.

Использование: нажмите Удалить, bootbox подтвердите удаление через modal, и если подтверждено, вызовите действие .submit() в форме.

Application Screenshot

Вопрос: Я нажимаю на кнопку удаления и всплывает модальное, чтобы подтвердить действие, и я нажмите «Продолжить», но он ничего не делает. Кажется, что есть только одна работа, подающая действие среди всех элементов формы. Поэтому я могу успешно отправить submit на один элемент на обновление страницы.

Я новичок в javascript, поэтому у меня есть базовое понимание на данный момент, и я пытаюсь выяснить, что я делаю неправильно с моим кодом ниже. Любая помощь будет оценена по достоинству.

Мой Посмотреть код:

@foreach (var user in Model.Users) 

    { 
     <tr> 
      <td> 
       @user.Id 
      </td> 
      <td class="text-center"> 
       @user.FirstName @user.LastName 
      </td> 
      <td class="text-center"> 
       @Html.CheckBox("role", user.IsAdmin) 
      </td> 
      <td> 
       @using (Html.BeginForm("UpdateUserRole", "Admin", FormMethod.Post, new {@class = "btn-inline"})) 
       { 
        @Html.Hidden("id", user.Id) 
        @Html.Hidden("role", user.GetRole(user.IsAdmin)) 
        <button type="submit" class="btn btn-info">Update</button> 
       } 
       @using (Html.BeginForm("RemoveUser", "Admin", FormMethod.Post, new {@class = "btn-inline", @id=user.Id+"Form"})) 
       { 
        @Html.Hidden("id", user.Id) 
        <button data-user-id=@user.Id type="submit" class="btn btn-danger buttonElement">Remove</button> 
       } 
      </td> 
     </tr> 
    } 

Мой сценарий (добавлен в нижней части View):

@section scripts 
{ 
<script type="text/javascript"> 
    $(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(); } } 
       } 
      }); 
     }); 
    }); 
</script> 
} 

Edit: Вот некоторые HTML выход:

<table class="table table-hover"> 
    <tbody> 
     <tr> 
      <td> 
       Joe 
      </td> 
      <td class="text-center"> 
       Joe Cuevas 
      </td> 
      <td class="text-center"> 
       <input checked="checked" id="role" name="role" type="checkbox" value="true"><input name="role" type="hidden" value="false"> 
      </td> 
      <td> 
       <form action="/Admin/UpdateUserRole" class="btn-inline" method="post"> 
        <input data-val="true" data-val-regex="Invalid!" data-val-regex-pattern="([A-Za-z0-9.-])+" data-val-required="NetworkID is required!" id="id" name="id" type="hidden" value="joe"><input id="role" name="role" type="hidden" value="Admin">      <button type="submit" class="btn btn-info">Update</button> 
       </form>     <form action="/Admin/RemoveUser" class="btn-inline" id="joeForm" method="post"> 
        <input data-val="true" data-val-regex="Invalid!" data-val-regex-pattern="([A-Za-z0-9.-])+" data-val-required="NetwordID is required!" id="id" name="id" type="hidden" value="joe">      <button data-user-id="joe" type="submit" class="btn btn-danger buttonElement">Remove</button> 
       </form> 
      </td> 
     </tr> 
    </tbody> 
</table> 

Edit: Решение

Оказывается, что ModelState было заменяющее значение идентификатора всех форм, созданных с помощью цикла Еогеаспа из моей точки зрения, на окончательном выводе HTML. Это объясняет, почему все симптомы выше были. Я просто добавил следующий код к моему контроллеру, прежде чем возвращать свой режим просмотра и был исправлен: ModelState.Remove («id»);

Answer 1

таблица/tr/td/form является прекрасным, насколько гнездо идет. Вы, вероятно, может упростить запуск формы Подавать с:

$('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 
       } 
      } 
     } 
    }); 
}); 

Вы также можете просто использовать функцию bootbox.confirm. Если вы хотите текст пользовательской кнопки, следуйте второму примеру here, вот так.

$('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(); 
      } 
     } 
    }); 
}); 

Вы могли бы хотеть рассмотреть тот факт, что пользователь может вызвать представление формы без нажатия вашей кнопки, и в этом случае удаления запрос будет происходить без подтверждения продолжения.

Кроме того, Bootbox не были подтверждены для работы с JQuery 3.x еще, хотя это в большей степени зависит от материнской Bootstrap версии библиотеки - вы должны перейти на Bootstrap 3.3.7, если вы перешли JQuery 3.x.