VPF::Jquery UI dialog взять данные из диалога.

realniOLOLO

Дата 17.12.2010, 09:56 (ссылка)

(нет голосов)

Загрузка ...

Новичок

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

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

Здравствуйте!

Я новичок в JavaScript, или, лучше сказать 0 =). Правда, у меня очень болььшой опыт Java за плечами и немного Groovy. У меня возникла проблема с получением данных из jquery UI диалога.

Большинство диалогов у меня реализовано так:

Код


/* Delete confirm dialog */
function showDeleteConfirmDialog(table, selectedRow) {
    var $deleteDialog = $('<div class="ui-dialog ui-widget ui-widget-content ui-corner-all></div>')
    .html("Are you sure you want delete " +
            selectedRow.cells[2].firstChild.nodeValue +
            " with label " +
            selectedRow.cells[0].firstChild.nodeValue + "?")
    .dialog({
        autoOpen: false,
        resizable: false,
        title: 'Delete confirmation',
        buttons: {
            "Ok": function() {    
                table.fnDeleteRow( selectedRow );
                $(this).dialog("close");
            },
            "Cancel": function() {
                $(this).dialog("close");
            }
        }
    });
    $deleteDialog.dialog("open");
}

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

Код


/* Add galvanic dialog */
function showAddDialog(table) { 
    var $addDialog = $('<div class="ui-dialog ui-widget ui-widget-content ui-corner-all></div>')
    .html('<form>' +
            '<fieldset>' +
            '<div>' +
                '<label for="label">Label:<input id= "label" type="text" class="form"/></label>' +
            '</div>' +
            '<div>' +                    
                '<label for="code">Code:<input type="text" class="form"/></label>' +
            '</div>' +
            '<div>' +                    
                '<label for="name">Name:<select class="form">' +
                                             '<option>Polish</option>' +
                                             '<option>Grounding</option>' +
                                             '<option>Paint</option>' +
                                             '<option>Enamel</option>' +
                                       '</select>' +
                '</label>' +
            '</div>' +            
          '</fieldset>' +
         '</form>')
    .dialog({
        autoOpen: false,
        resizable: false,        
        title: "Add new galvanic",
        modal: true,
        buttons: {
            "Add": function() {//What must be here to get inputs and select data?                    
                $(this).dialog("close");
            },
            "Cancel": function() {
                $(this).dialog("close");
            }
        }
    });    
    $addDialog.dialog("open");
}

Заранее спасибо за ответы и советы. И ещё вопрос, правильно ли обращаться с диалогами так, как я это делаю?

Это сообщение отредактировал(а) realniOLOLO - 17.12.2010, 09:57

ksnk

Дата 17.12.2010, 10:17 (ссылка)

(нет голосов)

Загрузка ...

прохожий

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

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

Достаточно остановиться в отладчике в функции, обрабатывающей кнопку "Add".
Если посмотреть в этой точке на состояния переменных, this будет указывать на див из $addDialog. Так что поиск всех нужных элементов будет в несколько селекторов на jQuery.
что-то вроде

Код


...
           "Add": function() {//What must be here to get inputs and select data? 
                var label=$(this).find('input').eq(0).val(),  code=$(this).find('input').eq(1).val(),
                    name=$(this).find('select').val() ;      
...          
                $(this).dialog("close");
            },
...

Это сообщение отредактировал(а) ksnk - 17.12.2010, 10:18

--------------------

Человеку свойственно ошибаться, программисту свойственно ошибаться профессионально ! user posted image

realniOLOLO

Дата 17.12.2010, 11:49 (ссылка)

(нет голосов)

Загрузка ...

Новичок

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

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

Огромное спасибо!

Об отладчике я как-то и не подумал..))

realniOLOLO

Дата 25.12.2010, 13:23 (ссылка)

(нет голосов)

Загрузка ...

Новичок

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

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

Может, кому-нибудь когда-нибудь пригодиться:

Если посмотреть на function showAddDialog(table), то html внутри скрипта выглядит не очень, чтобы так не делать я сделал следующее:
1) Добавил этот html в index.html с некоторым id
2) При загрузке сделал так

Код


var $edit;
//...
$edit = $("#edit").clone();
$("#edit").hide();
//...

//в диалоге
function showEditDialog(table, selectedRow) {
    var labelElem = $edit.find('input').eq(0);//Можно было, конечно не делать файнд 3 раза =)
    var codeElem  = $edit.find('input').eq(1);
    var nameElem  = $edit.find('input').eq(2);
    
    labelElem.change().val(selectedRow.cells[0].firstChild.nodeValue);
    codeElem.change().val(selectedRow.cells[1].firstChild.nodeValue);
    nameElem.change().val(selectedRow.cells[2].firstChild.nodeValue);
    
    var $editDialog = $edit
    .dialog({ ... 
              });
//...

0 Пользователей читают эту тему (0 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема \| JavaScript: Применение библиотек \| Следующая тема »