CODEWITHSUNDEEP
javascriptjqueryhtmlcssflask
user6004404
user6004404

Reputation:

Clicking on button without refreshing the whole page

I'm using the Flask framework to make an information retrieval system.

I'm trying to have a div pop up when I click on a name. Right now I'm looping through a list of names and outputting them next to each other as buttons. But, when I click on a button, I want a div to dropdown from that button. However, every time I click on the button, it refreshes the page and removes all my outputted names. Right now myDiv function is not even being called. How can I get the div to appear below the button I press without removing all the other output?

// actions.js
function myDiv(name) {
    var x = document.getElementById(tag);
    if (x.style.display === "none") {
        x.style.display = "block";
    } else {
        x.style.display = "none";
    }
}
<form class="form-inline" action="">
  {% if output %}
  <h2>Top names to use</h2>
    {% for name in output %}
    <div class="output-container">
      <button onclick="myDiv({{name}})" id={{name}} class="btn btn-info">{{name}}</button>
     </div>
    {% endfor %}
  {% endif %}
</form>
<script type="text/javascript" src="/static/js/actions.js"></script>

Upvotes: 1

Views: 92

Answers (3)

Zahurafzal Mirza
Zahurafzal Mirza

Reputation: 288

Use JQuery bro. If you want to learn more about Jquery here - https://jquery.com/

And the solution via Jquery is quite simple.

$("#your_button_id").click(function(){

   $("#your_div_id").hide(); 
   $("#your_div_id").show();  

   /*Whatever you want to do you can do here.*/
})

Hope it was helpful.

Upvotes: 0

Kiran Shahi
Kiran Shahi

Reputation: 7980

button type of your button need to be set button

// action.js
function myDiv(name) {
    var x = document.getElementById(tag);
    if (x.style.display === "none") {
        x.style.display = "block";
    } else {
        x.style.display = "none";
    }
}
<form class="form-inline" action="">
  {% if output %}
  <h2>Top names to use</h2>
    {% for name in output %}
    <div class="output-container">
      <button type="button" onclick="myDiv({{name}})" id={{name}} class="btn btn-info">{{name}}</button>
     </div>
    {% endfor %}
  {% endif %}
</form>
<script type="text/javascript" src="/static/js/actions.js"></script>

Upvotes: 0

Mamun
Mamun

Reputation: 68943

By default the type of a button is submit. You have to change that to button implicitly:

<button type="button" onclick="myDiv({{name}})" id={{name}} class="btn btn-info">{{name}}</button>

Upvotes: 1

Related Questions