передача атрибутов в диалоговое окно

@Julia_Ber · Регистрация: 12.11.2012

Студворк — интернет-сервис помощи студентам

Доброго всем времени суток! Я новичек в jQuery, но как говорится затянуло.
Хотела реализовать следующее: в таблице выбираем строчку - нажимаем на "галочку"- появлается диалоговое окно- если нажимаем "да" - то срабатывает AJAX-запрос.

HTML5
1
<td><img src="images/dialog-apply.png" id="genehmiegen" alt='. $row->antrag_id .'> </td>';

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
$(function (){    
    $("#genehmiegen").live('click', (function(){        
        $('#dialog_window_1').dialog({
            width: 'auto',
            height: 'auto',
            buttons: {
                "ДА": function(){
                   
                    var antrag_id = $("this").attr("alt").val();
                     $.ajax({
                        type:"POST",
                        data: "antrag_id=" + antrag_id,
                        dataType:"json",
                        url: "ajax/ajax_genehmigung.php",
                        success: function(){ 
                            $('#dialog_window_1').dialog("close");                          
                        }
                    })
                },
                "НЕТ": function (){
                    $(this).dialog("close");                    
                }
            } 
        });
    })
    )
});

Вроде все получилось, пока только одна строка была. Проблему решила с помощью функции live(), но мне нужо передать Ajax дополнительную переменную antrag_id, который я поместила в img как "alt".
Вот его я выцепить никак не могу, помоги-те люди добрые!!

Что-то у меня запарка с передачей данных в jQuery

@aarkhipov · 27.11.2012, 23:55

JavaScript
1
$("#genehmiegen").attr("alt")

@Julia_Ber · 28.11.2012, 02:11 **[ТС]**

если я так прописываю, выбирается только первый "alt", при нажатии на любую строку таблицы, а мне нужно чтобы из каждой строчки таблицы брался свой alt.

HTML5
1
2
<td><img src="images/dialog-apply.png" id="genehmiegen" alt=1> </td>
<td><img src="images/dialog-apply.png" id="genehmiegen" alt=2> </td>

@At0m1c · 28.11.2012, 07:36

Вместо id="genehmiegen" пропишите класс. Id должен быть уникальный.

JavaScript
1
$(this).attr('alt');

@Julia_Ber · 28.11.2012, 20:49 **[ТС]**

не работает. Здесь ($this) ссылается на я так понимаю на $('#dialog_window_1').dialog
jquery знаю не так давно,и сталкиваюсь все время на эту проблему, наверно чего-то не допонимаю:
понимаю только проблему: при нажатии на картинку обрабатывается функция "открой диалоговое окно" и "добавь" туда твою переменную.

Добавлено через 9 часов 11 минут
ЗАРАБОТАЛО!!! Спасибо всем за помощь! +1 почему-то не смогла поставить.
Код немного перемодифицировала получилось вот-что- такое, Работает!! Наткнулась на очень хорошее описание как сделать календарь здесь: http://sanchiz.net/blog/fullca... ete-events
А вместо

HTML5
1
'#dialog_window_1'

прописала

JavaScript
1
'<div name= "'+antrag_id+'">'

в итоге код такой стал:

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
$(document).ready(function(){  
    $("#genehmiegen").live('click', function (){        
        var antrag_id= $(this).attr('alt');
        $('<div name= "'+antrag_id+'">').dialog({
            width: 'auto',
            height: 'auto',
            modal:true,
            title: 'Sind Sie sicher, dass der Antrag genehmigt wird?',
            buttons: [{
                id: 'да',
                text: 'ДА',
                click: function(){                  // Funktion "wenn JA gedrückt wird beim "Genehmigen" AJAX 
                    $.ajax({
                        type:"POST",
                        data: {
                            antrag_id: antrag_id,
                            op: 'genehmiegen'
                        },
                        dataType:"json",
                        url: "ajax/ajax_genehmigung.php",
                        success: function(){ 
                            alert("Antrag ist genehmigt")                       
                        }                        
                    })
                    $(this).dialog('close');
                }
            },
 
            {
            id:'nein',
            text: 'NEIN',
            click: function (){
                $(this).dialog("close");
            }
        }] 
        });     
    });

может кому понадобится, аналогично сделала для НЕТ

@aarkhipov · 28.11.2012, 22:45

Я не уловил вначале, что таких элементов несколько, так как был указан id, а он должен быть уникален (прислушайтесь к совету At0m1c, и пропишите класс). И, собственно, такой фрагмент кода, скорей всего имел ввиду At0m1c:

JavaScript
1
var antrag_id = $(this).attr('alt');

Можно обойтись без этой части (внизу), а вернуть ее к старому виду, это изменение абсолютно бесполезно, т.к. antrag_id сохранится в замыкании:

JavaScript
1
$('<div name= "'+antrag_id+'">').dialog({

@Julia_Ber · 28.11.2012, 22:59 **[ТС]**

Я с помощью этой строчки

JavaScript
1
$('<div name= "'+antrag_id+'">').dialog({

создаю новое диалоговое окно, потому-что у меня оно в html не прописано, а имя даю из клика на картинке "genehmigen". Вроде все логично

@aarkhipov · 28.11.2012, 23:35

Я имел ввиду (хотя могу и ошибаться), что можно использовать старый вариант:

JavaScript
1
$('#dialog_window_1').dialog({

И не совсем понятно: зачем вы присваиваете в качестве имени полученный id?

@Julia_Ber · 29.11.2012, 00:11 **[ТС]**

мне это значение потом в ajax как id нужно, а в html это значение нигде явно не стоит, а вообще данные подгружаются из mysql и это значение нигде на html не регистрируется а мне оно нужно для дальнейшей выборки, вот я его и подвесила на рисунок, запутанно наверно, но другого способа не нашла.
Мне надо было реализовать изменение "Status". Теперь если я нажимаю на "зеленую галочку" (слева) на определенной строке, то проиходит запрос делать или не делать, а потом "дискетка" меняется на "зел. галочку" это начит документ подписан. ну что-то в этом роде. Хотелось конечно чтобы "дискетка" автоматически менялась, но это надо таблицу на ajax подвесить, пардон пока не знаю как, гуглю.

@aarkhipov · 29.11.2012, 00:26

Да нет, вопрос заключался в том, зачем вы вот здесь диву в качестве имени присваиваете id:

JavaScript
1
$('<div name= "'+antrag_id+'">')

@Julia_Ber · 29.11.2012, 13:33 **[ТС]**

вчера уже поздно было, как-то не врубилась в вопрос, сейчас поменяла на

JavaScript
1
$('#dialog_window_1').dialog({

и все оказывается работает. Проблема была раньше наверно в том, что я рано закрывала скобки - ошибки новичка

@aarkhipov · 29.11.2012, 13:47

Да нет же, проблема была здесь:

JavaScript
1
2
"ДА": function(){
             var antrag_id = $("this").attr("alt").val();

В момент выполнения этой функции контекстом (this) была кнопка. (Ну + еще проблема в том, что .val() не нужен, но опустим, это сейчас неважно). Соответственно, у кнопки нет искомого alt. Сейчас же:

JavaScript
1
2
$("#genehmiegen").live('click', function (){        
        var antrag_id= $(this).attr('alt');

В момент взятия контекстом является картинка. Поэтому всё работает.

@Julia_Ber · 29.11.2012, 23:05 **[ТС]**

А посложнее задачку решить? Вот здесь http://ruseller.com/lessons.php?rub=32&id=735 нашла plugIn, что-мне нужно. Там при нажатии на ссылку подгружается файл в модальное окно (я таким образом хочу просмотр документа организовать) . А проблема такая-же как мне вывести эту проклятущую переменную из иходной страницы в модальную? Я так поняла я должна ее прописать перед тем как открою это модальное окно, для этого там есть опция beforeOpen : function () {}, вписываю я ее туда и все-равно как-то не так как надо. Или надо полностью функцию прописать?

JavaScript
1
$("#contact").live('click', function (){ var antrag_id= $(this).attr('alt');}

@aarkhipov · 29.11.2012, 23:12

А можно где-нибудь посмотреть на реальной работающей странице? И скиньте ссылку поточней, а то по этой на список уроков перекидывает. =)

@Julia_Ber · 30.11.2012, 00:13 **[ТС]**

Простите ссылку не проверила! урок называется "Прогрессивное преобразование ссылки на форму в модальную форму" находится на 2 странице той ссылки, которую я дала

@Julia_Ber · 30.11.2012, 00:20 **[ТС]**

Вроде сейчас подгружается нужный antrag_id выводится в Firebug правильное значение, но не попадает в форму

@Julia_Ber · 30.11.2012, 00:26 **[ТС]**

допетрила

и все получилось, прям каиф какой-то

, когда эти дурацкие циферки на экране появляются!!!
Завтра у меня другая задача - подключить в энтой модальной форме выполнение скриптов. Спасибо огромное за поддержку!

@aarkhipov · 30.11.2012, 10:39

Только я собрался разбираться в проблеме, а вы уже всё сделали. Молодец. =)

Новые блоги и статьи Все статьи Все блоги /
Первый деплой lagorue 16.01.2026 Не спеша развернул своё 1ое приложение в kubernetes. А дальше мне интересно создать 1фронтэнд приложения и 2 бэкэнд приложения развернуть 2 деплоя в кубере получится 2 сервиса и что-бы они. . .	Расчёт переходных процессов в цепи постоянного тока igorrr37 16.01.2026 / * Дана цепь постоянного тока с R, L, C, k(ключ), U, E, J. Программа составляет систему уравнений по 1 и 2 законам Кирхгофа, решает её и находит токи на L и напряжения на C в установ. режимах до и. . .	Восстановить юзерскрипты Greasemonkey из бэкапа браузера damix 15.01.2026 Если восстановить из бэкапа профиль Firefox после переустановки винды, то список юзерскриптов в Greasemonkey будет пустым. Но восстановить их можно так. Для этого понадобится консольная утилита. . .	Изучаю kubernetes lagorue 13.01.2026 А пригодятся-ли мне знания kubernetes в России?
Сукцессия микоризы: основная теория в виде двух уравнений. anaschu 11.01.2026 https:/ / rutube. ru/ video/ 7a537f578d808e67a3c6fd818a44a5c4/	WordPad для Windows 11 Jel 10.01.2026 WordPad для Windows 11 — это приложение, которое восстанавливает классический текстовый редактор WordPad в операционной системе Windows 11. После того как Microsoft исключила WordPad из. . .	Classic Notepad for Windows 11 Jel 10.01.2026 Old Classic Notepad for Windows 11 Приложение для Windows 11, позволяющее пользователям вернуть классическую версию текстового редактора «Блокнот» из Windows 10. Программа предоставляет более. . .	Почему дизайн решает? Neotwalker 09.01.2026 В современном мире, где конкуренция за внимание потребителя достигла пика, дизайн становится мощным инструментом для успеха бренда. Это не просто красивый внешний вид продукта или сайта — это. . .

@Julia_Ber 0 / 0 / 0 Регистрация: 12.11.2012 Сообщений: 44
	29.11.2012, 00:11 [ТС]
	мне это значение потом в ajax как id нужно, а в html это значение нигде явно не стоит, а вообще данные подгружаются из mysql и это значение нигде на html не регистрируется а мне оно нужно для дальнейшей выборки, вот я его и подвесила на рисунок, запутанно наверно, но другого способа не нашла. Мне надо было реализовать изменение "Status". Теперь если я нажимаю на "зеленую галочку" (слева) на определенной строке, то проиходит запрос делать или не делать, а потом "дискетка" меняется на "зел. галочку" это начит документ подписан. ну что-то в этом роде. Хотелось конечно чтобы "дискетка" автоматически менялась, но это надо таблицу на ajax подвесить, пардон пока не знаю как, гуглю. Миниатюры 0

@aarkhipov 23 / 23 / 4 Регистрация: 24.11.2012 Сообщений: 97
	29.11.2012, 23:12
	А можно где-нибудь посмотреть на реальной работающей странице? И скиньте ссылку поточней, а то по этой на список уроков перекидывает. =) 1

@Julia_Ber 0 / 0 / 0 Регистрация: 12.11.2012 Сообщений: 44
	30.11.2012, 00:13 [ТС]
	Простите ссылку не проверила! урок называется "Прогрессивное преобразование ссылки на форму в модальную форму" находится на 2 странице той ссылки, которую я дала 0

@Julia_Ber 0 / 0 / 0 Регистрация: 12.11.2012 Сообщений: 44
	30.11.2012, 00:20 [ТС]
	Вроде сейчас подгружается нужный antrag_id выводится в Firebug правильное значение, но не попадает в форму Миниатюры 0

@Julia_Ber 0 / 0 / 0 Регистрация: 12.11.2012 Сообщений: 44
	30.11.2012, 00:26 [ТС]
	допетрила и все получилось, прям каиф какой-то, когда эти дурацкие циферки на экране появляются!!! Завтра у меня другая задача - подключить в энтой модальной форме выполнение скриптов. Спасибо огромное за поддержку! 0

@aarkhipov 23 / 23 / 4 Регистрация: 24.11.2012 Сообщений: 97
	30.11.2012, 10:39
	Только я собрался разбираться в проблеме, а вы уже всё сделали. Молодец. =) 0