Блог

Я пытаюсь открыть диалоговое окно пользовательского интерфейса Jquery после того, как пользователь нажмет на ссылку привязки.

Я использую Jquery 1.5.2 и пользовательский интерфейс 1.8.11 и не получаю сообщений об ошибках. Я следую примеру на этой странице: документация диалогового окна пользовательского интерфейса jquery

Мой JS:

 $(document).ready(function() {
  $('#payTypeOptions').dialog({
    autoOpen: false,
    height:600,
    width: 600,
    modal: true
});

  $('#showPayTypeOptions').click(function(){
    $('#payTypeOptions').dialog('open');
    //If I put an alert() here, the alert shows
  });

});
  

HTML:

 <a id="showPayTypeOptions">Do something</a>

<div id="payTypeOptions">
 <p>Content</p>
</div>
  

Спасибо.

Редактировать: В коде не было ничего неправильного. Это была ошибка пользователя в процессе импорта — doh!

Со мной такое тоже случалось раньше, и это было связано с импортом. Чтобы убедиться, что это так, попробуйте следующие сценарии и стили. попробуйте:

 <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
  

Попробуйте это:

 $(document).ready(function() {
    $('#showPayTypeOptions').click(function(){

        $('#payTypeOptions').dialog({
            autoOpen: false,
            height:600,
            width: 600,
            modal: true
        });
    });
});
  

Посмотрите, откроется ли это модальное. Если это произойдет, то вам нужно сначала объявить модальную часть, прежде чем пытаться ее открыть.

 $(document).ready(function() {
    $('#payTypeOptions').dialog({
        autoOpen: false,
        height:600,
        width: 600,
        modal: true
    });

    $('#showPayTypeOptions').click(function(){
        $('#payTypeOptions').dialog('open');
        //If I put an alert() here, the alert shows
    });
});
  

Я думаю, вам нужно поменять их местами, где вы сначала создаете диалоговое окно, а затем вызываете его.

Создайте функцию, подобную приведенной здесь http://pluksza.blogspot.com/2011/06/jquery-ui-dialog-open-good-practise.html и привязать событие к кнопке

У меня была очень похожая проблема, но мой модал открылся на долю секунды, а затем исчез. Я разработал решение, наблюдая за изменением HTML на вкладке «Элементы» инструмента разработки Chrome, когда я нажал на кнопку «открыть диалоговое окно». Вы должны помнить, что для элемента, на который нажимается, нужно возвращать значение false, если это кнопка или ссылка, иначе ваша страница будет опубликована или изменена снова, и вы потеряете свой диалог. Итак, мой код будет выглядеть примерно так:

 $(document).ready(function() {

  $('#payTypeOptions').dialog({
    autoOpen: false,
    height: 600,
    width: 600,
    modal: true
  });

  $('#showPayTypeOptions').click(function() {
    $('#payTypeOptions').dialog('open');
    return false; // This makes all the difference in my case
  });

});
  

Надеюсь, это кому-то поможет

Попробуйте сохранить диалоговое окно в переменной и ссылаться на нее. Мне удалось сделать это таким образом:

 $(document).ready(function() {
  var mydialog = $('#payTypeOptions').dialog({
    autoOpen: false,
    height:600,
    width: 600,
    modal: true
  });

  $('#showPayTypeOptions').click(function(){
    mydialog.dialog('open'); //Changed here
    //If I put an alert() here, the alert shows
    //Also, you should probably return false here to prevent the browser
    // from following the link (or doing something weird since you don't have
    // an href).
    return false;
  });

});
  

Как только вы объявите диалоговое окно (перед тем, как «открыть»), можете ли вы использовать инспектор DOM (firebug) для просмотра div? Как только диалоговое окно будет объявлено, вы должны увидеть много дополнительной разметки, созданной jQuery. пользовательский интерфейс-виджет, пользовательский интерфейс-диалог и т.д…