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

Поиск:

Ответ в темуСоздание новой темы Создание опроса
> Отправка данных формы AJAX`ом? 
:(
    Опции темы
Jops
Дата 19.2.2013, 12:44 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Шустрый
*


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

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



Здравствуйте уважаемые!
Есть функция формирующая таблицу с информацией (впоследствии появляется в диалоговом окне). Моя задача состояла в том, что бы в конце каждой <tr> с информацией, прикрутить SELECT + два скрытых <input> + кнопку для отправки формы. Так как SELECT и Кнопка формируются в ячейках, связал их с Формой при помощи form='data'. Для каждой <tr> Форма создаётся своя, но с одинаковым  ID (предполагается, что за один раз можно изменить только одно значение в таблице). В срытых <input> формируются уникальные значение. <tr> может быть бесконечно много. Кинул click на Кнопку и создал функцию, которая обращается к серверному скрипту, для изменения значений в БД. Вот тут и начались проблемы, точнее одна. Data undefined так сказать)
По всей видимости функция не получает данные из формы (у меня проблемы с подобными связываниями).
Может, кто подскажет, намекнёт куда копать.
Буду премного благодарен!

Код

function vr_cam_gr_draw_all(id) {
    if(($("#vr_grcam_"+id).length > 0)) {
        var tdiv    = $("#vr_grcam_"+id);
        var ttable  = $('#vr_grcam_t'+id);
    } else {
        var tdiv = $('<div/>',{id: "vr_grcam_"+id, 
            title: "Список прав групп и пользователей (ID: "+id+")", "class": "list"
        });
        var ttable = $('<table/>',{id: "vr_grcam_t_"+id, "class": "list", style: "border-bottom: 0px;"
        });
        $(ttable)
        .append($('<thead/>').append($('<tr/>')
            .append($('<th/>',{text: 'ID Группы', width: 120}))
            .append($('<th/>',{text: 'Имя группы', width: 250}))
            .append($('<th/>',{text: 'Статус права', width: 110}))
            .append($('<th/>',{text: '', width: 120}))
            .append($('<th/>',{text: '', width: 60}))
            ))
        ;
        $(tdiv).append(ttable);
    

        for(var ruleline in group[id]) {
            $(ttable).append($('<tr/>')
                .append($('<td/>',{text: group[id][ruleline].group_id}))
                .append($('<td/>',{text: group[id][ruleline].group_name}))
                .append($('<td/>',{html: lang.rules.allowed[group[id][ruleline].rule_status]}))
                                
/********************************************************/                                
                                //Здесь начинается формироваться форма для отправки на сервер при нажатии кнопки ИЗМЕНИТЬ
                .append($("<form id='data'/>"))//Элементы формы не состоят в ней и связанны с ней по id='data'
                .append($('<td/>',{html: "<select name='rule_status' form='data'>
<option value=''>Выбрать статус</option> <option value='0'>Запрещено</option>
<option value='1'>Разрешено</option><option value='2'>Только онлайн</option></select>", style:"padding: 5px"}))
                .append("<input type='hidden' form='data' name='group_id' value="+group[id][ruleline].group_id+">")
                .append("<input type='hidden' form='data' name='cam_gr_id' value="+id+">")
                .append($('<td/>')
                .append($('<button/>',{button: {}, "form": "data","type": "button" , text: 'Изменить', style:"font-size: 12px; padding: 3px;"}).click(function() {edit_rules(this);
                                //Конец формы
/********************************************************/                                    
                }))));}}
$(tdiv).dialog({
    width: '650',
    height: '300', 
    resize: false
});
}

function edit_rules(obj) {
    var usr_url = cam_control+"/cgi-bin/admin.pl?m=editrules";
    $.ajax({
        type: 'GET',
        dataType: 'json',
        data: $(obj).serialize(),
        cache: false,
        url: usr_url,
        success: function(data){
            if(data.error != undefined) { //На этом месте происходит ошибка!
                if(undefined != err_lang[data.error]) {
                    alert('Ошибка: '+err_lang[data.error]);
                }else{
                    alert('Возникла неизвестная ошибка, попробуйте позже. ('+data.error+')');
                }} 
        },
        error:function (xhr, ajaxOptions, thrownError, request, error){
            alert('Возникла неизвестная ошибка, попробуйте позже. \n [ \n'+'xrs.cam_status = ' + xhr.status + '\n' + 'thrown error = ' + thrownError + '\n' + 'xhr.statusText = '  + xhr.statusText + '\n' +
                'request = ' + request + '\n' + 'error = ' + error+' \n ]');
        }
    });
}




ДОБАВИЛ!!!


Сам код формирующий в таблице <tr> с <td> и Формами

Код

 for(var ruleline in group[id]) {
            $(ttable).append($('<tr/>')
                .append($('<td/>',{text: group[id][ruleline].group_id}))
                .append($('<td/>',{text: group[id][ruleline].group_name}))
                .append($('<td/>',{html: lang.rules.allowed[group[id][ruleline].rule_status]}))
                .append($('<td/>')
                .append($("<form id="+0+id+group[id][ruleline].group_id+">")
                .append($("<div/>", {"class":"divsel"})
                .append($("<select name='rule_status'form='data'><option value=''>Выбрать статус</option>
<option value='0'>Запрещено</option><option value='1'>Разрешено</option>
<option value='2'>Только онлайн</option></select>")))
                .append("<input type='hidden' name='cam_gr_id' form='data' value="+id+">")
                .append("<input type='hidden' name='group_id' form='data' value="+group[id][ruleline].group_id+">")    
                .append($("<div/>", {"class":"divbut"})
                .append($('<button/>',{button: {}, "type": "submit","form":"data" , text: 'Изменить'}).click(function(){edit_rules()}))))
               .append($("</form>")) 

                )

                );

        }



Функция отправки запроса на сервер

Код

function edit_rules() {
    var usr_url = cam_control+"/cgi-bin/admin.pl?m=editrules";
    $.ajax({
        type: 'GET',
        dataType: 'json',
        data: $(/*Здесь должен инициализироваться ID формы, которая по кнопке отправляет именно свои данные*/).serialize(), 
        cache: false,
        url: usr_url,
        success: function(data){
            if(data.error != undefined) {
                if(undefined != err_lang[data.error]) {
                    alert('Ошибка: '+err_lang[data.error]);
                }else{
                    alert('Возникла неизвестная ошибка, попробуйте позже. ('+data.error+')');
                }
            } else {
                  /*jAlert('Юзер успешно добавлен');
                  func_cams_groups();*/

            }
        },
        error:function (xhr, ajaxOptions, thrownError, request, error){
            alert('Возникла неизвестная ошибка, попробуйте позже. \n [ \n'+'xrs.cam_status = ' + xhr.status + '\n' + 'thrown error = ' + thrownError + '\n' + 'xhr.statusText = '  + xhr.statusText + '\n' +
                'request = ' + request + '\n' + 'error = ' + error+' \n ]');
        }
    });
}


Это сообщение отредактировал(а) Aliance - 20.2.2013, 12:42

Присоединённый файл ( Кол-во скачиваний: 0 )
Присоединённый файл  Таблица.jpg 45,52 Kb
PM MAIL   Вверх
Aliance
Дата 19.2.2013, 13:23 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


I ♥ <script>
****


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

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



Цитата(Jops @  19.2.2013,  13:44 Найти цитируемый пост)
 Так как SELECT и Кнопка формируются в ячейках, связал их с Формой при помощи form='data'. 

А что мешает помещать форму внутрь каждого td свою?

Цитата(Jops @  19.2.2013,  13:44 Найти цитируемый пост)
Форма создаётся своя, но с одинаковым  ID

ИД - уникальный идентификатор, как он может быть одинаковый по логике подумай.

Цитата(Jops @  19.2.2013,  13:44 Найти цитируемый пост)
Так как SELECT и Кнопка формируются в ячейках, связал их с Формой при помощи form='data'.

что-то новенькое. Это что такое?  smile 

У тебя получается разметка такая:
Код

<table>
  <form>
    <tr>
      <td>
      </td>
    </tr>
  </form>
</table>

а должна быть такая:
Код

<table>
  <tr>
    <td>
        <form>...</form>
    </td>
  </tr>
</table>


видимо из-за этого у тебя ломается скорее всего serialize. исправляй ошибки и смотреть будем дальше.

PS: а вообще такая работа это полный трешак. Почитай про MVC, выносить верстку в js это жесть. Можно посмотреть в сторону хотя бы jquery template / backbone
PM MAIL WWW ICQ Skype   Вверх
Jops
Дата 19.2.2013, 13:40 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Шустрый
*


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

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



Цитата(Aliance @  19.2.2013,  13:23 Найти цитируемый пост)
что-то новенькое. Это что такое? 


Если элемент формы находится за её приделами, то его можно связать вписав form='ID формы'


Цитата(Aliance @  19.2.2013,  13:23 Найти цитируемый пост)
видимо из-за этого у тебя ломается скорее всего serialize. исправляй ошибки и смотреть будем дальше.


Честно сама форма не так критично, её можно переделать и стили вынести. Меня больше беспокоит тот факт: Правильно ли я связал Кнопку+click+функция отправки? Отработает ли это дело, когда форма будет корректна и готова к отправке?
PM MAIL   Вверх
Aliance
Дата 19.2.2013, 14:04 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


I ♥ <script>
****


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

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



Цитата(Jops @  19.2.2013,  14:40 Найти цитируемый пост)
Правильно ли я связал Кнопку+click+функция отправки? Отработает ли это дело, когда форма будет корректна и готова к отправке? 

выяснить это очень просто: открой консоль разработчика и посмотри, отправляется ли запрос. если нет, то какая ошибка получается.
PM MAIL WWW ICQ Skype   Вверх
Jops
Дата 19.2.2013, 14:17 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Шустрый
*


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

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



Точно!) Затупил
PM MAIL   Вверх
Aliance
Дата 20.2.2013, 12:58 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


I ♥ <script>
****


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

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



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

Кроме того, если уж редактируешь сообщение, смотри чтобы оно не вылезало за пределы верстки. Для этого разбивай длинные строки пробелами.

Добавлено через 3 минуты и 23 секунды
По сабжу, ты видимо слабо ориентируешься в DOM manipulation.

После всей твоих append советую сделать html() и посмотреть что получилось.
Намекаю: если ты делаешь
Код

$(table).append(tr).append(td)

и ожидаешь получить
Код

<table>
<tr>
<td></td>
</tr>
</table>

то это не так, ты получишь по факту
Код

<table>
<tr></tr>
<td></td>
</table>


Для правильной работы нужно делать так:
Код

var $td = $('td');
$td.text('ololo');
var $tr = $('tr');
$tr.append($td);
$(table).append($tr);

PM MAIL WWW ICQ Skype   Вверх
Jops
Дата 20.2.2013, 13:17 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Шустрый
*


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

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



построение как раз то нормальное.
Вида:

<table>
<tr>
<td></td>
<td></td>
<td></td>
<td>с элементами формы</td>
</tr>
<tr>
<td></td>
...
</table>

Со структурой и построением элементов у меня всё нормально, можете не сомневаться. Проблема с технической стороны. И в частности с отправкой данных. И вопрос на этом строился, и я вам в личку скидывал вопрос по этому поводу. Не могу осмыслить, как подать функции (которая отсылает данные на сервер) нужный ID формы (с условием что у каждого <tr> она уникальна)
PM MAIL   Вверх
Aliance
Дата 20.2.2013, 14:11 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


I ♥ <script>
****


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

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



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

Если нужно из элемента формы получить ее ID, то можно вот так:
Код

$(select).on('change', function() {
    var formId = $(this).closest('form').attr('id');
})


Только до конца не понимаю зачем оно нужно? Для callback`а какого-то?

И еще, как выглядит ID формы? Судя по коду он начинается с нуля, а это не правильно. ID не может начинаться с цифры или спец. символа.
PM MAIL WWW ICQ Skype   Вверх
Jops
Дата 20.2.2013, 14:36 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Шустрый
*


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

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



Это да! С нуля!  Косяк мой) Ну даже предположим не с нуля а с "D". И того id = D1225 например


А нужно инициализировать ID, что бы функция (добавленная в посте) приняла данные из той формы, в которой была нажата КНОПКА. Потом сериализовала и отправила на сервер для занесения в БД.
А вставить эту инициализацию надо в место где я указал) (см. ниже)

Цитата(Jops @  19.2.2013,  12:44 Найти цитируемый пост)
data: $(/*Здесь должен инициализироваться ID формы, которая по кнопке отправляет именно свои данные*/).serialize(), 


PM MAIL   Вверх
Aliance
Дата 20.2.2013, 17:01 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


I ♥ <script>
****


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

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



Код

...
.append( $('<button/>', {button: {}, "type": "submit","form":"data" , text: 'Изменить'}).click(edit_rules) )
...
function edit_rules() {
...
   $.ajax({
        type: 'GET',
        dataType: 'json',
        data: $(this).closest('form').serialize(),  // this === button
...
}

PM MAIL WWW ICQ Skype   Вверх
Jops
Дата 21.2.2013, 03:23 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Шустрый
*


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

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



Не хочет идентифицировать) Только отправляет в строке поиска ...rule_status=0&cam_gr_id=12&group_id=25

Странно)

Не получается получить данные из формы и сериализовать их

Получается, что функция не видит данных формы и самой формы (или форма не видит). И отсылает данные просто "вникуда" 

Если выставить async: false, то данные всё таки доходят до сервера и меняются, но при этом вся страница обновляется и в строке опять же появляется ...rule_status=0&cam_gr_id=12&group_id=25. 

По хорошему хотелось бы избежать подобного (что бы страница не обновлялась и окно соответственно не исчезало)

Но как? Вопрос конечно занимательный)

Может ли быть проблема в том, что действие происходит в сформированном диалоговом окне?

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


I ♥ <script>
****


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

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



Попробуй прервать стандартное поведение браузера:
Код

function edit_rules(event) {
event.preventDefault();
...

PM MAIL WWW ICQ Skype   Вверх
Jops
Дата 21.2.2013, 10:58 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Шустрый
*


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

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



Попробую. В личку больше не пишу)
PM MAIL   Вверх
Jops
Дата 22.2.2013, 01:30 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Шустрый
*


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

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



Огромное спасибо! Выручили, как никогда) И ещё один момент. В общих чертах объясните как обновить это диалоговое окно, что бы результат поменятся визуально, а то приходится обновлять страницу

Или лучше закрыть диалоговое окно и обновить страницу.
Правда условие такого, что у него нет уникального ID и не очень понятно как его обнаружить. Через this не получается

Код

$(/*Параметр*/).dialog("close");
func_cams_groups(); // Функция загрузки страницы


Вот такого вида наверное должно быть?

Просто ещё дело в том, что после применения результата я закрываю окно. Не обновляя страницу, его вновь открываю, но данные отражаются старые, хотя в FireBag показанно, что функции подгрузили изменённые данные. Только обновив страницу вручную, результат отразится новый

Если использовать чисто перегруз:

Код

setTimeout('window.location.reload()', 500);


То не очень подходит, так как он кидает на главную страницу, а надо, как вы понимаете, на туже да и плюс ещё окно вернуль с новыми данными

Можно было бы привязать

Код

replaceWith(data)


Но опять же нет ID )


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


I ♥ <script>
****


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

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



Что касается jquery ui dialog, то там должна работа вестись одним из следующих образов:
1)
Код

$( '#dialog' ).dialog(...); // open
$( '#dialog' ).dialog( "close" ); // close

2)
Код

var $dialog = $( '#dialog' ).dialog(...); // open + запоминаем в глобальную переменную
$dialog.dialog( "close" ); // close


Что касается наполнения таблицы данными и перезагрузки страницы. Конечно никакой перезагрузки быть не должно, иначе какой смысл в ajax`е? Видимо, что-то не так делаешь. Я так понимаю наполнение идет в функции func_cams_groups? Покажи ее.
PM MAIL WWW ICQ Skype   Вверх
Ответ в темуСоздание новой темы Создание опроса
0 Пользователей читают эту тему (0 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема | JavaScript: Применение библиотек | Следующая тема »


 




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


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

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