Search code examples
javascripthtmljquerybootstrap-4fetch

I have to click twice on the button the see my dropdown list. How to resolve?

In the following example below, I have to click twice on the "Action" button the see my dropdown list. Why? Is it possible to resolve?

$(document).ready(function() {
  $(".actionButton").click(function() {
    $dropdown = $("#contextMenu");
    $(this).after($dropdown);
    $(this).dropdown();
  });
});
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>

<table class="table table-hover">
  <tr>
    <td> Line 1 </td>
    <td class="dropdown"><a class="btn btn-default actionButton" data-toggle="dropdown" href="#"> Action </a> </td>
  </tr>
</table>

<ul id="contextMenu" class="dropdown-menu" role="menu">
  <li><a tabindex="-1" href="#" class="payLink" value="App">App</a></li>
  <li><a tabindex="-1" href="#" class="payLink" value="Send">Send</a></li>
</ul>

Additional client-side logic. I upload this html on my server-side and then send it back as a response.

document.querySelector("#app").innerHTML = await view.getHtml();

    async getHtml() {
    let response = await fetch('/list', {
    method: 'POST', 
           headers: {
            "Content-Type": "text/plain"
        },
    body: JSON.stringify({ x: 5, y: 6 }),
    headers: {
      'Content-Type': 'application/json'
    }
  }).then(response => response.json());
  
   if (response.ok) {
     return response.data;  // the html above
    } else {
        throw new Error(`${response.status}: ${response.statusText}`);
    }}
Solution

  • What I understood so far, I think of two possible methods to get it around.

    First method:

    I suggest, you load following HTML code sample in your #app Element from ajax. In this way, you do not need to use onclick event on $(".actionButton") for this. Because according to bootstrap3 documentation, you do not need set any onlclick event for loading the dropdown, it'll be done by bootstrap3 itself.

    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">

<table class="table table-hover">
  <tr>
    <td> Line 1 </td>
    <td class="dropdown-td">
      <div class="btn-group">
        <button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          Action <span class="caret"></span>
        </button>
        <ul id="contextMenu" class="dropdown-menu" role="menu">
          <li><a href="#" class="payLink" value="App">App</a></li>
          <li><a href="#" class="payLink" value="Send">Send</a></li>
        </ul>
      </div>
    </td>
  </tr>
</table>



<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>

    Second method:

    If above way do not work, then you have to add bootstrap.min.css to <head> tag and jquery.min.js, bootstrap.min.js at end of the <body> tag in the main html file where #app element resides in.

    Then you would have to get the only barebone html from ajax and insert it into #app.

    The barebone html code can be like below:

    <table class="table table-hover">
  <tr>
    <td> Line 1 </td>
    <td class="dropdown"><a class="btn btn-default actionButton" data-toggle="dropdown" href="#"> Action </a> </td>
  </tr>
</table>

<ul id="contextMenu" class="dropdown-menu" role="menu">
  <li><a tabindex="-1" href="#" class="payLink" value="App">App</a></li>
  <li><a tabindex="-1" href="#" class="payLink" value="Send">Send</a></li>
</ul>

    And in this case, your js code for onclick event should be like below:

    $(document).ready(function() {
  $("#app").on("click", ".actionButton", function() {
    $dropdown = $("#contextMenu");
    $(this).after($dropdown);
    $(this).dropdown();
  });
});