Таблица с элементами управления записями (JQuery, AJAX).

@hunty · Регистрация: 20.11.2009

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

Недавно начал изучать JQuery и AJAX.
Задумал сделать для админки реализацию Списка (например Пользователей) динамически подгружаемого из БД, с элементами управления (например Удалить_Пользователя, Изменить_Пароль_Пользователя).
Есть некоторые задумки как это реализовать, но недостаток опыта и знаний сказывается.

Посему хотелось бы услышать мнение более опытных программеров (Желательно с примерами).
Отдельно интересно было бы знать как формируется серверная часть (передача JSON и все такое) или как то можно обойтись чисто формирования html для это дела?

@hunty · 05.07.2010, 11:52 **[ТС]**

в частности сейчас мучаюсь с вопросом - как взять значение id элемента с определенным классом и передать его в ajax запросе?

@hunty · 08.07.2010, 13:47 **[ТС]**

как вернуть значение id элемента по классу?

Java
1
var tmp = this.attr("id") как то не работает

@Amf3tam1N · 08.07.2010, 20:51

hunty, аттрибут id по классу можно получить как

JavaScript
1
var tmp = $('.class_name').attr('id');

или через this как

JavaScript
1
var tmp = $(this).attr('id');

Добавлено через 15 минут
JSON представляет собой тестовую запись объекта javascript который потом собирается функцией eval на стороне клиента

на сервере достаточно сформировать строку и вернуть ее клиенту с content-type: application/json и charset: utf8

например вот строка:

JavaScript
1
{data:[{param1:"value1",param2:"value2"},{param1:"value1",param2:"value2"}]}

на клиенте будет объект назовем его obj, в котором в поле data будет массив, к которому можно обратиться например так

JavaScript
1
2
3
4
for(i in obj.data) {
alert(obj.data[i].param1);
alert(obj.data[i].param2);
}

@hunty · 09.07.2010, 11:32 **[ТС]**

Сообщение от Amf3tam1N

hunty, аттрибут id по классу можно получить как

JavaScript
1
var tmp = $('.class_name').attr('id');

или через this как

JavaScript
1
var tmp = $(this).attr('id');

Тут следующая ситуация. Вариант 1 выдает id первого элемента списка с данным классом при клике на любой элемент с этим классом.
Второй вариант выдает "Undefined" то бишь this ни к чему не цепляется почему то.
Как использую (фрагмент):

HTML5
1
2
3
4
5
<!-- формируется на стороне сервера" -->
<tr>
     <td class ="edit" id ="1" onClick ="action()"></td>
     <td class ="delete" onClick="action"></td>
</tr>

Java
1
2
3
4
5
//сама тестируемая функция которая должна возвращать значение id
function action(){
        var tmp=$(this).attr("id");
        alert (tmp);
    }

Что сдела но не так?

@Amf3tam1N · 09.07.2010, 11:40

hunty, он так и не передаст this, попробуй через jQuery

JavaScript
1
2
3
4
5
$(document).ready(function() {
   $('.edit, .delete').click(function(){
      alert($(this).attr("id"));
   });
});

@hunty · 09.07.2010, 14:31 **[ТС]**

Заработало. Работает везде, кроме того места где нужно...
в аякс подгружаемой таблице не работает

JavaScript
1
$("#users").load("../ajax/users.php");

HTML5
1
2
3
<table id="users">
<tr><td class = "edit" >
и так далее.

то есть все что между <table></table> генерируется на серваке и подгружается с помощью .load

@Amf3tam1N · 09.07.2010, 15:49

JavaScript
1
2
3
4
5
$("#users").load("../ajax/users.php",null,function(){
   $('.edit, .delete').click(function(){
      alert($(this).attr("id"));
   });
})

тебе заново надо обработчики повесить

@hunty · 12.07.2010, 09:58 **[ТС]**

Отлично, спасибо! Так заработало!

@hunty · 28.07.2010, 13:49 **[ТС]**

ковырял ковырял это дело и вот что нашкрябалось

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
$(document).ready(function (){
    function loadtable() {                                          //1. загружаем таблицу пользователей через ajax
        $("#users").load("../ajax/users.php",null,  
            function(){
                $("#loader_big").hide();                                        //скрываем прогрессбар после загрузки.
                $('td.delete,td.blocked,td.unblocked').click(
                function(){                                                     //вешаем обработчики удаления и блокировки-разблокировки учетки пользователя
                    var id = ($(this).attr("id"));
                    var action = ($(this).attr("class"));
                    $.get ('../ajax/block_del_user.php',{action: action, id: id},reload);       //отправлям запрос на удаление или блокировку разблокировку          
                                                                                                    //при успехе вызываем функцию reload (перезагрузка таблицы)
                
            });
        })
    }
    $('.adduser').submit(
        function sendForm(){                                        //вешаем обработчик на отправку формы (реакция на кнопку).
            var formData =($(this).serialize());
            $.post('../ajax/adduser.php',formData,
            function (html){
                alert (html);
                reload();
            
        });
    })
    function reload(){
        loadtable();    //перезагружаем таблицу вызывая функцию loadtable. :)                                 
    }
})

Как вы заметили, есть форма для добавления нового элемента в таблицу.
Вчера ковырялся в коде, пытался выяснить почему дублируются ajax запросы, что то напортачил и все перестало работать... думаю дело в скобках... я постоянно в них путаюсь.
P.S. Где бы надыбать инфу про синтаксис jquery в плане скобок и точек с запятой?

Vovan-VE · 28.07.2010, 14:15

Сообщение от hunty

JavaScript
1
2
$('.adduser').submit(
        function sendForm(){

Попробуйте убрать имя функции:

JavaScript
1
2
$('.adduser').submit(
        function(){

@hunty · 04.08.2010, 12:01 **[ТС]**

Все переделал иначе.
Но теперь не работает

JavaScript
1
$('.edit').click(function (){

Весь код:

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
38
39
40
41
42
43
44
$(document).ready(loadtable);
                            
    
    
    $('.adduser').submit(function (){                                   
                var formData =($(this).serialize());
                $.post('../ajax/adduser.php',formData,function (text){                                                                                            alert (text);
                                                                                                reload();
                                        
                                                                                            });
return false;
                                    });
        
                                                            
                                
 
 
    function loadtable() {                                          
                    $("#users").load("../ajax/users.php",null,function(){
                                                                                $("#loader_big").hide();                                        
                                                                                    $('td.delete,td.blocked,td.unblocked').click(function(){                                                        
                                                                                                                                            var id = ($(this).attr("id"));
                                                                                                                                            var action = ($(this).attr("class"));
                                                                                                                                            $.get ('../ajax/block_del_user.php',{action: action, id: id},reload);       //отправлям запрос на удаление или блокировку разблокировку          
                                                                                                    //при успехе вызываем функцию reload (перезагрузка таблицы)
                
                                                                                    });
                            });
    }
    
    function reload(){
        loadtable();    //перезагружаем таблицу вызывая функцию loadtable. :)                                 
    }
 
    $('.edit').click(function (){
                                                            var id = ($(this).attr("id"));
                                                            var action = ($(this).attr("class"));
                                                            $.get ('../ajax/edituser.php',{id: id, action: action});
                                                            alert(action +'-'+ id);
                                                            $("#editform").show(800);
                                                            $("#sendedit").click(function(){
                                                                                                $("#editform").hide("fast");
                                                                                });
                                                        });

Vovan-VE · 04.08.2010, 16:10

hunty, Кто Вас так писать учил? Зачем столько пробелов и где-то там далеко код О_о . Зачем все эти строки с бессмысленными пробелами? Отформатируйте код по человечески, а то это не код, а копипаст какой-то.

JavaScript
1
2
3
4
$(document).ready(loadtable);
$('.adduser').submit(function (){
    var formData = ($(this).serialize());
    $.post('../ajax/adduser.php', formData, function (text){

Новые блоги и статьи Все статьи Все блоги /
SDL3 для Web (WebAssembly): Обработчик клика мыши в браузере ПК и касания экрана в браузере на мобильном устройстве 8Observer8 02.02.2026 Содержание блога Для начала пошагово создадим рабочий пример для подготовки к экспериментам в браузере ПК и в браузере мобильного устройства. Потом напишем обработчик клика мыши и обработчик. . .	Философия технологии iceja 01.02.2026 На мой взгляд у человека в технических проектах остается роль генерального директора. Все остальное нейронки делают уже лучше человека. Они не могут нести предпринимательские риски, не могут. . .	SDL3 для Web (WebAssembly): Вывод текста со шрифтом TTF с помощью SDL3_ttf 8Observer8 01.02.2026 Содержание блога В этой пошаговой инструкции создадим с нуля веб-приложение, которое выводит текст в окне браузера. Запустим на Android на локальном сервере. Загрузим Release на бесплатный. . .	SDL3 для Web (WebAssembly): Сборка C/C++ проекта из консоли 8Observer8 30.01.2026 Содержание блога Если вы откроете примеры для начинающих на официальном репозитории SDL3 в папке: examples, то вы увидите, что все примеры используют следующие четыре обязательные функции, а. . .
SDL3 для Web (WebAssembly): Установка Emscripten SDK (emsdk) и CMake для сборки C и C++ приложений в Wasm 8Observer8 30.01.2026 Содержание блога Для того чтобы скачать Emscripten SDK (emsdk) необходимо сначало скачать и уставить Git: Install for Windows. Следуйте стандартной процедуре установки Git через установщик. . . .	SDL3 для Android: Подключение Box2D v3, физика и отрисовка коллайдеров 8Observer8 29.01.2026 Содержание блога Box2D - это библиотека для 2D физики для анимаций и игр. С её помощью можно определять были ли коллизии между конкретными объектами. Версия v3 была полностью переписана на Си, в. . .	Инструменты COM: Сохранение данный из VARIANT в файл и загрузка из файла в VARIANT bedvit 28.01.2026 Сохранение базовых типов COM и массивов (одномерных или двухмерных) любой вложенности (деревья) в файл, с возможностью выбора алгоритмов сжатия и шифрования. Часть библиотеки BedvitCOM Использованы. . .	SDL3 для Android: Загрузка PNG с альфа-каналом с помощью SDL_LoadPNG (без SDL3_image) 8Observer8 28.01.2026 Содержание блога SDL3 имеет собственные средства для загрузки и отображения PNG-файлов с альфа-каналом и базовой работы с ними. В этой инструкции используется функция SDL_LoadPNG(), которая. . .

@hunty 62 / 29 / 5 Регистрация: 20.11.2009 Сообщений: 193

	Таблица с элементами управления записями (JQuery, AJAX). 30.06.2010, 13:43. Показов 4345. Ответов 12 Метки нет (Все метки) Недавно начал изучать JQuery и AJAX. Задумал сделать для админки реализацию Списка (например Пользователей) динамически подгружаемого из БД, с элементами управления (например Удалить_Пользователя, Изменить_Пароль_Пользователя). Есть некоторые задумки как это реализовать, но недостаток опыта и знаний сказывается. Посему хотелось бы услышать мнение более опытных программеров (Желательно с примерами). Отдельно интересно было бы знать как формируется серверная часть (передача JSON и все такое) или как то можно обойтись чисто формирования html для это дела? 0

@hunty 62 / 29 / 5 Регистрация: 20.11.2009 Сообщений: 193
	05.07.2010, 11:52 [ТС]
	в частности сейчас мучаюсь с вопросом - как взять значение id элемента с определенным классом и передать его в ajax запросе? 0

@hunty 62 / 29 / 5 Регистрация: 20.11.2009 Сообщений: 193
	12.07.2010, 09:58 [ТС]
	Отлично, спасибо! Так заработало! 0