Javascript Issue with aria-hidden popup

Question

I have this ajax code that gets a res.json(event) from the server and then creates an object based on the value received.

Here is part of that code:

 html += `` +
`${data[i].events.targetReminder} | ${data[i].events.targetAmPM}   Mark as Completed
  Delete Event   ` +
`${data[i].events.title}` +
`   ` + 
`${data[i].events.caption}
${data[i].events.location}`;

And here is the output of the code:

The aria-hidden that I'm talking about is this one

What I have tried and already know it's not a proper solution is here

Code test

I created a script that change aria-hidden => true or false but I don't know how to link it with my box

another failed try:

I also added in the HTML this function onClick="reply_click()" but nothing is happening. I only get the alert('this function is called')

Could you suggest me an idea, please?

user_12348877 · Answer

could this be your problem ? you create an item dynamically with javascript, but the item you want to select, click event, is not actually created at that time. Once the item you want to export is created, you can select it and want to make the changes you want.

udpated: I added a snippet of what I meant. in order for me to select the H1 tag that occurs after I click on the button, I have to write a function that will occur after it occurs.

const button = document.querySelector(".clickme");
      const container = document.querySelector(".container");

      button.addEventListener("click", () => {
        container.innerHTML +=  `
         ı cant select this
         `
      })

        const changeModal = document.querySelector(".change-modal")
        console.log(changeModal)

 

    
    

    ı select this

updated2 :

for (let i = 0; i < data.length; i++) {

      html += // your html

      $("eventCard").append(html);

    //after this, you can select the item and type the function because the items are created here.      

    }

Updated 3!!! : I explained how to do things with javascript without using jquery. Hopefully you know what I mean.

async getData() { // fetch operations using javascript
        const data = await fetch(url); // your api url
        const jsonToData = await data.json(); // here you can Request api and obtain the data
        return jsonToData;
    }

    getData().then((data) => {
        console.log(data) // ıts probably an array. 
        for (let data = 0; data < jsonToData.length; data++) {
            // data operations, what if you want to 
            html += // you printed document items,
        }
    })
    .then(() => {
        //!!! IMPORTANT!!!  this is where you need to perform the operation of selecting the element function.    you can also write a function that can work for the code here, but I've written it one by one for now.
       const clickedElement =  //type whatever element you want to click on. !!
        clickedElement.addEventListener("click", function() {
            const elementToChange = document.getElementById(".public-event");
            elementToChange.setAttribute('aria-hidden', 'false');
        })
    })
    .catch(err => console.log(err))

user_10594904 · Answer

By looking at your question and discussion on the comment section I think that you are trying to add click event on your dynamically generated div section(html part) and open the pop up modal. We can achieve that by using $('#id' OR '.class').modal('show') in jquery. So why don't you add a class any where inside your div section of html and bind a click function using jquery. Suppose you have added a class name showModal on the very first div after card-header like, div="card-header showModal"

        $('#eventCard').on('click', '.showModal', function(){
                  $('#public-event').modal('show');
           });

We cannot directly use $('.showModal').click...... because document structure is change after appending the html section after #eventCard which was initially was not present. Hpe this works.

        $('#eventCard').on('click', '.showModal', function(){
                  $('#public-event').modal('show');
           });

We cannot directly use $('.showModal').click...... because document structure is change after appending the html section after #eventCard which was initially was not present. Hpe this works.

Javascript Issue with aria-hidden popup

2 Answers