Форум программистов, компьютерный форум, киберфорум
jQuery
Войти
Регистрация
Восстановить пароль
 
Рейтинг 5.00/21: Рейтинг темы: голосов - 21, средняя оценка - 5.00
62 / 29 / 5
Регистрация: 20.11.2009
Сообщений: 193
1

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

30.06.2010, 13:43. Показов 4059. Ответов 12
Метки нет (Все метки)

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

Посему хотелось бы услышать мнение более опытных программеров (Желательно с примерами).
Отдельно интересно было бы знать как формируется серверная часть (передача JSON и все такое) или как то можно обойтись чисто формирования html для это дела?
__________________
Помощь в написании контрольных, курсовых и дипломных работ здесь
0
Programming
Эксперт
94731 / 64177 / 26122
Регистрация: 12.04.2006
Сообщений: 116,782
30.06.2010, 13:43
Ответы с готовыми решениями:

Связанные выпадающие списки с записями из базы данных JQuery-AJAX + PHP
Добрый день! Требуется на сайте для стоматологического кабинета создать скрипт для связанных...

Создайте пользовательскую форму с элементами управления TextBox и элементом управления RefEdit
Создайте пользовательскую форму с элементами управления TextBox и элементом управления RefEdit. С...

Таблица с фиксированными записями
Как сделать таблицы в Access и открыть, связать их в Delphi я знаю, но не знаю как сделать таблицу...

Книги по JQuery(JQuery UI) и Ajax в Asp.Net
Добрый день! Посоветуйте пожалуйста хорошую книгу по использованию JavaScrip на клиентской части...

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

Java
1
var tmp = this.attr("id") как то не работает
0
49 / 48 / 5
Регистрация: 18.01.2010
Сообщений: 94
08.07.2010, 20:51 4
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);
}
0
62 / 29 / 5
Регистрация: 20.11.2009
Сообщений: 193
09.07.2010, 11:32  [ТС] 5
Цитата Сообщение от 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);
    }
Что сдела но не так?
0
49 / 48 / 5
Регистрация: 18.01.2010
Сообщений: 94
09.07.2010, 11:40 6
hunty, он так и не передаст this, попробуй через jQuery
Javascript
1
2
3
4
5
$(document).ready(function() {
   $('.edit, .delete').click(function(){
      alert($(this).attr("id"));
   });
});
1
62 / 29 / 5
Регистрация: 20.11.2009
Сообщений: 193
09.07.2010, 14:31  [ТС] 7
Заработало. Работает везде, кроме того места где нужно...
в аякс подгружаемой таблице не работает

Javascript
1
$("#users").load("../ajax/users.php");
HTML5
1
2
3
<table id="users">
<tr><td class = "edit" >
и так далее.
то есть все что между <table></table> генерируется на серваке и подгружается с помощью .load
0
49 / 48 / 5
Регистрация: 18.01.2010
Сообщений: 94
09.07.2010, 15:49 8
Javascript
1
2
3
4
5
$("#users").load("../ajax/users.php",null,function(){
   $('.edit, .delete').click(function(){
      alert($(this).attr("id"));
   });
})
тебе заново надо обработчики повесить
1
62 / 29 / 5
Регистрация: 20.11.2009
Сообщений: 193
12.07.2010, 09:58  [ТС] 9
Отлично, спасибо! Так заработало!
0
62 / 29 / 5
Регистрация: 20.11.2009
Сообщений: 193
28.07.2010, 13:49  [ТС] 10
ковырял ковырял это дело и вот что нашкрябалось

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 в плане скобок и точек с запятой?
0
13201 / 6588 / 1040
Регистрация: 10.01.2008
Сообщений: 15,069
28.07.2010, 14:15 11
Цитата Сообщение от hunty Посмотреть сообщение
Javascript
1
2
$('.adduser').submit(
        function sendForm(){
Попробуйте убрать имя функции:
Javascript
1
2
$('.adduser').submit(
        function(){
0
62 / 29 / 5
Регистрация: 20.11.2009
Сообщений: 193
04.08.2010, 12:01  [ТС] 12
Все переделал иначе.
Но теперь не работает
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");
                                                                                });
                                                        });
0
13201 / 6588 / 1040
Регистрация: 10.01.2008
Сообщений: 15,069
04.08.2010, 16:10 13
hunty, Кто Вас так писать учил? Зачем столько пробелов и где-то там далеко код О_о . Зачем все эти строки с бессмысленными пробелами? Отформатируйте код по человечески, а то это не код, а копипаст какой-то.
Javascript
1
2
3
4
$(document).ready(loadtable);
$('.adduser').submit(function (){
    var formData = ($(this).serialize());
    $.post('../ajax/adduser.php', formData, function (text){
0
IT_Exp
Эксперт
87844 / 49110 / 22898
Регистрация: 17.06.2006
Сообщений: 92,604
04.08.2010, 16:10

Каков командный способ управления записями?
Т.е. при помощи каких SQL - команд это делается и пример , если можно. Спасибо.

Стандарт ajax или jquery-> ajax?
Добрый день, такой вопрос что лучше всего использовать стандарт AJAX объект XMLHttprequest либо же...

Изменить параметры управления учетными записями пользователей
Люди, помогите!! Срочно нужно изменить параметры управления учетными записями пользователей, т.е...

Графический интерфейс для управления учетными записями пользователей
Пробую файловый сервер на Дебиане 8.1. Субъективно он мне как-то более симпатичен, чем на Убунту,...

Таблица начинает ругаться если заполняю больше чем 4 записями
-- phpMyAdmin SQL Dump -- version 3.3.7deb7 -- http://www.phpmyadmin.net -- -- Хост: localhost...

JQuery, Ajax и LIVE!? Возможно ли повесить ajax запрос на live?
все делаю правильно, но у меня даже onSubmit alert(&quot;ok!&quot;); выводить не хочет? код примерно...


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
13
Ответ Создать тему
Опции темы

КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin
Copyright ©2000 - 2022, CyberForum.ru