using jQuery for buttons/ajax requests

Question

I am fairly new to jQuery, and even though there are a lot of tutorials on how to bind to buttons, I believe my set up is a little more complicated (beyond the scope).

What I have:

-I am using Django to populate my Makes on a view.

Here is my template:

    <div class="container">
    <div class="row">
    <div class="btn-group" id="makesTable">
    {%  if makes %}
    {% for make in makes %}
    <button  type="button" name="button" class="btn btn-default" id="{{ make.id }}">
        <br />
        <img class="center-block" src="[REDACTED]"  />
        <br />
        <p>{{ make.name }}</p>
    </button>
    {% endfor %}
{% endif %}
</div>
</div>
</div>

I am currently having an issue with responsive design. I would like for the buttons to be arranged in a 5x7 grid, however, sometimes, I get the following issue:

This is how it looks when everything is good!

This is the problem. Notice the spacing with a ?

The Workflow:

• User sees (35) different buttons to select from. As you can see name, and id are unique, where id is the Primary Key from the database (this is obviously important)

• I can capture the primary key using jQuery using this function:

  $(document).ready(function() {
    $("button").click(function() {
      var make_id = $(this).attr('id')
     });
  });
  

• At the same time, jQuery is going to hide/remove the button elements (trivial)
  This is done with the following code snippet (anf adding fadeout to the click listener:

  function fadeOut() { $( "#makesTable" ).fadeOut( "slow", function() {}); };  
  

• Then I would like to use the id from button clicked to do an AJAX request to my API, where django URL routing is:

  url(r'^makes/(?P<pk>[\d]+)/$', views.MakesDetail.as_view(), name='makes-instance'),  
  

  in other words, the AJAX request goes to mysite.com/api/makes/(this.id) and returns a JSON file (already set-up thanks to DRF.)

Sample Response:

{
"name": "BMW",
"model": [
    {
        "name": "2 Series",
    },
    {
        "name": "3 Series",
    }]
 }

• Finally, using this API response, I wish to populate a similar template of buttons (replacing makes with models.)

This is for a single page app in a sense where no page refresh is necessary with the use of JSON and AJAX.

Full disclosure: I am an entry level programmer/web developer.

code snippet:

<div class="main-content container-fluid"> 
 <div class="container">
   <div class="row">
     <div class="btn-group" id="makesTable">
        <button  type="button" name="button" class="btn btn-default" id="200002038">
        <br />
        <img class="center-block" src=" "  />
        <br />
        <p>Acura</p>
    </button>

    <button  type="button" name="button" class="btn btn-default" id="200464140">
        <br />
        <img class="center-block" src=""  />
        <br />
        <p>Alfa Romero</p>
    </button>

<script>
  $(document).ready(function() {
   $(document).on( "click", "button", function() {
     alert($(this).attr('id')); //testing functionality
    });
 });
</script>
<script src="assets/lib/jquery/jquery.min.js" type="text/javascript"></script>
<script src="assets/lib/perfect-scrollbar/js/perfect-scrollbar.jquery.min.js" type="text/javascript"></script>
<script src="assets/js/main.js" type="text/javascript"></script>
<script src="assets/lib/bootstrap/dist/js/bootstrap.min.js" type="text/javascript"></script>
<script type="text/javascript">
  $(document).ready(function(){
    //initialize the javascript
    App.init();
  });

</script>
</div>
 </div>
  </div>
   </div>

Answer 1

First of all, event association to buttons should be better via classes (it's a better practice).For the javascript click code check the other answers. For ajax requests, you can refer to this links:

https://api.jquery.com/jquery.post/

https://api.jquery.com/jquery.get/

https://api.jquery.com/jquery.when/

By example 'when' function, it allows you to know when request ended and execute any actions after.

Answer 2

from your replied comment I expect that you attach the handler before the button already rendered so I recommend you to use bubbling event concept like this:-

$(document).ready(function() {
   $(document).on( "click", "button", function() {
      alert($(this).attr('id')); //testing functionality
   });
});

and the the alert will pop up and you can do whatever else you want to do.

Answer 3

Since the buttons are dynamically generated. You have to make the handler like this:

$(document).on('click', 'button.btn', function(e) {   
    alert($(this).attr('id')); //testing functionality
});