Версия для печати темы
Нажмите сюда для просмотра этой темы в оригинальном формате
Форум программистов > JavaScript: Общие вопросы > jquery: непонятки с button+dialog


Автор: stalker2000 7.5.2014, 17:37
Добрый день! Есть таблица, в таблице кнопки, сразу за кнопкой следует маленькая форма. Требуется по нажатию кнопки показать следующую за ней форум. Сделал так:
Код

    <button class="site-config-button">Настройки сайта</button>
    <form class="site-config-form" method="post" title="Настройки сайта">
      Число: <input name="period" value="5" />
    </form>

Код

  $('button.site-config-button').button().click(function() {
    $(this).next('form.site-config-form').toggle(); //.dialog('open');
  });
  $('site-config-form').dialog({
    autoOpen: false,
    resizable: false,
    width: 500,
    modal: true,
    buttons: {
      "Сохранить": function() {
        $(this).submit();
      },
      "Отмена": function() {
        $(this).dialog("close");
      }
    }
  });

в таком виде при нажатии на кнопку следующая за ней форма показывается, как и положено. Но если я вместо .toggle() пишу .dialog('open') то окна не показывает. Подскажите, почему?

Автор: Aliance 7.5.2014, 18:59
В 4 строчке, видимо, селектор не правильный. имелось ввиду, думаю, класс - значит пропущена точка в начале.

Автор: stalker2000 7.5.2014, 19:50
хм, таки да, ошибка. Исправил на 
Код

  $('form.site-config-form').dialog({

но всё равно не работает

Автор: ksnk 7.5.2014, 20:02
А у меня - http://jsfiddle.net/Mpqm5/. Что я делаю неправильно?

Автор: stalker2000 7.5.2014, 21:03
Цитата(ksnk @ 7.5.2014,  20:02)
А у меня - http://jsfiddle.net/Mpqm5/. Что я делаю неправильно?

не работает с .dialog('open') во второй строке
я ж написал, что .toggle работает, а если сделать так:
Код

   $(this).next('form.site-config-form').dialog('open');

то должно вылазить окошко с формой, а оно не лезет  smile 

Автор: ksnk 7.5.2014, 21:29
A http://api.jqueryui.com/dialog/ подключен? Документация прочитана? http://jsfiddle.net/Mpqm5/1/ - работает

Автор: stalker2000 7.5.2014, 22:05
Цитата(ksnk @ 7.5.2014,  21:29)
A http://api.jqueryui.com/dialog/ подключен? Документация прочитана? http://jsfiddle.net/Mpqm5/1/ - работает

конечно подключен  smile 

ваш пример действительно работает, но мне нужно иначе. Видимо, плохо объяснил. Есть такой код:
Код

<button class="site-config-button">Настройки сайта1</button>
<form class="site-config-form" method="post" title="Настройки сайта1">
  Число: <input name="period" value="1" />
</form>

<button class="site-config-button">Настройки сайта2</button>
<form class="site-config-form" method="post" title="Настройки сайта2">
  Число: <input name="period" value="2" />
</form>

.............................

<button class="site-config-button">Настройки сайтаN</button>
<form class="site-config-form" method="post" title="Настройки сайтаN">
  Число: <input name="period" value="N" />
</form>

мне нужно как-то привязать каждую кнопку к следующей за ней форме. Если я пишу
Код

  $('button.site-config-button').button().click(function() {
    $(this).next('form.site-config-form').dialog('open');
  });

то это не работает. Что я делаю не так? Или может это делается иначе?

Автор: ksnk 7.5.2014, 22:18
Цитата(stalker2000 @  7.5.2014,  22:05 Найти цитируемый пост)
$(this).next('form.site-config-form').dialog('open');


'open' - это надо читать документацию. Отсутствие параметра - настоящий open и есть. Что означает строковый параметр - можно почитать документацию, вероятно ничего хорошего.
$(this).next('... выдает коллекцию. Какого-то фига диалог не понимает коллекцию более чем из одного элемента, хотя как и со строковым параметрм - вполне мог бы. Так что нужно писать так
Код

$(this).next('form.site-config-form').dialog();

Это если next тут действительно нужен...

Добавлено @ 22:20
Про коллекцию - отмена, eq(0) не нужен на самом деле.

Добавлено @ 22:21
http://jsfiddle.net/Mpqm5/8/
Ссылка исправлена, eq(0) убран.

Автор: stalker2000 8.5.2014, 10:11
ksnk, так работает но мне ещё нужно настроить вид окна и кнопки. Если добавить 
Код

  $('form.site-config-form').dialog({
    autoOpen: false,
    resizable: false,
    width: 500,
    modal: true,
    buttons: {
      "Сохранить": function() {
        $(this).submit();
      },
      "Отмена": function() {
        $(this).dialog("close");
      }
    }
  });

и соответственно написать
Код

  $('button.site-config-button').button().click(function() {
    $(this).next('form.site-config-form').dialog('open');
  });

то http://jsfiddle.net/WnQsZ/. Согласно http://jqueryui.com/dialog/#animated обязательно нужно прописывать метод "open".  smile http://api.jqueryui.com/dialog/#method-open прост как двери: "Opens the dialog. This method does not accept any arguments". И всё.

Автор: Aliance 8.5.2014, 10:19
Проблема в том, что form.site-config-form после инициализации диалога превращается в
Код

<div class="ui-dialog ..." ...>
    <div class="ui-dialog-titlebar ..."></div>
    <form class="site-config-form ui-dialog-content ui-widget-content" ...>
      ...
    </form>
    ...
</div>


Поэтому обращаться просто по тому же селектору - не верно. Нужно завести глобальную переменную и обращаться к ней.

Вот решение: http://jsfiddle.net/Aliance/4Z7v5/

Автор: stalker2000 8.5.2014, 10:46
Цитата(Aliance @  8.5.2014,  10:19 Найти цитируемый пост)
Проблема в том, что form.site-config-form после инициализации диалога превращается в

я смотрю будет проще с помощью пхп формировать уникальный id для каждой формы и кнопки и дописывать в код страницы что-то вроде
Код

<script>
  $('#config-button-1').click(function() {
    $('#config-form-1').dialog('open');
  });
</script>

и так для каждой пары кнопка-форма...
блин, некошерно smile 

Цитата(Aliance @  8.5.2014,  10:19 Найти цитируемый пост)
Поэтому обращаться просто по тому же селектору - не верно. Нужно завести глобальную переменную и обращаться к ней.

Вот решение: http://jsfiddle.net/Aliance/4Z7v5/

не работает, http://jsfiddle.net/r4Jaw/ мне нужно...

Автор: ksnk 8.5.2014, 12:04
Цитата(stalker2000 @  8.5.2014,  10:11 Найти цитируемый пост)
Согласно документации обязательно нужно прописывать метод "open".   

Хм... Да мне тоже неплохо бы почитать документацию. :(

http://jsfiddle.net/Mpqm5/15/ - работает

C переменной и уникальным ID - есть обходной трюк. Можно пользоваться data.

Автор: Aliance 8.5.2014, 12:14
Через php точно ничего делать не нужно, это совсем уж быдлокод.

Как быстрый костыль: http://jsfiddle.net/Aliance/4Z7v5/1/

Кстати, если нужно получить инстанс - это можно через метод http://api.jqueryui.com/dialog/#method-widget

Автор: stalker2000 8.5.2014, 12:49
ksnk, Aliance, спасибо, то что нужно  smile 

Powered by Invision Power Board (http://www.invisionboard.com)
© Invision Power Services (http://www.invisionpower.com)