Take dynamically loaded element attribute without event click

Asked

Viewed 585 times

1

During page loading I take data from BD and create a list as below.

function chatContactList()  {
    $.post('src/inc/chat/', { DataProcess:'chatContactListShow' }, function(data){
        switch(data.status) {
            case 'error':
                sNoty(data.message, null, 'error', null);   
                break;
            case 'noHasList':
                return false;
                break;
            case 'hasList': 
                var content = ''
                $.each(data.chatOBJ, function(index, value){
                    content += '<li>';
                    content += '    <a href="#" data-process-id="'+value.pr_id+'" id="chatByContact" class="chatByContact">'+value.userName+'<i class="fa fa-comments"></i></a>';                   
                    content += '</li>';
                });
                $("#ulSidebarMenuContact").html(content);   
                break;
            case 'logOut': 
            case 'reload':  
                window.location.reload();
                break;      
        }           
    }, 'json');         
};

After loading the data and creating the list, I need to take the data-process-id attribute, no event click, and do constant updating, but I don’t get any attributes.

function updateMessageNotRead()
{   
    var prIdArray = new Array();

    $('a[id="chatByContact"]').each(function()  { 
        prIdArray.push($(this).attr('data-process-id'));
    }); 

    ...
}

How to get this attribute created automatically and without delegating to event as click?

jquery

  • this function has to be executed within the return function that creates the list

  • Problem is that I need to update periodically if there is message regarding this contact using the information from li

  • and how do you intend to do this periodic update? setInterval?

  • Set with setinterval

  • But it will be in the same scheme, will run the setInterval on the return of the function

  • I have 2 functions, the first that generates the chat contact list, when the function receives the JSON, generates the li.. You say that when you finish generating the read I call the function to update the messages?

  • Let’s go continue this discussion in chat.

  • 1

    Wees, I just called the function to check the message, and set the setinterval, and it worked successfully.

Show 3 more comments

1 answer

1

My first suggestion would be to use class on these elements that you want to take instead of id. In most of my projects when I have a dynamic list and need to perform some action in them we use specific class in the elements.

As I understood after loading the html page you want to take the separate attribute of each generated element dynamically to perform some task, in the attached example I put only a console.log to show the attribute value.

I’ll give you an example using a check-box sequence that would be generated.

$( document ).ready(function() {
    getElements();
});
function getElements() {
    var prIdArray = new Array();
  $( ".elementoData" ).each(function() {
    var DataValue = $(this).attr("data-process-id");
    prIdArray.push(DataValue);
  });
  console.log("Array criado : ");
  console.log(prIdArray);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
   <body>
      <ol>
         <li>
            <a href="#" class="elementoData" data-process-id="01" id="chatByContact" class="chatByContact">Igor 1<i class="fa fa-comments"></i></a>';
         </li>
         <li> <a href="#" class="elementoData" data-process-id="97" id="chatByContact" class="chatByContact">Igor<i class="fa fa-comments"></i></a>';</li>
         <li> <a class="elementoData" href="#" data-process-id="98" id="chatByContact" class="chatByContact">Pedro<i class="fa fa-comments"></i></a>';</li>
         <li><a class="elementoData" href="#" data-process-id="99" id="chatByContact" class="chatByContact">henrique<i class="fa fa-comments"></i></a>';</li>
      </ol>
   </body>
</html>

  • For free I put a class and changed the function, but still not getting the attributes. Create the li with static and the updateMessageNotRead function returns the attributes. When we use an event, it is easy to delegate something like '$('. div-content'). on('click', '.elementData', Function(Event) { '.. I am looking to see if there is a way to delegate without event.

  • Could you please post an example of your html ?

  • I edited the question and insert the Jquery where I insert the li in the ul that already existed in the DOM

  • I edited my code example to consider the <a> and <li> elements as their code generates. I was able to get the attributes the same way.When your document is finished being generated you call the function to get these attributes

  • Igor.. I just called the function to check the message, and set the setinterval, and it worked successfully.

Browser other questions tagged jquery

You are not signed in. Login or sign up in order to post.