Jquery Dialog Jquery Datatableで動作していないことを確認します。

Question

jqueryダイアログボックスを使用しようとすると、jqueryデータテーブル内のレコードが削除されます。 削除は最初のページの読み込みでは機能しますが、ページを変更したり、削除リンクを検索しても機能しません。ここで

<script type="text/javascript"> 
$(document).ready(function() { 
    $('#dataTable').dataTable({ 
     "aoColumnDefs": [ 
     { "bSortable": false, "bSearchable": false, "aTargets": [2] } 
     ] 
    }); 

    //modal popup 

    $("#dialog-confirm").dialog({ 
     autoOpen: false, 
     resizable: false, 
     height: 200, 
     width: 400, 
     modal: true, 
     buttons: { 
      "Delete": function() { 
       $(this).dialog("close"); 
       $("form")["delete"].submit(); 
      }, 
      Cancel: function() { 
       $(this).dialog("close"); 
      } 
     } 
    }); 

    $(".deleteLink").click(function (e) { 
     e.preventDefault(); 
     $("#dialog-confirm").dialog("open"); 
    }); 

    //  $.ajaxSetup({ cache: false }); 

}); 

htmlです。ここで

<table cellpadding="0" cellspacing="0" border="0" class="display" id="dataTable"> 
<thead> 
    <tr> 
     <th> 
      @Html.LabelFor(p => Model.FirstOrDefault().LastName) 
     </th> 
     <th> 
      @Html.LabelFor(p => Model.FirstOrDefault().FirstName) 
     </th> 
     <th> 
     </th> 
    </tr> 
</thead> 
<tbody> 
    @foreach (var item in Model) 
    { 
     <tr> 
      <td> 
       @Html.DisplayFor(modelItem => item.LastName) 
      </td> 
      <td> 
       @Html.DisplayFor(modelItem => item.FirstName) 
      </td> 
      <td> 
       @Html.ActionLink("Edit", "Edit", new { id = item.UserId }) | 
       @Html.ActionLink("Details", "Details", new { id = item.UserId }) | 
       @Html.ActionLink("Delete", "DeleteConfirmed", new { id = item.UserId }, new { @class = "deleteLink" }) 
       @using (Html.BeginForm("DeleteConfirmed", "User", new { id = item.UserId})){} 
      </td> 
     </tr> 
    } 
</tbody> 

解決ダイアログ

<div id="dialog-confirm" title="Delete the item?" style="display:none" > 
<p><span class="ui-icon ui-icon-alert" style="float:left; margin:0 7px 20px 0;"></span>This item will be deleted. Are you sure?</p> 

Answer 1

<script type="text/javascript"> 
     $(document).ready(function() { 
      $('#dataTable').dataTable({ 
       "aoColumnDefs": [ 
     { "bSortable": false, "bSearchable": false, "aTargets": [2] } 
     ] 
      }); 

      //modal popup 


      $(".deleteLink").live('click', function (e) { 
       var obj = $(this); 
       e.preventDefault(); 
       var dialogAppendData = '<div><p><span class="ui-icon ui-icon-alert" style="float:left; margin:0 7px 20px 0;"></span>' 
            + 'This item will be deleted. Are you sure?</p></div>'; 
       $(dialogAppendData).dialog({ 
        autoOpen: true, resizable: false, modal: true, 
        height: 200, width: 400, zIndex: 10000, 
        title: 'Delete the item?', 
        buttons: { 
         'Delete': function() { 
          $.ajax({ 
           url: '/User/DeleteUser', type: 'delete', dataType: 'json', 
           data: { 'userId': obj.data('id') }, 
           success: function (data) { 
            $(obj).remove(); 
           } 
          }); 

          $(this).dialog("close"); 
         }, 
         'Cancel': function() { 
          $(this).dialog("close"); 
         } 
        }, 
        close: function (event, ui) { 
         $(this).remove(); 
        } 
       }); 
      }); 
     }); 
    </script> 

insteand of : 
@Html.ActionLink("Delete", "DeleteConfirmed", new { id = item.UserId }, new { @class = "deleteLink" }) 

//use below link. 
    <a class = "deleteLink">Delete</a> 


    //In controller 

    UserController : 

    [HttpDelete] 
    public JsonResult DeleteUser(int userId) 
    { 
     var user = db.users.Find(userId); 
     db.Users.Remove(user); 
     db.SaveChanges(); 

     //Or 

     // U r logic for delete. 

     return Json(true, JsonRequestBehavior.AllowGet); 
    } 

Answer 2

<script type="text/javascript"> 
     $(document).ready(function() { 
      $('#dataTable').dataTable({ 
       "aoColumnDefs": [ 
     { "bSortable": false, "bSearchable": false, "aTargets": [2] } 
     ] 
      }); 

      //modal popup 
      $('.deleteLink').live('click', function (e) { 
       e.preventDefault(); 

       var obj = $(this); 

       var dialogAppendData = '<div><p><span class="ui-icon ui-icon-alert" style="float:left; margin:0 7px 20px 0;"></span>' 
            + 'This item will be deleted. Are you sure?</p></div>'; 
       $(dialogAppendData).dialog({ 
        autoOpen: true, resizable: false, modal: true, 
        height: 200, width: 400, zIndex: 10000, 
        title: 'Delete the item?', 
        buttons: { 
         'Delete': function() { 
          $("form")["delete"].submit(); 

          $(this).dialog("close"); 
         }, 
         'Cancel': function() { 
          $(this).dialog("close"); 
         } 
        }, 
        close: function (event, ui) { 
         $(this).remove(); 
        } 
       }); 
      }); 

      //  $.ajaxSetup({ cache: false }); 
     }); 

    </script>