Discovering the data-id value in an HTML element by clicking it with JavaScript and returning that value through a for loop

Question

Discovering the data-id value in an HTML element by clicking it with JavaScript and returning that value through a for loop

this is my unique html content

       <ul class="dialogs">
            {% if t_dialogs %}
                <li class="grouping">Today</li>
                {% for item in t_dialogs %}
                    <li class="active">
                        <a id="dialogue" class="conversation-link text-[#E8F5FC] my-2" href="{% url 'assistant:continuechat' item.pk %}" data-pk="{{item.pk}}">
                            <i class="fa fa-message fa-regular"></i> {{item.title| truncatewords:04 }}
                        </a>
                        <div class="fade"></div>
                        <div class="edit-buttons">
                            <button><i class="fa fa-edit"></i></button>
                            <button class="trash" data-id = "{{item.pk}}"><i class="fa fa-trash"></i></button>
                        </div>
                    </li>
                {% endfor %}
            {% endif %}
            // the rest of the code remains the same
   </ul>
   </div>

i've been attempting to retrieve the data-pk value when a user clicks on it using JavaScript. However, I encountered issues like 'currentTarget not defined'. I also tried different methods without success. How can I resolve this issue?

this is my custom javascript code

    const dialogLinks = document.querySelectorAll("#dialogue");
    dialogLinks.forEach(link => {
        link.addEventListener("click", getDialogueId);
    });

    function getDialogueId(e){
        var idValue = e.currentTarget.getAttribute('data-pk');
        console.log(idValue);

        if(!dialog_id){
            url = `/previous-dialog/${idValue}/`
        }else{
            url = 'start-dialog/'
        }

        return url;
    }

    $.ajax({
        type: 'POST',
        url: getId(),
        data: {
            message: usermsg,
            dialogId: dialog_id,
            csrfmiddlewaretoken: $('input[name=csrfmiddlewaretoken]').val(),
            action: 'post'
        },
        success: function(json){
            const res = json['results']
            setTimeout(() => {
                hideTyping();
                body.appendChild(messages(res, "assistant"));
                scrollToBottomOfResults();
            }, 1000);
            console.log(json)
        },
        error: function(rs, e){
            setTimeout(() => {
                hideTyping();
                body.appendChild(setBotResponse("bot"));
                scrollToBottomOfResults();
            }, 600);
            console.log(rs.error);
        },
    });

i tried other methods as well but still couldn't achieve my goal. Is there a better approach to accomplish this?

javascript html jquery ajax

Answer 1

Answer №1

Your assumptions are leading you astray in this situation. First off, it is possible to have multiple elements with the same id, but this can cause issues as it will only reference the first occurrence of that id.

Secondly, it seems like you intended for the ajax request to be triggered on click, but the current code structure does not achieve that.

To address these issues, consider structuring your HTML like this:

   button.conversation-button
   button.conversation-button
   button.conversation-button

Then, add an event listener to each element with the class .conversation-button and wrap your ajax call in a function similar to what you already have:

const conversationButtons = document.querySelectorAll(".conversation-button");
conversationButtons.forEach(button => {
    button.addEventListener("click", doStuff);
});


...
function doStuff(e) {
   $.ajax( ...
     url: getUrl(e)
...
}

function getUrl(e) {
  let idValue = e.target.dataset.pk;
  let url = ...;
  ...
  return url; // 
}

This is just a rough outline to guide you in the right direction. Good luck!

Answer 2

Your assumptions are leading you astray in this situation. First off, it is possible to have multiple elements with the same id, but this can cause issues as it will only reference the first occurrence of that id.

Secondly, it seems like you intended for the ajax request to be triggered on click, but the current code structure does not achieve that.

To address these issues, consider structuring your HTML like this:

   button.conversation-button
   button.conversation-button
   button.conversation-button

Then, add an event listener to each element with the class .conversation-button and wrap your ajax call in a function similar to what you already have:

const conversationButtons = document.querySelectorAll(".conversation-button");
conversationButtons.forEach(button => {
    button.addEventListener("click", doStuff);
});


...
function doStuff(e) {
   $.ajax( ...
     url: getUrl(e)
...
}

function getUrl(e) {
  let idValue = e.target.dataset.pk;
  let url = ...;
  ...
  return url; // 
}

This is just a rough outline to guide you in the right direction. Good luck!

Answer 3

Answer №2

It is not recommended to use the same id multiple times on a web page

You can utilize classes instead of ids when using querySelectorAll, such as in place of id="convers"

Include e.preventDefault() function to trigger ajax calls instead of redirecting to hyperlinks

Revise the HTML code below:

<div>
    <ul class="conversations">
        {% if t_ques %}
            <li class="grouping">Today</li>
            {% for item in t_ques %}
                <li class="active">
                    <a class="conversation-button text-[#E8F5FC] my-2" href="{% url 'assistant:continuechat' item.pk %}" data-pk="{{item.pk}}">
                        <i class="fa fa-message fa-regular"></i> {{item.title| truncatewords:04 }}
                    </a>
                    <div class="fade"></div>
                    <div class="edit-buttons">
                        <button><i class="fa fa-edit"></i></button>
                        <button class="trash" data-id = "{{item.pk}}"><i class="fa fa-trash"></i></button>
                    </div>
                </li>
            {% endfor %}
        {% endif %}
        <!-- similar structure for Yesterday, Previous 7 days, and Previous 30 days -->
    </ul>
</div>

Adjust your JavaScript code as follows

const conversationButtons = document.querySelectorAll(".conversation-button");
console.log(conversationButtons);
conversationButtons.forEach(button => {
    button.addEventListener("click", getId);
});
function getId(e){
    e.preventDefault();
    var idValue = e.currentTarget.getAttribute('data-pk');
    console.log(idValue); 
    
    if(!idValue){
        url = `/chat-previous/${idValue}/`
    }else{
        url = 'initiate-chat/'
    }
    console.log(" url ========= ");
    console.log(url);
    return url;
}

Answer 4

It is not recommended to use the same id multiple times on a web page

You can utilize classes instead of ids when using querySelectorAll, such as in place of id="convers"

Include e.preventDefault() function to trigger ajax calls instead of redirecting to hyperlinks

Revise the HTML code below:

<div>
    <ul class="conversations">
        {% if t_ques %}
            <li class="grouping">Today</li>
            {% for item in t_ques %}
                <li class="active">
                    <a class="conversation-button text-[#E8F5FC] my-2" href="{% url 'assistant:continuechat' item.pk %}" data-pk="{{item.pk}}">
                        <i class="fa fa-message fa-regular"></i> {{item.title| truncatewords:04 }}
                    </a>
                    <div class="fade"></div>
                    <div class="edit-buttons">
                        <button><i class="fa fa-edit"></i></button>
                        <button class="trash" data-id = "{{item.pk}}"><i class="fa fa-trash"></i></button>
                    </div>
                </li>
            {% endfor %}
        {% endif %}
        <!-- similar structure for Yesterday, Previous 7 days, and Previous 30 days -->
    </ul>
</div>

Adjust your JavaScript code as follows

const conversationButtons = document.querySelectorAll(".conversation-button");
console.log(conversationButtons);
conversationButtons.forEach(button => {
    button.addEventListener("click", getId);
});
function getId(e){
    e.preventDefault();
    var idValue = e.currentTarget.getAttribute('data-pk');
    console.log(idValue); 
    
    if(!idValue){
        url = `/chat-previous/${idValue}/`
    }else{
        url = 'initiate-chat/'
    }
    console.log(" url ========= ");
    console.log(url);
    return url;
}

Answer 5

Answer №3

Make sure your IDs are unique

If you don't want to use IDs, you can try this approach

Utilize delegation and the button's class instead

It is also important to preventDefault behavior on links

document.querySelector('.chats').addEventListener('click', (e) => {
  let target = e.target.closest('.chat-button');
  if (!target) return;
  e.preventDefault(); // stop link from being followed
  const idValue = target.dataset.pk;
  console.log(idValue); //output corresponding target-id
  const endpoint = chat_id ? 'start-chat/' : `/previous-chats/${idValue}/`;
  $.ajax({
    type: 'POST',
    url: endpoint,
    ......
  });
})

Answer 6

Make sure your IDs are unique

If you don't want to use IDs, you can try this approach

Utilize delegation and the button's class instead

It is also important to preventDefault behavior on links

document.querySelector('.chats').addEventListener('click', (e) => {
  let target = e.target.closest('.chat-button');
  if (!target) return;
  e.preventDefault(); // stop link from being followed
  const idValue = target.dataset.pk;
  console.log(idValue); //output corresponding target-id
  const endpoint = chat_id ? 'start-chat/' : `/previous-chats/${idValue}/`;
  $.ajax({
    type: 'POST',
    url: endpoint,
    ......
  });
})

Discovering the data-id value in an HTML element by clicking it with JavaScript and returning that value through a for loop

Answer №1

Answer №2

Answer №3

Similar questions

A guide on using Material UI - InputLabel in JavaScript

Carousel Pagination: Using Titles Instead of Numbers

Specify the return type based on specific parameter value

Arranging sequence of jQuery functions

Don't initialize each variable within the constructor of a class, find a more efficient approach

Transforming an array of strings to integers within a GraphQL query when they are incorporated

Implement a Selection Feature in Angular

Are there any superior alternatives for Android webviews?

Nested solution object populated with promises

scraping mixed content from an HTML span using Selenium and XPath

Transmitting a sequence of JSON information from php to JavaScript,

Retrieving ng-repeat $index with filtering in AngularJS controller

What is the best way to showcase a user's input in a webpage using vanilla javascript

Please provide the date using the Foundation Datepicker tool

Disable the toggling of the dropdown functionality in the bootstrap function

d3.json is unable to parse a value of 'Infinity

Ways to specify a setter for a current object property in JavaScript

A guide on breaking down the ID passed from the backend into three segments using React JS

Is it possible for a website administrator to view the modifications I have made to the CSS and HTML code?

Guide to triggering React Material-UI modal and filling it with data from an Ajax request when a button is clicked