Модераторы: Sardar, Aliance
  

Поиск:

Ответ в темуСоздание новой темы Создание опроса
> jquery: непонятки с button+dialog 
V
    Опции темы
stalker2000
Дата 7.5.2014, 17:37 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Шустрый
*


Профиль
Группа: Участник
Сообщений: 53
Регистрация: 29.7.2010

Репутация: нет
Всего: нет



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

    <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') то окна не показывает. Подскажите, почему?
PM MAIL   Вверх
Aliance
Дата 7.5.2014, 18:59 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


I ♥ <script>
****


Профиль
Группа: Модератор
Сообщений: 6418
Регистрация: 2.8.2004
Где: spb

Репутация: 55
Всего: 137



В 4 строчке, видимо, селектор не правильный. имелось ввиду, думаю, класс - значит пропущена точка в начале.
PM MAIL WWW ICQ Skype   Вверх
stalker2000
Дата 7.5.2014, 19:50 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Шустрый
*


Профиль
Группа: Участник
Сообщений: 53
Регистрация: 29.7.2010

Репутация: нет
Всего: нет



хм, таки да, ошибка. Исправил на 
Код

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

но всё равно не работает
PM MAIL   Вверх
ksnk
Дата 7.5.2014, 20:02 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


прохожий
****


Профиль
Группа: Комодератор
Сообщений: 6855
Регистрация: 13.4.2007
Где: СПб

Репутация: 84
Всего: 386



А у меня - работает. Что я делаю неправильно?


--------------------
Человеку свойственно ошибаться, программисту свойственно ошибаться профессионально ! user posted image
PM MAIL WWW Skype   Вверх
stalker2000
Дата 7.5.2014, 21:03 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Шустрый
*


Профиль
Группа: Участник
Сообщений: 53
Регистрация: 29.7.2010

Репутация: нет
Всего: нет



Цитата(ksnk @ 7.5.2014,  20:02)
А у меня - работает. Что я делаю неправильно?

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

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

то должно вылазить окошко с формой, а оно не лезет  smile 
PM MAIL   Вверх
ksnk
Дата 7.5.2014, 21:29 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


прохожий
****


Профиль
Группа: Комодератор
Сообщений: 6855
Регистрация: 13.4.2007
Где: СПб

Репутация: 84
Всего: 386



A jQueryUI подключен? Документация прочитана? Вот так - работает


--------------------
Человеку свойственно ошибаться, программисту свойственно ошибаться профессионально ! user posted image
PM MAIL WWW Skype   Вверх
stalker2000
Дата 7.5.2014, 22:05 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Шустрый
*


Профиль
Группа: Участник
Сообщений: 53
Регистрация: 29.7.2010

Репутация: нет
Всего: нет



Цитата(ksnk @ 7.5.2014,  21:29)
A jQueryUI подключен? Документация прочитана? Вот так - работает

конечно подключен  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');
  });

то это не работает. Что я делаю не так? Или может это делается иначе?
PM MAIL   Вверх
ksnk
Дата 7.5.2014, 22:18 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


прохожий
****


Профиль
Группа: Комодератор
Сообщений: 6855
Регистрация: 13.4.2007
Где: СПб

Репутация: 84
Всего: 386



Цитата(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
Тынц
Ссылка исправлена, eq(0) убран.

Это сообщение отредактировал(а) ksnk - 7.5.2014, 22:31


--------------------
Человеку свойственно ошибаться, программисту свойственно ошибаться профессионально ! user posted image
PM MAIL WWW Skype   Вверх
stalker2000
Дата 8.5.2014, 10:11 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Шустрый
*


Профиль
Группа: Участник
Сообщений: 53
Регистрация: 29.7.2010

Репутация: нет
Всего: нет



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');
  });

то не работает. Согласно документации обязательно нужно прописывать метод "open".  smile Сам метод прост как двери: "Opens the dialog. This method does not accept any arguments". И всё.


Это сообщение отредактировал(а) stalker2000 - 8.5.2014, 10:33
PM MAIL   Вверх
Aliance
Дата 8.5.2014, 10:19 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


I ♥ <script>
****


Профиль
Группа: Модератор
Сообщений: 6418
Регистрация: 2.8.2004
Где: spb

Репутация: 55
Всего: 137



Проблема в том, что 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/
PM MAIL WWW ICQ Skype   Вверх
stalker2000
Дата 8.5.2014, 10:46 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Шустрый
*


Профиль
Группа: Участник
Сообщений: 53
Регистрация: 29.7.2010

Репутация: нет
Всего: нет



Цитата(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/

не работает, вот так мне нужно...
PM MAIL   Вверх
ksnk
Дата 8.5.2014, 12:04 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


прохожий
****


Профиль
Группа: Комодератор
Сообщений: 6855
Регистрация: 13.4.2007
Где: СПб

Репутация: 84
Всего: 386



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

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

Вот так - работает

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


--------------------
Человеку свойственно ошибаться, программисту свойственно ошибаться профессионально ! user posted image
PM MAIL WWW Skype   Вверх
Aliance
Дата 8.5.2014, 12:14 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


I ♥ <script>
****


Профиль
Группа: Модератор
Сообщений: 6418
Регистрация: 2.8.2004
Где: spb

Репутация: 55
Всего: 137



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

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

Кстати, если нужно получить инстанс - это можно через метод .dialog('widget')
PM MAIL WWW ICQ Skype   Вверх
stalker2000
Дата 8.5.2014, 12:49 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Шустрый
*


Профиль
Группа: Участник
Сообщений: 53
Регистрация: 29.7.2010

Репутация: нет
Всего: нет



ksnk, Aliance, спасибо, то что нужно  smile 
PM MAIL   Вверх
  
Ответ в темуСоздание новой темы Создание опроса
Форум для вопросов, которые имеются в справочниках, но их поиск вызвал затруднения, или для разработчика требуется совет или просьба отыскать ошибку. Напоминаем: 1) чётко формулируйте вопрос, 2) приведите пример того, что уже сделано, 3) укажите явно, нужен работающий пример или подсказка о том, где найти информацию.
 
0 Пользователей читают эту тему (0 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема | JavaScript: Общие вопросы | Следующая тема »


 




[ Время генерации скрипта: 0.1287 ]   [ Использовано запросов: 22 ]   [ GZIP включён ]


Реклама на сайте     Информационное спонсорство

 
По вопросам размещения рекламы пишите на vladimir(sobaka)vingrad.ru
Отказ от ответственности     Powered by Invision Power Board(R) 1.3 © 2003  IPS, Inc.