Ошибка диалога jQuery: «не удается вызвать методы в диалоговом окне до инициализации; попытка вызвать метод« закрыть »»

Question

Я пытаюсь сделать div изнутри диалогового окна кнопкой «Закрыть» диалогового окна, но после передачи ему события я получаю эту ошибку: не могу вызвать методы в диалоговом окне до инициализации; попытался вызвать метод 'close'

Я пытался инициализировать его в переменной (с var $ this = $ (this);), но, похоже, ничто не избавляет от этой ошибки.

Мой HTML и PHP:

<?php

print(

"<div id='dialogBox' class='dialogBox shadow ui-draggable ui-resizable' style='display: block; top:20px;'>".
    "<div id='boxHeader'>".
        "<div id='boxHeaderText'>"._BEANDF_LOG_SELECT. "</div>".
        "<div id='closeBox'>". _BEANDF_CONTROL_CENTER_CLOSE. "</div>".
            "<div style='clear:both'>". 
            "</div>".
    "</div>".
 );
 ?>

JQuery:

function initImpactFactorDialog(){
    $("#opener").click(function() {
        ($("#dialogBox").dialog("isOpen") == false) ? $("#dialogBox").dialog("open") : $("#dialogBox").dialog("close") ;
        });

    $("#dialogBox").dialog({
        autoOpen: false,
        draggable: true,
        width: 700,
        height: 300,
        position:[440,118],
        //buttons

    close: 
        $("#closeBox").click(function() {
        $(this).dialog('close');

    })
    });
}

Диалоговое окно должно закрываться при нажатии на мою пользовательскую кнопку. Спасибо!

Answer 1

Вы неправильно присвоили функцию обратного вызова close.Учтите следующее:

function initImpactFactorDialog() {
  $("#opener").click(function() {
    $("#dialogBox").dialog("open");
  });

  $("#dialogBox").dialog({
    autoOpen: false,
    draggable: true,
    width: 700,
    height: 300,
    position: [440, 118],
    modal: true
  });

  $("#closeBox").button().click(function() {
    $("#dialogBox").dialog("close");
  });
}

initImpactFactorDialog();

<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<button id="opener">Open</button>

<div id='dialogBox' class='dialogBox shadow ui-draggable ui-resizable' style='display: block; top:20px;'>
  <div id='boxHeader'>
    <div id='boxHeaderText'>Log Select</div>
    <div id='closeBox'>Close</div>
    <div style='clear:both'>
    </div>
  </div>
</div>

Лично я бы использовал кнопки диалогового окна;тем не менее, если вы хотите иметь свою собственную кнопку, вы назначите обратный вызов click вне назначения dialog.

Теперь рассмотрите этот код:

function initImpactFactorDialog() {
  $("#opener").click(function() {
    $("#dialogBox").dialog("open");
  });

  $("#dialogBox").dialog({
    autoOpen: false,
    classes: {
      "ui-dialog": "ui-widget-shadow dialogBox"
    },
    draggable: true,
    modal: true,
    title: "Log Selection",
    buttons: [{
      text: "Close",
      click: function() {
        $(this).dialog("close");
      }
    }]
  });
}

initImpactFactorDialog();

<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<button id="opener">Open</button>

<div id='dialogBox'>
  <select>
    <option>Log 1</option>
    <option>Log 2</option>
    <option>Log 3</option>
  </select>
</div>

Это использует немного меньше HTML, но дает вам хороший интерфейс и большой функционал.

Надеюсь, это поможет.

Answer 2

close не представляется опцией в jQuery UI Dialog . Похоже, вы намереваетесь стать частью опции buttons. Что-то структурно больше похожее на это:

buttons: {
    close: someFunction
}

В этот момент ключевым отличием здесь является function. Вы не передаете функцию, вы немедленно вызываете селектор jQuery, чтобы прикрепить обработчик клика Внутри этого обработчика кликов вы ссылаетесь на нажатую кнопку в качестве диалогового окна. Как говорит ошибка, поскольку этот элемент кнопки никогда не инициализировался как диалог, его нельзя закрыть.

Вам не нужно вручную создавать обработчик кликов. Просто используйте функцию обработчика в опциях JQuery UI Dialog:

buttons: {
    close: function () {
        $(this).dialog('close');
    }
}

<ч />

С другой стороны , если вам не нужна кнопка диалога «закрыть», но вы хотите использовать эту кнопку custom , то не инициализируйте его в диалоговых кнопках. В этом случае вы инициализируете обработчик щелчка вне инициализации диалогового окна пользовательского интерфейса jQuery и обращаетесь к диалогу (, а не - this). Что-то вроде:

$("#dialogBox").dialog({
    // your initialization options, without buttons
});

$("#closeBox").click(function() {
    $("#dialogBox").dialog('close');
});

<ч />

Кажется, что вы смешиваете два подхода, вот и все.