jQuery UI модальное диалоговое окно подтверждения на asp.net: как предотвратить событие триггера OnClick - PullRequest
Новая
       12

jQuery UI модальное диалоговое окно подтверждения на asp.net: как предотвратить событие триггера OnClick

0 голосов
/ 20 января 2010

Я пытаюсь использовать диалоговое окно подтверждения из jQuery UI .

Я столкнулся с этой проблемой: как правильно запустить диалоговое окно и одновременно предотвратить событие запуска OnClick, указанное в кнопке, до тех пор, пока пользователь не нажмет кнопку «Да» или «Нет» в диалоговом окне?

В приведенном ниже примере есть два способа всплывающего подтверждения. Нижний работает хорошо. Это классический диалог подтверждения JavaScript. Когда я пытаюсь использовать диалоговое окно jQuery UI, оно отображает диалоговое окно, но позволяет ему запускать событие, назначенное на OnClick (здесь с помощью Command, но я полагаю, что нет никакой разницы. Надеюсь, я не ошибаюсь.). Часть взята из элемента управления ASP.NET Repeater кстати. 

<li>
   <asp:LinkButton ID="lbtnRenew" runat="server" Text="Renew" CssClass="ContextMenuItem"
  CommandName="Renew" CommandArgument="<%# Container.ItemIndex %>" 
  OnClientClick="javascript: openModalDiv('dialogRenew');" /></li>
<li>
   <asp:LinkButton ID="lbtnRemove" runat="server" Text="Remove" CssClass="ContextMenuItem"
  CommandName="Remove" CommandArgument="<%# Container.ItemIndex %>" 
  OnClientClick="return confirm('Are you sure that you want to delete package?');" /></li>

Это JavaScript, который я использовал до сих пор: 

function openModalDiv(divname) {
  $('#' + divname).dialog({
    bgiframe: true,
    resizable: false,
    modal: true,
    overlay: {
    backgroundColor: '#000',
    opacity: 0.5
    },
    buttons: {
     Ok: function() {
       $(this).dialog('close');return true;
     },
     Cancel: function() {
       $(this).dialog('close');return false;
     }
   }
  });
}

Я что-то упустил, но не знаю что. Как мне решить эту проблему?

Спасибо за любой совет.

P.S. если вам нужно добавить дополнительную информацию, дайте мне знать.

Ответы [ 2 ]

1 голос
/ 27 января 2010

Вам необходимо настроить модальное диалоговое окно и затем добавить обработчик события onclick в обработчик document.ready. Кроме того, поскольку вы используете серверные элементы управления asp.net, идентификатор, сгенерированный в html, будет содержать контейнер имен, поэтому вы не сможете выбирать с помощью селектора #lbtnRenew, упомянутого выше. Фактический сгенерированный идентификатор будет выглядеть примерно так: ctl00 _... lbtnRenew. Вы можете использовать альтернативные селекторы jquery, чтобы получить только последнюю часть идентификатора или имени следующим образом 

    $(function() {
  // configure modal dialog
$('#dialogRenew').dialog({
    bgiframe: true,
    resizable: false,
    modal: true,
    autoOpen: false,
    overlay: {
    backgroundColor: '#000',
    opacity: 0.5
    },
    buttons: {
     Ok: function() {
       $(this).dialog('close');return true;
     },
     Cancel: function() {
       $(this).dialog('close');return false;
     }
   }
  });

// attach onclick event handler to open dialog
// $= selector for elements with attribute ending in text
$("submit[name$=lbtnRenew]").click(function(event) {
        event.preventDefault();
        $('#dialogRenew').dialog('open');
    });
});

тогда вы можете удалить встроенный javascript onclientclick для вашей кнопки link

0 голосов
/ 20 января 2010

Удалите onClientClick и используйте jQuery для добавления события, затем вы можете использовать protectDefault ... 

$("#lbtnRenew").click(function(e) {
e.preventDefault(); //stops OnClick event
//jscript code here
});
...