Не работает ajax запрос при отправки формы

@Santikas · Регистрация: 24.02.2020

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

Такая проблема, у меня есть форма которая ссылается на ajax с сортировкой, при успешной сортировке через инер html вставляются новые данные о постах а так же форма с лайком, которая ссылается на views с лайком поста и почему-по после выполнения одного ajax запроса с сортировкой я не могу выполнить второй ajax запрос с лайком. Как решить данную проблему. Ниже представлю код. Вот форма которая не работает
<form action="/like/" method="post" class="like-form form-like" id="l${sortPosts.pk}">

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
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
const sortPost = document.getElementById("sort-post")
const mainContent = document.getElementById("mainId")
let sort = false;
$(document).on('click', '#sort-form', function (e) {
    $.ajax({
        type: 'POST',
        url: '/sort/',
        data: {
            csrfmiddlewaretoken: $('input[name=csrfmiddlewaretoken]').val(),
 
        },
        success: function (res_post) {
            const dataPost = res_post.data
            if (Array.isArray(dataPost) && sort === false) {
                sortPost.style.display = 'grid'
                mainContent.innerHTML = ""
                dataPost.forEach(sortPosts => {
                    sortPost.innerHTML += `
                    <div class="photo">
                        <img class="zoom" src="${sortPosts.img}" alt="" width="300px" height="380px"
                             style="border-radius: 30px;">
                        <div class="button2 content fade">
                            <p>Описание:</p>
                            <div class="description-post" id="description-post-id">
                                <p class="p-desc">${sortPosts.descriptions.split('\n').join('<br>')}</p>
                            </div>
                            <button class="more-btn" id="open${sortPosts.pk}">Подробнее</button>
                        </div>
                    </div>
                    <div class="overlay2" id="myOverlayopen${sortPosts.pk}">
                        <div class="popup2">
                            <div class="photo-post">
                                <img src="${sortPosts.img}" alt="" width="100%" height="100%"
                                     style=" object-fit: cover;">
                            </div>
                            <h1 class="title-post">ОПИСАНИЕ</h1>
                            <div class="description" id="description${sortPosts.pk}">
                                <p>${sortPosts.descriptions}</p>
                            </div>
                            <form action="/like/" method="post" class="like-form form-like" id="l${sortPosts.pk}">
                               <input type='hidden' name='csrfmiddlewaretoken' value='${context_var}' />
 
                                <input type="hidden" name="post_id" value="${sortPosts.pk}">
                                <button class="ui button positive like-btn${sortPosts.pk}" id="btnlike${sortPosts.pk}"
                                        type="submit"><p
                                        {% if posts|color:user %}
                                        style="color: red;"
                                        {% endif %}
                                        class="like-img"
                                        id="like-img${sortPosts.pk}">
                                    ❤ ${sortPosts.like}</p></button>
                            </form>
                        </div>
                    </div>
                      
                  
                    `
                })
                sort = true;
            } else {
                const all_posts = res_post.a
                sortPost.innerHTML = ""
                sortPost.style.display = 'none'
                all_posts.forEach(allPosts => {
                    mainContent.innerHTML += `
                        <div class="photo">
                            <img class="zoom" src="${allPosts.img}" alt="" width="300px" height="380px"
                                 style="border-radius: 30px;">
                                <div class="button2 content fade">
                                    <p>Описание:</p>
                                    <div class="description-post" id="description-post-id">
                                        <p class="p-desc">${allPosts.descriptions.split('\n').join('<br>')}</p>
                                    </div>
                                    <button class="more-btn" id="open${allPosts.pk}">Подробнее</button>
                                </div>
                        </div>
                    <div class="overlay2" id="myOverlayopen${allPosts.pk}">
                        <div class="popup2">
                            <div class="photo-post">
                                <img src="${allPosts.img}" alt="" width="100%" height="100%"
                                     style=" object-fit: cover;">
                            </div>
                            <h1 class="title-post">ОПИСАНИЕ</h1>
                            <div class="description" id="description${allPosts.pk}">
                                <p>${allPosts.descriptions}</p>
                            </div>
                            <form action="{% url 'like' %}" method="post" class="like-form form-like"
                                  id="e${allPosts.pk}">
                                   <input type='hidden' name='csrfmiddlewaretoken' value='${context_var}' />
                                <input type="hidden" name="post_id" value="${allPosts.pk}">
                                    <button class="ui button positive like-btn${allPosts.pk}"
                                            id="btnlike${allPosts.pk}"
                                            type="submit"><p style="color: red" class="like-img" id="like-img${allPosts.pk}">❤ ${allPosts.like}</p></button>
                            </form>
                        </div>
                    </div>
 
                    `
                })
                sort = false;
                }
                },
 
                error: function (xhr, errmsg, err)
                    {
                        console.log("error"); // provide a bit more info about the error to the console
                    }
                });
                });

Вот код ajax лайка

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
45
$('.like-form').submit(function (e) {
    e.preventDefault()
    var post_id_not_slice =  $(this).attr('id')
    const post_id =  post_id_not_slice.slice(1)
    const url = $(this).attr('action')
    let res;
    const like = $(`.like-btn${post_id}`).text()
    const intLike = like
    const trimCount = parseInt(intLike)
    const btnlike = document.querySelectorAll('#btnlike' + post_id)
 
    const like_img = document.getElementById('like-img' + post_id)
    $.ajax({
        type: 'POST',
        url: url,
        data: {
            csrfmiddlewaretoken: $('input[name=csrfmiddlewaretoken]').val(),
            'post_id': post_id,
        },
        success: function (response) {
            value = response.likes
            btnlike.forEach(button => {
                button.innerHTML = `
            <p class="like-img" id="like-img${post_id}">❤ ${value}</p>
            `
            })
 
            if (response.like_value == 'Like') {
                btnlike.forEach(button => {button.style.color = 'black'})
 
 
            } else {
                btnlike.forEach(button => {button.style.color = 'red'})
 
 
            }
 
 
        },
        error: function (xhr, errmsg, err) {
            console.log("error");
        }
    })
 
})

Вот views в которой происходит процесс лайков

Python
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
def like(request):
    user = request.user
    if request.method == 'POST':
        post_id = request.POST.get('post_id')
        post_obj = Posts.objects.get(id=post_id)
        if user in post_obj.liked.all():
            like = 'Like'
            post_obj.liked.remove(user)
        else:
            like = 'Unlike'
            post_obj.liked.add(user)
        data = {
            'like_value': like,
            'likes': post_obj.liked.all().count()
        }
        return JsonResponse(data, safe=False)

Если нажать на кнопку лайка после сортировки то он просто открывает новую страницу, куда передаёт нужные данные, но ajax запрос не выполняется

@Lekks · 16.06.2022, 11:19

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

<form action="/like/"

Раз у тебя в форме указан в action урл - то он по урлу и идет.

http://htmlbook.ru/html/form/action

@Santikas · 16.06.2022, 11:28 **[ТС]**

да, оно переходит на url like в котором view с лайком, но почему-то оно не хочет считать это ajax

@Lekks · 16.06.2022, 11:29

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

оно переходит на url like

Ну потому что переходит на урл, а не запускает обработчик. Почитай по ссылке то ))

Новые блоги и статьи Все статьи Все блоги /
моя боль iceja 24.01.2026 Выложила интерполяцию кубическими сплайнами www. iceja. net REST сервисы временно не работают, только через Web. Написала за 56 рабочих часов этот сайт с нуля. При помощи perplexity. ai PRO , при. . .	Модель сукцессии микоризы anaschu 24.01.2026 Решили писать научную статью с неким РОманом	http://iceja.net/ математические сервисы iceja 20.01.2026 Обновила свой сайт http:/ / iceja. net/ , приделала Fast Fourier Transform экстраполяцию сигналов. Однако предсказывает далеко не каждый сигнал (см ограничения http:/ / iceja. net/ fourier/ docs ). Также. . .	http://iceja.net/ сервер решения полиномов iceja 18.01.2026 Выкатила http:/ / iceja. net/ сервер решения полиномов (находит действительные корни полиномов методом Штурма). На сайте документация по API, но скажу прямо VPS слабенький и 200 000 полиномов. . .
Расчёт переходных процессов в цепи постоянного тока igorrr37 16.01.2026 / * Дана цепь(не выше 3-го порядка) постоянного тока с элементами R, L, C, k(ключ), U, E, J. Программа находит переходные токи и напряжения на элементах схемы классическим методом(1 и 2 з-ны. . .	Восстановить юзерскрипты Greasemonkey из бэкапа браузера damix 15.01.2026 Если восстановить из бэкапа профиль Firefox после переустановки винды, то список юзерскриптов в Greasemonkey будет пустым. Но восстановить их можно так. Для этого понадобится консольная утилита. . .	Сукцессия микоризы: основная теория в виде двух уравнений. anaschu 11.01.2026 https:/ / rutube. ru/ video/ 7a537f578d808e67a3c6fd818a44a5c4/	WordPad для Windows 11 Jel 10.01.2026 WordPad для Windows 11 — это приложение, которое восстанавливает классический текстовый редактор WordPad в операционной системе Windows 11. После того как Microsoft исключила WordPad из. . .

@Santikas 0 / 0 / 0 Регистрация: 24.02.2020 Сообщений: 15
	16.06.2022, 11:28 [ТС]
	да, оно переходит на url like в котором view с лайком, но почему-то оно не хочет считать это ajax 0