How to get the data attribute of clicked a href tag using jquery

Question

I have problem passing the id to the api url of ajax, there is no response to my success function when I click the a href tag.

So first I need to fetch all the Albums, And It's already done and fetched well. so the codes is this.

Function Getting All the Albums:

    $(document).ready(function(){
    $.ajax({
        url:'http://localhost:8000/api/peoplegallery',
        dataType: "json",
        contentType: "application/json",
        success:function(response) {



            var peoplegallery = response[0].gallery_table;
            $.each(peoplegallery, function (index, el) {

                var stringify_list_gallery = jQuery.parseJSON(JSON.stringify(el));
                var gallery_file = stringify_list_gallery['file'];
                var people_gallery_image = '<img src=/storage/' + gallery_file + ' class="d-block w-100">';
                var gallery_id = stringify_list_gallery['content_id'];
                var gallery_content_title = stringify_list_gallery['content_title'];
                var gallery_event_dated = stringify_list_gallery['event_dated'];

                var peoplegallery_data;

                peoplegallery_data = 
                '<div class="col-md-4">\
                    <div class="card" style="margin-left:20px;">\
                        <img class="card-img-top" src="/storage/'+gallery_file+'" alt="Card image cap" style="height:200px;">\
                        <div class="card-body">\
                             <h5 class="card-tilte">\
                                <a href="/peoplegallery_album/'+gallery_id+'" class="clicked_albums" data-id='+gallery_id+' style="color:black; font-weight: 500;">'+gallery_content_title+'</a>\
                             </h5>\
                        </div>\
                        <div class="card-footer">\
                            <small class="text-muted"><i class="icon ion-md-calendar" style="font-size:15px; color:#800000;"></i><i class="far fa-calendar-check"></i> '+gallery_event_dated+'</small>\
                        </div>\
                    </div>\
                    <br><br>\
                </div>\
                ';

                $('#list_peoplegallery').append(peoplegallery_data);

            });


        },
        error:function(response) {
            console.log(response);
        }
    });
});

So the output look likes this, I will give example

If I click that I want to get all the images inside of that album, so I created a function to get all the images but the problem is I can't get the ID.

Function to get the specific images to the album.

    $(document).ready(function(){   
    $(document).on('click','.clicked_albums',function() {
        var album_id= $(this).data('id');
        $.ajax({
            url:'http://localhost:8000/api/peoplegallery_album/'+ album_id,
            dataType: "json",
            contentType: "application/json",
            success:function(response) {
                console.log(response);
            },
            error:function(response) {
                console.log(response);
            }
        });
    }); 
});

So i give remedy to validate if the value is returning i use preventDefault it works, but when my browser go to the second page. the Id is refreshing.. that's why i can't get the response, so how it will solved.?

e.preventDefault();

`'+gallery_content_title+'` Is this code inserted into DOM by javascript or already in Html DOM? — Haresh Vidja, Feb 07 '19 at 07:17
try adding `data: {id : ID}`, look at https://stackoverflow.com/questions/6085649/how-to-send-multiple-data-fields-via-ajax — Carsten Løvbo Andersen, Feb 07 '19 at 07:17
@CarstenLøvboAndersen i add data: {id : ID} but nothing happens — DevGe, Feb 07 '19 at 07:19
How many elements have this ID? If its more then one that could be your problem. In that case I'd use a class selector instead, its not advisable to reuse ID's. — Sitethief, Feb 07 '19 at 07:21
@Sitethief yes ID is unique,, either i use class nothing happens — DevGe, Feb 07 '19 at 07:24

score 0 · Answer 1 · answered Feb 07 '19 at 07:16

0

To get the contents of the attribute data-attr-gallery-id you have to use

$(this).attr("data-attr-gallery-id")

or .data() (if you use newer jQuery >= 1.4.3)

$(this).data("attr-gallery-id")

answered Feb 07 '19 at 07:16

Ravi Gaudani

186
2
14

The problem is not getting the id – Carsten Løvbo Andersen Feb 07 '19 at 07:17

Haresh Vidja · Answer 2 · 2019-02-07T08:51:42.620

If your code is inserted into DOM dynamically by JAvascript then you have to correct code as mentioned below

<a href="/peoplegallery_album/'+gallery_id+'" class="clicked_albums" data-id='+gallery_id+' style="color:black; font-weight: 500;">'+gallery_content_title+'</a>

Because you have bind click event by id. By ID it binds event on the first element which is matched with id. So instead of using id, you have to use class for a bind click event on multiple elements.

Your JS code should be

$(document).ready(function(){   
    $(document).on('click','.clicked_albums',function() {
        var album_id= $(this).data('id');
        $.ajax({
            url:'http://localhost:8000/api/peoplegallery_album/'+ album_id,
            dataType: "json",
            contentType: "application/json",
            success:function(response) {
                console.log(response);
            },
            error:function(response) {
                console.log(response);
            }
        });
    }); 
});

I also see that on server side PHP code function there is one mistake I can see about the return value. It is returning value from where you have called the function not given as output.

public function peoplegallery_album($id)
{
    $url_id = $id;
    $get_image = DB::select('SELECT cid,image,created_at FROM album_category WHERE cid = ?',[$url_id]);
    echo $url_id;
    die();
    return $url_id;
}

Hi @Haresh Vidja nothing happens.. no response on my success function — DevGe, Feb 07 '19 at 07:48
where I already this var album_id= $(this).data('id'); there is no value prompt — DevGe, Feb 07 '19 at 08:33
@DevGe check now, I can see one little mistake on your PHP code. — Haresh Vidja, Feb 07 '19 at 08:52
Hi Varesh i will revise my codes,, i will show from the start my codes — DevGe, Feb 07 '19 at 08:56

How to get the data attribute of clicked a href tag using jquery

2 Answers2