title: Ajax & JS: how to keep a dropdown open during an ajax refresh
body: <p>I have a chat in a web page having its components refreshed in ajax.
  I have a userlist and when clicking on the name of a user, a number of actions appear in a drop down.</p>
  <p>but, when the userlist is being refreshed in ajax, it automatically closes the drop down. Giving only 1.5s max to the user to click on the action .... not ideal.</p>
  <p>So, i am looking for a way for the dropdown menu to stay open, even if a refresh occurs.</p>
  <p>html:</p>
  <pre><code>
              &lt;div class=&quot;col-md-3 mobile_phone pr-0 mt-1 pl-0 border border-dark&quot;&gt;
                      &lt;nav class=&quot;container room_display  p-0&quot;  id=&quot;roominfo&quot;&gt;
                            &lt;!--ajax refresh here--&gt;
                      &lt;/nav&gt;
                  &lt;/div&gt;
  </code></pre>
  <p>Ajax:</p>
  <pre><code>setInterval(function(){displayUsers();},1500);
  
  function displayUsers()
      {
          $.post('core/chat_logic.php?action=roomAndUsers',function(response)
          {
              $('.room_display').html(response);
          });
      }
  </code></pre>
  <p>php &quot;action=roomAndUsers&quot;</p>
  <pre><code>case 'roomAndUsers':
          
  
      $roomNusers=unserialize(file_get_contents (&quot;../cache_useronline.txt&quot;));
      foreach($roomNusers as $room =&gt; $value)
      {
          ?&gt;
              &lt;div class=&quot;room&quot;&gt;
                  &lt;input type=&quot;checkbox&quot; id=&quot;&lt;?php echo $room;?&gt;&quot; checked&gt;
                  &lt;label for=&quot;&lt;?php echo $room;?&gt;&quot; class=&quot;m-0&quot;&gt;&lt;?php echo $room;?&gt;&lt;/label&gt;
                  &lt;div class=&quot;user_list&quot;&gt;
                      &lt;ul class=&quot;userul list-unstyled&quot;&gt;
                          &lt;!-- user list room--&gt;
                          &lt;?php 
                          foreach($roomNusers[$room]['users'] as $user_name)
                          {
                              ?&gt;
                              &lt;li class=&quot;dropdown&quot;&gt;
                                  &lt;button class=&quot;btn text-white p-0  dropdown-toggle&quot; type=&quot;button&quot; id=&quot;dropdownMenuButton&quot; data-toggle=&quot;dropdown&quot; aria-haspopup=&quot;true&quot; aria-expanded=&quot;false&quot;&gt;
                                  &lt;img src=&quot;smiles/16x16/&lt;?php echo $user_name['0'];?&gt;&quot; class=&quot;img li pr-2&quot; alt=&quot;quixote&quot;&gt;&lt;?php echo $user_name['1'];?&gt; &lt;?php echo $user_name['2'];?&gt;
                                  &lt;/button&gt;
                                  &lt;div class=&quot;dropdown-menu&quot; aria-labelledby=&quot;dropdownMenuButton&quot;&gt;
                                  &lt;button class=&quot;btn text-white py-0 px-2 d-block&quot;&gt;Private Message&lt;/button&gt; 
                                  &lt;button class=&quot;btn text-white py-0 px-2 d-block&quot;&gt;Invite&lt;/button&gt;
                                  &lt;button class=&quot;btn text-white py-0 px-2 d-block&quot;&gt;Ignore&lt;/button&gt;
                                  &lt;button class=&quot;btn text-white py-0 px-2 d-block&quot;&gt;Profile&lt;/button&gt;
                                  &lt;/div&gt;
                              &lt;/li&gt;
                          &lt;?php
                          }
                      ?&gt;
                  &lt;/ul&gt;
              &lt;/div&gt;
          &lt;/div&gt;
          &lt;?php      
                  }
          
  break;
  </code></pre>
  <p>Thank you in advance for any help</p>