Диалоговое окно jQuery UI не отвечает должным образом на нажатие кнопки Удалить

0

Я новичок в jQuery и пытаюсь реализовать диалог JQuery UI в элементе Gridview, следуя этой статье: http://www.codeproject.com/Articles/238122/Delete-Functionality-in-GridView-with-Confirmation

Я прошел через этот код с помощью инструмента Chrome Dev и диалоговое окно отобразилось правильно, но когда я нажимаю кнопку "Удалить", связанная анонимная функция __doPostBack (уникальный идентификатор не появляется. Может ли точка прерывания JS быть настроена на ловушку щелчка " Удалить "на стороне клиента? Для кода на стороне сервера у меня есть точка останова в Visual Studio, где обычно вводится обратная передача, но ее никогда не ударяют.

Вот соответствующий столбец моего ASP.Net Gridview:

<asp:TemplateField HeaderText="Deleting..">
        <ItemTemplate>
        <!--To fire the OnRowDeleting event.-->
        <asp:LinkButton ID="lbDelete" runat="server" CommandName="Delete" 
            OnClientClick="return deleteItem(this);"
            ControlStyle-CssClass="buttonInRow"  
            Text="Delete">
        </asp:LinkButton>
        </ItemTemplate>
    </asp:TemplateField>

Вот как это делает:

<td>
        <!--To fire the OnRowDeleting event.-->
        <a onclick="return deleteItem(this);" id="ctl00_MainContentPlaceHolder_GridView1_ctl02_lbDelete" class="buttonInRow" href="javascript:__doPostBack('ctl00$MainContentPlaceHolder$GridView1$ctl02$lbDelete','')">Delete</a>
        </td>

Я не вижу ошибок в следующих сценариях:

$(function() {
    InitializeDeleteConfirmation();
});

function InitializeDeleteConfirmation() {
$('#deleteConfirmationDialog').dialog({
    autoOpen: false,
    resizable: false,
    height: 140,
    modal: true,
    buttons: {
        "Delete": function() {
            $(this).dialog("close");
        },
        Cancel: function() {
            $(this).dialog("close");
        }
    }
});
}
function deleteItem(element) {
var uniqueID = element.id;
var row = element.parentNode.parentNode;
// Cells[n]: n referring to the cell number displayed on GridView; n starting from 0...
var PositionTitle = row.cells[0].innerText;
    var dialogTitle = 'Permanently Delete Item: ' + PositionTitle + '?';

    $("#deleteConfirmationDialog").html('<p><span class="ui-icon " + "ui-icon-alert" style="float:left; margin:0 7px 20px 0;"></span>" + "Please click delete to confirm deletion.</p>');

    $("#deleteConfirmationDialog").dialog({
        title: dialogTitle,
        buttons: {
        "Delete": function () { __doPostBack(uniqueID, ''); 
                  $(this).dialog("close"); },
        "Cancel": function () { $(this).dialog("close"); }
        }
     });

    $('#deleteConfirmationDialog').dialog('open');  
    return false;

}

Идея здесь заключается в том, что скрипт deleteItem выше всегда возвращает false, потому что (якобы) он обрабатывает обратную передачу непосредственно перед закрытием диалога (то есть тот же код, что и в представленном выше фрагменте HTML). Могла ли эта функция __doPostBack терпеть неудачу и не нарушать отладчик?

Теги:
gridview
jquery-ui-dialog

2 ответа

0
Лучший ответ

Я нашел решение этой проблемы. Я попытаюсь объяснить, чтобы помочь кому-то еще в будущем. Принцип здесь заключается в том, что диалог jQuery будет выполнять функцию __doPostBack непосредственно из Javascript. Ключ к проблеме показан в представленном выше фрагменте выше:

<a onclick="return deleteItem(this);" id="ctl00_MainContentPlaceHolder_GridView1_ctl02_lbDelete" class="buttonInRow"    href="javascript:__doPostBack('ctl00$MainContentPlaceHolder$GridView1$ctl02$lbDelete','')">Delete</a>

Обратите внимание на разницу в значениях между ID и первым аргументом doPostBack:

id="ctl00_MainContentPlaceHolder_GridView1_ctl02_lbDelete"

против

  ('ctl00$MainContentPlaceHolder$GridView1$ctl02$lbDelete'

Итак, я изменил свой скрипт, чтобы создать "postbackID" из "uniqueID" следующим образом:

function deleteItem(element) {
var uniqueID = element.id;
var postbackID = uniqueID.split("_").join("$");
var row = element.parentNode.parentNode;
var PositionTitle = row.cells[0].innerText; 
    var dialogTitle = 'Permanently Delete Item: ' + PositionTitle + '?';
    $("#deleteConfirmationDialog").html('<p><span class="ui-icon ui-icon-alert" style="float:left; margin:0 7px 20px 0;"></span>" + "Please click delete to confirm deletion.</p>');
    $("#deleteConfirmationDialog").dialog({
        title: dialogTitle,
        buttons: {
        "Delete": function() {
            __doPostBack(postbackID, ''); 
            $(this).dialog("close"); },
        "Cancel": function () { $(this).dialog("close"); }
    }
});
$('#deleteConfirmationDialog').dialog('open');
return false;

}

Есть, вероятно, более элегантные способы сделать это, но я очень рад, что успешно выполнил обещанные результаты в большой статье CodeProject от junnark. Например, он извлекает this.name и использует это для прямого вызова __doPostBack. Я попытался добавить атрибут name в asp: LinkButton, но он отображает только "короткое имя", а не полное имя (имена) имен имен. В своей статье он использует ImageButton, в то время как я использую элемент управления LinkButton, так что, вероятно, это корень этой разницы.

-1

Ваш код очень запутанный и трудно следовать. Для.NET-рендеринга я всегда предлагаю посмотреть на концы с помощью селектора.

Тогда ваш код упростит это:

$('[id$="lbDelete"]').on('click', function(e) {
  // Your link element available as a jQuery object
  var $el = $(this);

  // Prevent the link from firing before anything else can happen
  e.preventDefault();

  // Now you can manipulate the DOM using your link as a reference point
  // eg. $el.parent()...
});

Также вы можете поместить контрольную точку в эту функцию для отладки строки за строкой.

  • 0
    Вау! Спасибо за ответ. Как я уже сказал, я новичок. В верхней части моего поста находится ссылка на статью, на которой это основано, и мой код на стороне клиента идентичен коду в статье. Ваш подход интересен, но не обязателен. В других местах у меня есть точки останова, и я могу отлаживать «построчно», но в OP определен вопрос, как установить точку останова внутри функции, назначенной кнопке DELETE: «Delete»: function () {__doPostBack (uniqueID, ''); $ (Это) .dialog ( "закрыть"); }, Можете ли вы помочь по этой части вопроса?
  • 0
    Как глупо с моей стороны спрашивать, как установить точку останова в функции __doPostBack! Я просто разбил указанную выше запись объекта на новую отдельную строку для __doPostBack, и отладчик Chrome остановился на этой точке останова. Duh! Я продолжил, чтобы проверить успешное прохождение через эту функцию (с надлежащим уникальным elementID). Отладка для меня теперь возвращается к безумию жизненного цикла страницы веб-форм на сервере.

Ещё вопросы

Сообщество Overcoder
Наверх
Меню