Пользовательский интерфейс jquery - простой пример, что я делаю не так?

Question

Я пытаюсь поместить некоторый код пользовательского интерфейса jquery в существующее приложение asp.net и могу использовать руку помощи ...

У меня есть кнопка, когда пользователь нажимает ее, я хочу открыть диалоговое окно jquery UI с двумя кнопками подтверждения go / nogo.

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

Вот JavaScript, чтобы открыть диалоговое окно:

<script type="text/javascript" >

    $(function() {
    // Cancel Event Dialog Box
    $('#CancelDialog').dialog({
        autoOpen: false,
        width: 500,
        buttons: {
            "Cancel This Event": function() {$(this).dialog("close");}, 
            "Do Not Cancel": function() {$(this).dialog("close");} 
        }
    });

});
</script>

и вот код, который его вызывает:

<asp:Button id="btnCancelMeeting" Text="Cancel Event" runat="server" />
 <script language="javascript" type="text/javascript">  
    $(document).ready(function() {  
    $('#CancelDialog').dialog();  
    $('#btnCancelMeeting').click(function() {$('#CancelDialog').dialog('open'); });  
         });  
</script>

<div id="CancelDialog" title="Cancel and Event or Meeting"><p>Cancel this event.</p></div>   

Напомним: я нажимаю кнопку, получаю диалоговое окно с двумя нужными кнопками и сообщением, но оно закрывается само собой примерно через 1 секунду ... Что я делаю не так?

РЕДАКТИРОВАТЬ: ОК, теперь я думаю, что я вижу, что происходит ... когда я нажимаю кнопку, диалоговое окно появляется по желанию, но затем страница снова загружается с сервера ... который сбрасывает всю страницу, включая очистку диалога.

Так что я действительно хочу, чтобы имитировать это поведение:

<asp:Button id="btnDelete" Text="Delete Event" runat="server" OnClientClick='javascript:return confirm(&quot;Are you sure you would like to permanently delete this event/meeting? This action cannot be undone.&quot;)' OnClick="btnDelete_Click" />

, когда щелчок генерирует событие на стороне клиента, и только если выбрано «ОК», страница вызывает перезагрузку. Кто-нибудь может дать синтаксис для подвешивания этого диалогового окна queryUI из события OnClientClick?

Answer 1

так что вы хотите перехватить событие, прежде чем оно запускает сервер, верно?

Прежде всего, вам нужно убрать событие Click, использовать эту кнопку только как обычную кнопку, изменить текущую кнопку на:

<asp:Button id="btnShowDialog" Text="Delete Event" runat="server" OnClientClick="$('#myDialog').dialog('open');" />

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

<input type="button" value"Delete Event" onclick="$('#myDialog').dialog('open');" />

это откроет диалог:

Теперь вам нужно поместить кнопку, которая запускает событие сервера, в само диалоговое окно!

что вы можете выполнить передачу сохраненного javascript, который вы можете найти в строке состояния браузера, когда нажимаете кнопку, другими словами, сделать Post Back, используя только javascript - вы можете найти правильный код, меняющий Button на LinkButton и мышь над ним.

изменить:

 "Cancel This Event": function() {$(this).dialog("close");} 

до:

"Cancel This Event": function() {
    __doPostBack('btnDeleteEvent', '');
} 

это будет делать то же самое, что и btnDeleteEvent, вам нужно , чтобы LinkButton вызывал это имя для фактического выполнения поведения нажатия (make text = "", поэтому он не отображается на странице ).

<asp:LinkButton ID="btnDeleteEvent" runat="server" Text="" onclick="btnDeleteEvent_Click" />

помните, что в файле code-behind должно быть запущено событие

protected void btnDeleteEvent_Click(object sender, EventArgs e)
{
    // do something
}

Обновлено

добавлено: ссылка на полный источник

Answer 2

Я не знаю jquery намного лучше, чем вы, но я думаю, чтобы сделать то, что вы хотите, вы должны сделать кнопку отмены встречи, нажмите кнопку возврата false:

$('#btnCancelMeeting').click(function() {$('#CancelDialog').dialog('open'); return false; });

Затем с помощью кнопки «Отменить это событие» инициируйте отмену на сервере:

"Cancel This Event": function() { CallFunctionThatReallyCancelsTheEvent(); $(this).dialog("close");},

Answer 3

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

<script>
  $(document).ready(function() {
  $("#btnCancelMeeting").click(function() {
      $("#CancelDialog").dialog({ 
          autoOpen: true,
          width: 500,
          buttons: {
          "Cancel This Event": function() { $(this).dialog("close"); },
          "Do Not Cancel": function() { $(this).dialog("close"); }
            } 
            });
      });
  });
</script>

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

Рабочая версия доступна по адресу: test.html sample - я использовал обычную кнопку, а не ASP.NET, поскольку мне просто хотелось получить правильную функциональность.

Answer 4

Удалить

$('#CancelDialog').dialog();  

после

$(document).ready(function() {  

и попробуй это.

Возьми 2. Вполне возможно, что поведение по умолчанию при отправке «кнопки» может быть тем, что заставляет его перезагрузить страницу. Можете ли вы попробовать добавить type = 'button' к кнопке, чтобы она не отправлялась по умолчанию?

Answer 5

Я не знаком с серверной частью .NET, но если бы эта проблема возникала при обычной настройке jQuery на стороне клиента, ее нужно добавить в функцию обработки кликов:

function(event){
  event.preventDefault();
  event.stopPropagation();
  $(this).dialog("open");
}

РЕДАКТИРОВАТЬ: Извините, это будет в вызове открытия диалога, а не обработчики закрытия.