Как сделать ajax с data атрибутами?

Question

[L1MO]

Имеется такой код:

html:

<button id="button" data-target=".testContainer" data-click="ajaxLoad">Update list</button>

<div id="result" class="testContainer">
    <article>
        <h1>
            first article
        </h1>
    </article>

    <article>
        <h1>
            second article
        </h1>
    </article>
</div>

js:

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
    $(function(){
        $('#button').click(function(){
            $.ajax({
                type: "POST",
                url: 'index.html',
                success: function(data) {
                    $('#result').html(data);
                }
            });
        });
    });
</script>

Как сделать так, чтобы ajax происходил только внутри где указан data-target, т.е обновление происходило только внутри этого див, а также чтобы ajax срабатывал только в том случае, если у него указан data-click = ajax load?

В данный момент он подгружает контент в #result, а нужно чтобы он брал этот result из data-target в кнопке

А также оно #button тоже указано руками, а нужно из data-click

Я в jquery не силён вообще, но очень хочется реализовать это для своего сайта.

Answer 1

[Виталий Першин]

<script>
    $(function(){
        $('[data-click="ajaxLoad"]').click(function(){
            const target = $(this).attr('data-target');
            $.ajax({
                type: "POST",
                url: 'index.html',
                success: function(data) {
                    $(target).html(data);
                }
            });
        });
    });
</script>

Comments

[L1MO]

Огромное спасибо, сам не додумался вместо класса использовать data элемент, сидел костыли, ещё раз спасибо!

Но вы случаем не знаете из-за чего происходит дублирование кнопки внутрь testContainer?
Я хочу обновлять контент внутри самого контейнера, но не добавлять в него кнопку обновления, помогите, пожалуйста.

[Виталий Першин]

L1MO, Полагаю если вы обращаетесь к той же странице на которой находитесь, вы парсите весь html и его вставляете судя по коду.

[L1MO]

Виталий Першин, Да, но как тогда это реализовать? Я подсмотрел это в одном движке и там есть шаблоны для страниц, при этом контент находится на той же странице, что и кнопка обновления.

[Виталий Першин]

L1MO, Я не понимаю зачем вы вообще это делаете, но вам нужно найти нужный узел из документа и вставлять его, когда-то имел дело с чем-то подобным, но сейчас не вспомню к сожалению

[Виталий Першин]

L1MO,

Если у вас в data лежит html, то полагаю можно просто сделать что-то вроде этого:
$(target).html($(data).find('#result').html());

[L1MO]

Виталий Першин, Увы, нет, не срабатывает данное решение, блок не обновляется, в консоли пусто

[L1MO]

Виталий Першин, Оно возвращает [object Object]

[Виталий Першин]

L1MO, Что у вас вообще в data? Попробуйте $.parseHTML(data)

[L1MO]

Виталий Першин,

[L1MO]

Решил эту проблему так:

$(target).html(
 $(data).filter(target).html()
).html();

Answer 2

[Web Dentist]

$(function(){
        $('#button').click(function(e){
           let targetClass = $(e.target).data('target')
            $.ajax({
                type: "POST",
                url: 'index.html',
                success: function(data) {
                    $(targetClass).html(data);
                }
            });
        });
    });