@L1MO

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

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

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 не силён вообще, но очень хочется реализовать это для своего сайта.
  • Вопрос задан
  • 81 просмотр
Решения вопроса 1
Get-Web
@Get-Web Куратор тега JavaScript
Front-End Developer
<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>
Ответ написан
Пригласить эксперта
Ответы на вопрос 1
kgb_zor
@kgb_zor
I need your traceback.
$(function(){
        $('#button').click(function(e){
           let targetClass = $(e.target).data('target')
            $.ajax({
                type: "POST",
                url: 'index.html',
                success: function(data) {
                    $(targetClass).html(data);
                }
            });
        });
    });
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы