Javascript-форум - Jquery ui не открывается диалог

Javascript-форум (https://javascript.ru/forum/)

- jQuery (https://javascript.ru/forum/jquery/)

- - Jquery ui не открывается диалог (https://javascript.ru/forum/jquery/22418-jquery-ui-ne-otkryvaetsya-dialog.html)

Jquery ui не открывается диалог

Что то непонятное с jquery ui.

Вот часть кода:

<script>
$("#dialog").dialog({
    autoOpen: false,
    modal: true,
    buttons: { 
        'Ok': function() {  
            $('#dialog').dialog("destroy");   // кнопки не работают
        },  
        'Cancel': function() {  
            $('#dialog').dialog('close');   // кнопки не работают
        }  
    }
        
});
$('#dialog').dialog('open'); /// срабатывает

$("#start").click(function(){
    var ready1 = <?php echo $user->ready1; ?>;
    var ready2 = <?php echo $user->ready2; ?>;
    if(ready1 != 0 && ready2 != 0)
    { 
	/// что тут неважно	
    }
    else
    {	
        alert('hello world!11'); /// срабатывает
        $('#dialog').dialog('open'); /// но если стоит это, то не работает
    }
	
});

Помогите что я не так делаю, div сверху стоит если что.

Вызывайте код после готовности DOM. Может прокатит :write:

$(document).ready(function() {
$("#dialog").dialog({
//...

});

1) Правильно писать

Ok: function() {
		$( this ).dialog( "close" );
}

2) нафига вам destroy ? (Так после нажатия ok заголовок повторно открываться не будет.)
вместо $('#dialog').dialog("destroy");
пишите $( this ).dialog( "close" );

3) Поместите код внутрь. (стиль лучше соблюдать. )

$(document).ready(function(){
... ваш код
});

4) отпишитесь что это дало.

1) Без изменений, на кнопки не реагирует
2) Тоже самое
3) Поместил, alert по прежнему открывается, а диалог нет.

Может я не так подключил скрипты?

<link type="text/css" href="components/com_hello/css/custom-theme/jquery-ui-1.8.16.custom.css" rel="stylesheet" />
<script src="components/com_hello/js/jquery-1.6.2.min.js" type="text/javascript"></script>
<script src="components/com_hello/js/jquery-ui-1.8.16.custom.min.js" type="text/javascript"></script>

<html> 
<head> 
<meta http-equiv="content-type" content="text/html; charset=windows-1251" /> 
<title></title> 
 <link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/themes/base/jquery-ui.css"> 
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script> 
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js"></script> 

<script type="text/javascript"> 
$(document).ready(function(){
$("#dialog").dialog({
    autoOpen: false,
    modal: true,
    buttons: { 
        //"Ok": function() {  //этот код тоже рабочий, но сами создатели jquery UI так никогда не напишут.
        Ok: function() {  
            $(this).dialog("close");   // кнопки  работают
            // $("#dialog").dialog("close"); // даже это будет работать, хоть это и не красиво
        },  
        Cancel: function() {  
            $(this).dialog('close');   // кнопки  работают
        }  
    }
        
});

//К сведению если вместо autoOpen: false, написать autoOpen: true, эту строку с dialog('open'); можно не писать
$('#dialog').dialog('open'); /// срабатывает



$("#start").click(function(){    
        //alert('hello world!11'); /// срабатывает 
        $('#dialog').dialog('open'); ///  работает!!!!!!!     
	
});
});

</script> 

</head> 

<!--  Собственно тело нашего html, из 2х строк -->

<body> 
<div id="dialog">я диалог</div>
<div id="start">(НАЖМИ НА МЕНЯ)</div>

</body> 
</html>

ВРОДЕ ВСЁ НОРМ ))

Небольшое дополнение.
Глядя на это "components/" я подумал, а вы случайно не для битрикса компонент пишите? (впрочем это касается вообще любых систем с виджетами, компонентами, плагинами smarty и тд )

Если да, то убедитесь что скрипты подключаюся хотябы в шаблоне страницы, и не дай бог в шаблоне компонента.Это касается всех компонентов в системе, а не только вашего.

Любой компонент с таким кривым подключением скриптов, отрендеренный после вашего, убьёт все jquery скрипты что были до него. Обновление такого компонента по Ajax 2.0 (тупо передача html, сгенеренная по шаблону коспонента) - также убьёт скрипты jquery.

Логика проста: нельзя подключать jQuery, после подключения jQuery.

Делаю компонент для joomla, в обычном html документе работает, а тут отказывается, как думаете может из-за jommla?

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

Jquery подключается вроде 1 раз, даже если отключить jquery в компоненте то все не работает.

Еще заметил если сделать так:

///.....
else
{
    $('#dialog').dialog('open');  // На этом месте действие прерывается, т.к. alert уже не открывется
    alert('hello world!11');
}
///.....

Может связано с div? Он (текст из дива) воявляется на странице всего на секунду, затем пропадает и открывается диалог. После закрытия диалога (на крестик) текст из дива также отсутствует.

Извините я сначала непонял что

<script src="components/com_hello/js/jquery-1.6.2.min.js" type="text/javascript"></script>

это jquery.

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

Может поставить firebug, или воспользоваться инструментами для chrome/opera и перестать гадать?

Вот что говорит opera

Код:

Uncaught exception: TypeError: '$('#dialog').dialog' is not a function        Event thread: click        index.php:32

Значит не подключен Jquery или jquery ui. Хотя может быть, что и не находит такого элемента

Видимо создаётся условие при котором widget.js, core.js, dialog.js недоступны. обратите внимание на то где подключаюся эти скрипты. Соответственно и метода dialog() не существует.

Только что решилась проблема, все оказалось довольно просто.
Joomla очень странно подключала jquery через компонент, подключил через шаблон вроде пока все работает. Все огромное спасибо за помощь. Всем кто помог по плюсу. Тема закрыта.