jQuery: как работать с диалоговыми окнами

Решил сделать свою CMS более интерактивной и удобной в плане администрирования. Частенько бывали случаи, когда надо было лишь обновить одну цифру в базе данных и ради этого приходилось полностью перезагружать страницу. AJAX — пришел на помощь. Первое знакомство с ним у меня было пару лет назад. Но как-то мне показалось, что слишком уж грузящий получался код. Но сейчас я наткнулся на библиотеку jQuery и решил поработать с ней.

jQuery — библиотека JavaScript, фокусирующаяся на взаимодействии JavaScript и HTML. Библиотека jQuery помогает легко получать доступ к любому элементу DOM, обращаться к атрибутам и содержимому элементов DOM, манипулировать ими. Также библиотека jQuery предоставляет удобный API по работе с Ajax. Большинство крупнейших компаний и проектов мира используют данную библиотеку. Среди них Google, Dell, Digg, Mozilla, WordPress и многие другие…

Сейчас мне лень писать вводную статью по работе с jQuery, т.к. в интернете полно подробных инструкций (судя по всему, скопированных с одного места). Возможно, позже я напишу небольшой вводный курс.

Ок. Перехожу к делу. У меня в админке есть модуль, который отвечает за работу с новостями. Стандартные функции типа добавления, редактирования, удаления новостей. Но уже тут я столкнулся с проблемами.

Например, как работать с DIV-элементом из диалогового окна. Ведь $(this) в этом случае указывает уже совсем на другую область, а именно на DIV самого окна.

Привожу пример. Имеем HTML-код:

<div id="dialog" style="display: none;" title="Удаление новости">
<p><span class="ui-icon ui-icon-alert" style="float:left; margin:0 7px 20px 0;"></span>Данная новость будет удалена навсегда без возможности восстановления! Вы уверены?</p>
</div>

<div class="pane">
<a href="news.php?act=delete&id=62" class="btn-delete">Удалить</a> |
</div>

В данном коде у нас есть DIV с текстом диалогового окна. Данный DIV спрятан. Для простоты привожу CSS-стили в html-коде. Есть еще один DIV, которому присвоен класс pane. Тут находится кнопка удалить. При нажатии на которую должно появляться диалоговое окно. И при утвердительном ответе должен удаляться весь DIV (который с классом pane). Как этого добиться?

Вот javascript код:

<script type="text/javascript">
   $(document).ready(function(){
   /*
   * Объявляем диалоговое окно с двумя кнопками
   */
   $("#dialog").dialog({
      bgiframe: true,
      resizable: false,
      height:140,
      autoOpen: false,
      modal: true,
      overlay: {
         backgroundColor: '#000',
         opacity: 0.5
      },
      buttons: {
         'Удалить новость': function() {
         $.get(
            "news.php",
            "act=delete&id="+id
         );
         $(this).dialog('close');
         insta.animate({ backgroundColor: "#fbc7c7" }, "fast")
         .animate({ opacity: "hide" }, "slow")
         return false;
      },
      'Отмена': function() {
         $(this).dialog('close');
         return false;
      }
   }
});

   /*
   * Объявляем функции, срабатывающие при нажатии на кнопки Удалить
   */
   $(".pane .btn-delete").click(function(){
      /*
      * Присваиваем ID новости, потом вызываем диалоговое окно...
      * И не забываем присовить переменной insta откуда был сделан вызов
      */
      id = $(this).parents('.pane').find('td:first').attr('id');
      $("#dialog").dialog('open');
      insta = $(this).parents('.pane');
      return false;
   });

});
</script>

Сейчас распишу все по строчкам. Строчка 2 — это специальная функция, которая проверяет загружена ли полностью страница. Ведь код будет выполнен только после полной загрузки страницы. Строчка 6 — объявляем диалоговое окно. У него есть несколько важных параметров, которые надо установить. Например, параметр autoOpen (строчка 10) указывает на то, что диалоговое окно не должно быть открыто при загрузке страницы. Грубо говоря, мы создаем экземпляр диалогового окна в памяти. В строчке 16 указано какие кнопки будут в диалоговом окне и какие функции у этих кнопок.

Например, рассмотрим первую кнопку (строчки 17-25). В строчке 17 указано название кнопки, т.е. то, как ее увидит пользователь. Строчки 18-21 — это мы методом GET передаем указанному файлу news.php необходимые параметры. Далее, в строчке 22 диалоговое окно закрывается. А строчки 23 и 24 прячут нужный нам DIV с указанной анимацией. Но, если посмотреть на строчку 23, то она начинается с insta. Что это такое и откуда взялось? А это переменная, которой мы присвоили значение в строчке 44. Она указывает на объект (в нашем случае DIV с классом pane), из которого сделан вызов кнопки. Возможно, это криво и можно как-то узнать объект из которого вызывалась кнопка из кода функций кнопки, но я не знаю как это сделать, т.к. только начинаю знакомиться с библиотекой jQuery.

Все. Я показал небольшой пример. Именно вот с этой переменной insta у меня и были проблемы, т.к. я никак не мог понять как узнать откуда нажималась кнопка.

Если не очень понятно, то представьте пример. У вас есть таблица с 10 строчками. В каждой строчке есть запись, а под записью кнопка «Удалить». Как узнать что кнопка была нажата на 7 строчке, а не на первой? Вот так:

$(this).parents('.pane').find('td:first').attr('id');

Но повторюсь — из функций в кнопке таким образом это сделать не получится! Для этого и создавалась переменная.