LINUX.ORG.RU
Форум — Web-development  

AJAX и сортировка

 , ,


1

1

Всем привет. В работе использую jQuery(rapydscript) + webpy на серверной части.

Проблема следующая. Есть список проектов который сортируется по позиции. Нужно менять позицию при нажатии кнопки UP или DOWN и с помощью Ajax отправлять данные на сервер для обновления (по сути принцип Drug & Drop).

По идее задача простая, но по скольку сталкиваюсь впервые въезжаю в пня.

Пытался решить следующим образом. После переноса проекта на верх, я собираю позиции всех проектов и отправляю на сервер...

Кусок кода в rapydscript 

#PROJECTS MODULE
def moveProjectUp():
    parentProject = $(this).parent('div')
    parentProject.insertBefore(parentProject.prev())

    allProjects = $('.projects')
    projectList = allProjects.find('div.single-project')
    positions = []

    for project in projectList:
        position.push($(project).attr('position'))


    data={'pojectsId': pojectsId,
            'indexs': indexs}


    $.post(
        '/projectup',
        JSON.stringify(data),
        serverSuccess
    )

    def serverSuccess(data):
        console.log(data)


    return False

Компилит следующее 

function moveProjectUp() {
        var ՐՏitr1, ՐՏidx1;
        var parentProject, allProjects, projectList, positions, project, data;
        parentProject = $(this).parent("div");
        parentProject.insertBefore(parentProject.prev());
        allProjects = $(".projects");
        projectList = allProjects.find("div.single-project");
        positions = [];
        ՐՏitr1 = ՐՏ_Iterable(projectList);
        for (ՐՏidx1 = 0; ՐՏidx1 < ՐՏitr1.length; ՐՏidx1++) {
            project = ՐՏitr1[ՐՏidx1];
            position.push($(project).attr("position"));
        }
        data = {
            "positions": positions
        };
        $.post("/projectup", JSON.stringify(data), serverSuccess);
        function serverSuccess(data) {
            console.log(data);
        }
        return false;
    }



На серверной стороне происходит следующе


class ProjectUp:
    def POST(self):
        header('Content', 'text/json')
        d = json.loads(web.data())
        positions = d['positions']
  
        projects = list(get_company_projects(session.username))

        for p, i in zip(projects, positions):
            db.update('project', where="id=$id",
                vars={'id': p.id},
                position=i)

        return d

На выходе не получаю правильно отсортированный список проектов. Как решаются такие задачи? Помогите пожалуйста



Последнее исправление: technobot (всего исправлений: 1)

Такие задачи решаются пониманием того, что ты делаешь, для начала.

Drug & Drop

Для начала выучи язык.

Goury ★★★★★
()
Ответ на: комментарий от Goury

Спасибо за замечание. Но я просил помощи, а не наставления по технологии к которой вопрос толком не имеет отношения :)

technobot
() автор топика

Ну, как минимум, в ф-ции moveProjectUp:
positions
postition
indexs
Найди пять отличий.

// Не нужно отправлять все позиции, отправляй только откуда и куда перетащил.

neversleep ★★
()
Последнее исправление: neversleep (всего исправлений: 1)

Как то это всё очень странно выглядит. Проще писать сразу на js. Вот, например, у jQuery есть прекрасный метод prevAll(), который по порядку соберёт все дивы с нужным селектором, почему бы не воспользоваться? Так же есть ещё nextAll(). Собрал данные и отправил. Все или только позиции от начала и до конца — решать тебе.

conformist ★★★
()
Ответ на: комментарий от neversleep

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

Javascript

function moveProjectUp() {
        var parentProject, parentProjectId, parentProjectPosition, prevProject, prevProjectId, prevProjectPosition, data;

        parentProject = $(this).parent("div");
        parentProjectId = parentProject.attr("projectid");
        parentProjectPosition = parentProject.attr("position");

        prevProject = parentProject.prev();
        prevProjectId = prevProject.attr("projectid");
        prevProjectPosition = prevProject.attr("position");

        

        data = {
            "parentProjectId": parentProjectId,
            "prevProjectId": prevProjectId,
            "parentProjectPosition": parentProjectPosition,
            "prevProjectPosition": prevProjectPosition
        };

        $.post("/projectup", JSON.stringify(data), serverSuccess);
        function serverSuccess(data) {
            console.log(data);
        }

        parentProject.insertBefore(parentProject.prev());
        return false;
    }

Server side 

class ProjectUp:
    def POST(self):
        header('Content', 'text/json')
        d = json.loads(web.data())

        db.update('project', where="id=$id",
            vars={'id': d['prevProjectId']},
            position=d['parentProjectPosition'])

        db.update('project', where="id=$id",
            vars={'id': d['parentProjectId']},
            position=d['prevProjectPosition'])

        return d
[/ptyhon]

И это работает если пользователь поднимает на одну позицию вверх, а вот если 2 раза нажимает, то перезапись после второго клика не происходит и я не могу понять почему...

technobot
() автор топика
Ответ на: комментарий от conformist

Спасибо за новые для меня методы. Этот способ пока сложно мной осмысляем, но я пытаюсь его переворить..

technobot
() автор топика

по скольку
на верх

Deleted
()
Ответ на: комментарий от technobot

на клиенте пересчитывать позиции и отправлять весь список сразу, тред не читал

anonymous
()
Ответ на: комментарий от technobot

И это работает если пользователь поднимает на одну позицию вверх, а вот если 2 раза нажимает, то перезапись после второго клика не происходит и я не могу понять почему...

Может потому что атрибут position после перемещения не изменяется? 

$.post("/projectup", JSON.stringify(data), serverSuccess);
function serverSuccess(data) {
    console.log(data);

    parentProject.insertBefore(prevProject);
    parentProject.attr('position', prevProjectPosition);
    prevProject.attr('position', parentProjectPosition);
}

neversleep ★★
()
Ответ на: комментарий от anonymous

прошу прощения, опечатался, правильный метод _.debounce, либо _.throttle, зависит от дизайна вашей архитектуры

anonymous
()

Drug & Drop

Ширяйся & откидывай копыта

Deleted
()
Вы не можете добавлять комментарии в эту тему. Тема перемещена в архив.
Web-development