I would like to get useful link at the end with jquery

Question

At the end would like to get this: mondaysoupcall.html and call into another div.

This is the target div: <div class="description"></div>

This is the label where I want to click and read "data-id" <--(I dont know why this is my idea) I'm newbie <label for="sel1" id="mondaysoupcall" data-id="mondaysoupcall">Soup</label>

and this is my part of the jquery code. I can get attributes easily but calling back or convert to text is quiet difficult to me. (I am still newbie).

var dab = $(this).attr('data-id');
$('label').click(function(){
    alert( $(this).attr('dataid'));
    $(".description").load(dab+'.html');
});

The alert window is comes up if i click on the label. And the consol log says: http://localhost/wichkitchen/undefined.html 404 (Not Found). Undefined because of my variable is still attrinbute not text. So somewhat I would like to call in the little html into the "description" div. The name should be in the label tag, no anchor. Any solution I am interested in jquery. Thank you guys.

console log about link allert window calling attribute.

Answer 1

I think you are calling your data attribute wrong.

$('label').on('click', (e) => {
    let dataId = $(this).attr('data-id') + '.html';
    // alternative let dataId = $(this).data('id') + '.html';
    $('.description').load(dataId, () => {
        alert('Data loaded!');
    })
});