Вопросы Теги

Как внедрить & ldquo; подтверждение & rdquo; диалог в диалоговом окне Jquery UI?

Вот многоразовый класс для выполнения времени. Пример включен в код: 

/*
     Help track time lapse - tells you the time difference between each "check()" and since the "start()"

 */
var TimeCapture = function () {
    var start = new Date().getTime();
    var last = start;
    var now = start;
    this.start = function () {
        start = new Date().getTime();
    };
    this.check = function (message) {
        now = (new Date().getTime());
        console.log(message, 'START:', now - start, 'LAST:', now - last);
        last = now;
    };
};

//Example:
var time = new TimeCapture();
//begin tracking time
time.start();
//...do stuff
time.check('say something here')//look at your console for output
//..do more stuff
time.check('say something else')//look at your console for output
//..do more stuff
time.check('say something else one more time')//look at your console for output
147
задан Danil Speransky 1 September 2012 в 11:13
поделиться

5 ответов

Мне просто нужно было решить ту же проблему. Ключом к тому, чтобы это работало, было то, что диалоговое окно должно быть частично инициализировано в обработчике события click для ссылки, с которой вы хотите использовать функцию подтверждения (если вы хотите использовать это для более чем одной ссылки). Это связано с тем, что целевой URL-адрес для ссылки должен быть введен в обработчик событий для нажатия кнопки подтверждения. Я использовал класс CSS, чтобы указать, какие ссылки должны иметь поведение подтверждения.

Вот мое решение, отведенное для примера. 

<div id="dialog" title="Confirmation Required">
  Are you sure about this?
</div>

<script type="text/javascript">
  $(document).ready(function() {
    $("#dialog").dialog({
      autoOpen: false,
      modal: true
    });
  });

  $(".confirmLink").click(function(e) {
    e.preventDefault();
    var targetUrl = $(this).attr("href");

    $("#dialog").dialog({
      buttons : {
        "Confirm" : function() {
          window.location.href = targetUrl;
        },
        "Cancel" : function() {
          $(this).dialog("close");
        }
      }
    });

    $("#dialog").dialog("open");
  });
</script>

<a class="confirmLink" href="http://someLinkWhichRequiresConfirmation.com">Click here</a>
<a class="confirmLink" href="http://anotherSensitiveLink">Or, you could click here</a>

Я считаю, что это сработает для вас, если вы сможете сгенерировать свои ссылки с помощью класса CSS ( confirmLink , в моем примере).

Вот jsfiddle с код в нем.

В интересах полного раскрытия информации, я '

166
ответ дан 23 November 2019 в 22:30
поделиться

Как насчет этого:

2
ответ дан 23 November 2019 в 22:30
поделиться

Подойдет ли это? 

$("ul li a").click(function(e) {
  e.preventDefault();
  $('#confirmDialog').show();

  var delete_path = $(this).attr('href');

  $('#confirmDialog a.ok').unbind('click'); //  just in case the cancel link 
                                            //  is not the  only way you can
                                            //  close your dialog
  $('#confirmDialog a.ok').click(function(e) {
     e.preventDefault();
     window.location.href = delete_path;
  });

});

$('#confirmDialog a.cancel').click(function(e) {
   e.preventDefault();
   $('#confirmDialog').hide();
   $('#confirmDialog a.ok').unbind('click');
});
3
ответ дан 23 November 2019 в 22:30
поделиться

Я обнаружил, что ответ Пола не совсем сработал, поскольку способ, которым он устанавливал параметры ПОСЛЕ того, как диалоговое окно было создано при событии щелчка, было неправильным. Вот мой код, который работал. Я не адаптировал его для примера Пола, но разница только в том, что некоторые элементы названы по-разному. Вы должны суметь это решить. Исправление находится в установщике диалогового окна для кнопок в событии щелчка. 

$(document).ready(function() {

    $("#dialog").dialog({
        modal: true,
        bgiframe: true,
        width: 500,
        height: 200,
        autoOpen: false
    });


    $(".lb").click(function(e) {

        e.preventDefault();
        var theHREF = $(this).attr("href");

        $("#dialog").dialog('option', 'buttons', {
            "Confirm" : function() {
                window.location.href = theHREF;
            },
            "Cancel" : function() {
                $(this).dialog("close");
            }
        });

        $("#dialog").dialog("open");

    });

});

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

59
ответ дан 23 November 2019 в 22:30
поделиться

Как было сказано выше. Предыдущие посты вывели меня на правильный путь. Вот как я это сделал. Идея в том, чтобы рядом с каждой строкой в таблице было изображение (сгенерированное PHP-скриптом из базы данных). При щелчке по изображению, пользователь будет перенаправлен на URL, и в результате, соответствующая запись будет удалена из базы данных при отображении некоторых данных, относящихся к кликнувшей записи в диалоге jQuery UI Dialog.

Код JavaScript:

$(document).ready(function () {
  $("#confirmDelete").dialog({
    modal: true,
    bgiframe: true,
    autoOpen: false
  });
});

function confirmDelete(username, id) {
  var delUrl = "/users/delete/" + id;
  $('#confirmDelete').html("Are you sure you want to delete user: '" + username + "'");
  $('#confirmDelete').dialog('option', 'buttons', {
    "No": function () {
      $(this).dialog("close");
    },
    "Yes": function () {
      window.location.href = delUrl;
    }
  });
  $('#confirmDelete').dialog('open');
}

Диалог div:

<div id="confirmDelete" title="Delete User?"></div>

Ссылка на изображение:

<img src="img/delete.png" alt="Delete User" onclick="confirmDelete('<?=$username;?>','<?=$id;?>');"/>

Таким образом, вы можете передать значения цикла PHP в диалоговое окно. Единственный недостаток - это использование GET-метода для фактического выполнения действия.

3
ответ дан 23 November 2019 в 22:30
поделиться
Другие вопросы по тегам:

Похожие вопросы: