2013-04-28 8 views
1

Итак, я хочу, чтобы показать всплывающее при удалении строки из моей таблицы, так это моя ссылка действия:Как создать всплывающее окно в mvc 4?

<script src="@Url.Content("~/Scripts/jquery.unobtrusive-ajax.js")" type="text/javascript"></script> 
    <script src="@Url.Content("~/Scripts/jquery.validate.unobtrusive.js")" type="text/javascript"></script> 
    <script src="@Url.Content("~/Scripts/jquery-ui-1.8.20.min.js")" type="text/javascript"></script> 

@Html.ActionLink("Delete", "Delete", new { id=item.cin },new { @class = "delete-logo" ,@pkNo=item.cin}) 
<div id="confirmDialog" title="Warning"></div> 

мой сценарий:

<script type="text/javascript"> 

$(document).ready(function() { 
    buttonizeALL(); 
    setLinks(); 
}); 

function buttonizeALL() 
{   
    $(".delete-logo").button(); 
} 

function setLinks() 
{ 
    //delete person 
    $(document).ready(function() { 
     $(".delete-logo").live("click", function (e) { 
      e.preventDefault(); 

      var pkNo = $(this).attr("pkNo"); 


      $("#confirmDialog").dialog({ 
       resizable: false, 
       height: 200, 
       width: 300, 
       modal: true, 
       buttons: { 
        "Yes": function() { 
         $(this).dialog("close"); 
         var rowNo = '#row-' + pkNo; 
         var url = '/Subscribers/Delete/' + pkNo; 
         $.ajax({ 
          type: "Delete", 
          url: url, 
          data: {}, 
          cache: false, 
          dataType: "json", 
          success: function() { 

           $(rowNo).animate({ opacity: 0.0 }, 400, function() { 
            $(rowNo).remove(); 
           }); 

          }, 

          error: function (jqXHR, exception) { 
           alert('Uncaught Error.\n' + jqXHR.responseText); 
          } 

         }); //end ajax call 

        }, // end of yes button 
        "No": function() { 
         $(this).dialog("close"); 
        } 
       } //end buttons 
      }); //end modal 
     });  //end delete 

    }); 
} //end setLinks 

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

+0

Я думаю, что строка кода 'new {id =" ed "}' должна выглядеть следующим образом: 'new {@id =" ed "}' – 2013-04-28 14:18:16

+0

попробуйте этот '@ Html.ActionLink (" Удалить "," Удалить " , new {@id = "ed", @class = "delete-logo", @pkNo = "ed"}) ' – 2013-04-28 14:27:01

ответ

1

Here Ваш пример немного убран в jsFiddle, т. Е. Я переместил код setLinks() в функцию document.ready().

$(document).ready(function() { 
    buttonizeALL(); 
    setLinks(); // removed this 
}); 

Также я заменил ActionLink на привязывающий тег, который он отобразит. Использование JQuery 1.8.3 и jQuery UI 1.9.2. Всплывающие швы работают нормально.

+0

Можете ли вы указать значение e.preventDefault() в этом' $ (". delete-logo ") .live (" click ", function (e) {'? – 2013-04-28 13:40:34

+0

'e.preventDefault()' был скопирован из JavaScript исходного вопроса. Обычным использованием этого метода является предотвращение события по умолчанию нажатия кнопки '. удалять логотип из-за срабатывания. – wellers

+0

благодарю вас, я тестирую его, он работает для простой ссылки (), но он все еще не работает с моим действием. – Mohammadov

1

сначала не используйте команду «жить». Это было отменено вместо команды «on». Также нет необходимости использовать $ (document) .ready в функции setLinks. Поскольку его автономная функция (а не самоисполнение) остается в памяти только до ее вызова, когда вы вызываете ее в функции doc.ready.

Смежные вопросы