jQueryUI Модальная страница обновления при закрытии

0

В моем модальном модуле jQueryUI всякий раз, когда я нажимаю кнопки, родительская страница обновляется, даже если у меня есть preventDefault() или return false. Это ожидаемое поведение?

HTML:

<li><a id="addFunds" class="no-close" href="#">Add Funds</a></li>

Модальные:

<div id="addFundsModal" class="modal-hidden" title="Add Funds to Your Account">
    <div class="leftBar">
        <h3>Add Funds</h3>
                //other stuff
                <form>
                      //<fieldset>, etc.
                      <button class="modal-close btnBlue" href="#">Cancel</button>
              <button class="add-funds btnGreen">Add Funds</button>
        </form>
    </div>
</div>

JQuery:

$('#loggedInDropdown').on('click', '#addFunds', function(e) {
        e.preventDefault();
        $('#addFundsModal').dialog({
            modal: true,
            dialogClass: 'no-close',
            width: 500
        });
    });

    $('.ui-dialog').on('click', '.modal-close', function(e) {
        e.preventDefault();
        $('#addFundsModal').dialog('close');
    });

Я также не уверен, должен ли я использовать dialog.close или dialog.destroy, но это для другого сообщения, я полагаю.

Теги:
modal-dialog
preventdefault

2 ответа

1

Обычно мы добавляем поведение кнопки внутри опций .dialog:

.dialog({
      resizable: false,
      height:240,
      modal: true,
      buttons: {
        "Delete all items": function() {
          $( this ).dialog( "close" );
        },
        Cancel: function() {
          $( this ).dialog( "close" );
        }
      }
    });
Поделиться
  • 0
    Спасибо, это, вероятно, сработает. Теперь, почему обновление страницы является действием по умолчанию?
  • 0
    Я заметил на кнопке отмены, есть href="#" . Почему ты хочешь это иметь?
Показать ещё 5 комментариев
1

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

Пытаться:

$('#addFundsModal').on('click', '.modal-close', function (e) {
    e.preventDefault();
    $('#addFundsModal').dialog('close');
});

или применить его к классу (должно быть лучше)

$('.modal-hidden').on('click', '.modal-close', function (e) {
    e.preventDefault();
    $('#addFundsModal').dialog('close');
});

демонстрация

Поделиться
  • 0
    Это работало отлично, для одной кнопки. Другая кнопка, с которой я делаю что-то еще, но я могу использовать ту же идею.
  • 1
    @trysis для другой кнопки, которую вы хотите, чтобы форма отправляла правильно? из этого он работает нормально, в противном случае вы можете сделать так, чтобы кнопки, которым не нужна форма для отправки, давали всем им один и тот же класс и связывали событие. другие же обрабатывают его в своем собственном обработчике.
Показать ещё 2 комментария

Ещё вопросы

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