Send selected radio button id from Datatable to Django URL

Question

I'm looking for a solution to get the value from my radio button and send it to my django url.

When I get selected radio button in the first page of DataTables, it's working properly, However when select radio button from other page (not first page), I can't get the radio button value

HTML

<a href="{% url 'update_maintenance_issue' %}" id="edit">
    <img src="{% static 'images/icons/edit3.png' %}">
</a>

<table id="mytable1">
<thead align="center">
    <tr align="center" style="font-weight:bold">
        <th style="cursor:pointer" align="center">No</th>
        <th style="cursor:pointer" align="center">ID</th>
        <th style="cursor:pointer" align="center">Type</th>
        <th style="cursor:pointer" align="center">Line</th>
        <th style="cursor:pointer" align="center">Sequence</th>
        <th style="cursor:pointer" align="center">Module</th>
        <th style="cursor:pointer" align="center">Item</th>
        <th style="cursor:pointer" align="center">Sympton</th>
        <th style="cursor:pointer" align="center">status</th>
        <th style="cursor:pointer" align="center">Register</th>
        <th style="cursor:pointer" align="center">Assigned</th>
        <th style="cursor:pointer" align="center">Register dt</th>
    </tr>
</thead>
<tbody>
{% for list in issue_list %}
 <tr>
    <td>
      <input name="radio_id" type="radio" id="radio_id" value="{{list.id}}">
    </td>    
    <td align="center">{{ list.id }} </td>  
    <td align="center">{{ list.line_nm }} </td>
    <td align="center">{{ list.line_nm }} </td>
    <td align="center">{{ list.sequence}} </td>
    <td align="center">{{ list.division }} </td>
    <td align="center">{{ list.module }} </td>
    <td align="left">{{ list.sympton }}</td>
    <td align="left">{{ list.status }}</td>    
    <td align="center">{{ list.register }}</td>     
    <td align="center">{{ list.assigned }}</td>   
    <td align="center">{{ list.register_dt|date:'d/m/Y H:i' }}</td>
</tr>
{% endfor %}
</tbody>
</table>

<!--DataTables-->

<script type="text/javascript">
$(document).ready( function (){
  $('#mytable1').DataTable();
  });
</script>

<!--Get ID from selected radio button and insert into django "edit" url-->

<script>
$(function(){
  $('input[type="radio"]').click(function(){
    if ($(this).is(':checked'))
    {
      let link = $('#edit')
      let currentHref = link.attr("href")
      let newHref = currentHref.split("?radio_id=")[0] + "?radio_id=" + $(this).val()
      link.attr("href", newHref);
    }
  });
});
</script>

When I'm in the first page, I can get the radio button ID properly, but while I'm in second or higher page, the link "edit" is not passed to the "href="{% url 'update_maintenance_issue' %}" id="edit" "

Is it a Datatable issue or Can I solve by myself?

score 1 · Accepted Answer · answered Dec 01 '21 at 18:30

You can change your click event handler to a jQuery delegated event handler:

$( '#mytable1 tbody' ).on( "click", 'input[type="radio"]', function(){
  if ($(this).is(':checked')) {
    console.log( $(this).val() );
  }
});

How this works:

It assigns the event handler to the table's <tbody> tag, but also provides the <input> tag as the target for the click event.

Why this is needed:

When DataTables renders the HTML table, it only displays the first page of results in the browser (in the DOM). So, even though the underlying DataTables object contains all your table's data, only part of that data is actually available to your jQuery event handler.

By attaching the event to a node which is initially available, and by using the "delegated" syntax, jQuery will handle clicks for those radio buttons which are not initially visible, but which may become visible later on (for example, when the user navigates to a new page of results).

You can read more about that here in the section for delegated event handlers.

Here is a minimal demo you can run for yourself:

$(document).ready(function() {

  var table = $('#mytable1').DataTable( {
    // not directly relevant to you - you can
    // replace the following with your actual 
    // initialization properties:
    "deferRender": false
  } );

  $( '#mytable1 tbody' ).on( "click", 'input[type="radio"]', function(){
    if ($(this).is(':checked')) {
      console.log( $(this).val() );
    }
  });

} );

<!doctype html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Demo</title>
  <script src="https://code.jquery.com/jquery-3.5.0.js"></script>
  <script src="https://cdn.datatables.net/1.10.22/js/jquery.dataTables.js"></script>
  <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.22/css/jquery.dataTables.css">
  <link rel="stylesheet" type="text/css" href="https://datatables.net/media/css/site-examples.css">

</head>

<body>

<div style="margin: 20px;">

    <table id="mytable1" class="display dataTable cell-border" style="width:100%">
        <thead>
            <tr>
                <th>No</th>
                <th>Name</th>
                <th>Position</th>
                <th>Office in Country</th>
                <th>Age</th>
                <th>Start date</th>
                <th>Salary</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td><input name="radio_id" type="radio" id="radio_id" value="123"></td>
                <td>Tiger Nixon</td>
                <td>System Architect</td>
                <td>Edinburgh</td>
                <td>61</td>
                <td>2011/04/25</td>
                <td>$320,800</td>
            </tr>
            <tr>
                <td><input name="radio_id" type="radio" id="radio_id" value="124"></td>
                <td>Garrett Winters</td>
                <td>Accountant</td>
                <td>Tokyo</td>
                <td>63</td>
                <td>2011/07/25</td>
                <td>$170,750</td>
            </tr>
            <tr>
                <td><input name="radio_id" type="radio" id="radio_id" value="125"></td>
                <td>Ashton Cox</td>
                <td>Junior "Technical" Author</td>
                <td>San Francisco</td>
                <td>66</td>
                <td>2009/01/12</td>
                <td>$86,000</td>
            </tr>
            <tr>
                <td><input name="radio_id" type="radio" id="radio_id" value="126"></td>
                <td>Cedric Kelly</td>
                <td>Senior Javascript Developer</td>
                <td>Edinburgh</td>
                <td>22</td>
                <td>2012/03/29</td>
                <td>$433,060</td>
            </tr>
            <tr>
                <td><input name="radio_id" type="radio" id="radio_id" value="127"></td>
                <td>Airi Satou</td>
                <td>Accountant</td>
                <td>Tokyo</td>
                <td>33</td>
                <td>2008/11/28</td>
                <td>$162,700</td>
            </tr>
            <tr>
                <td><input name="radio_id" type="radio" id="radio_id" value="128"></td>
                <td>Brielle Williamson</td>
                <td>Integration Specialist</td>
                <td>New York</td>
                <td>61</td>
                <td>2012/12/02</td>
                <td>$372,000</td>
            </tr>
            <tr>
                <td><input name="radio_id" type="radio" id="radio_id" value="129"></td>
                <td>Herrod Chandler</td>
                <td>Sales Assistant</td>
                <td>San Francisco</td>
                <td>59</td>
                <td>2012/08/06</td>
                <td>$137,500</td>
            </tr>
            <tr>
                <td><input name="radio_id" type="radio" id="radio_id" value="130"></td>
                <td>Rhona Davidson</td>
                <td>Integration Specialist</td>
                <td>Tokyo</td>
                <td>55</td>
                <td>2010/10/14</td>
                <td>$327,900</td>
            </tr>
            <tr>
                <td><input name="radio_id" type="radio" id="radio_id" value="131"></td>
                <td>Colleen Hurst</td>
                <td>Javascript Developer</td>
                <td>San Francisco</td>
                <td>39</td>
                <td>2009/09/15</td>
                <td>$205,500</td>
            </tr>
            <tr>
                <td><input name="radio_id" type="radio" id="radio_id" value="132"></td>
                <td>Sonya Frost</td>
                <td>Software Engineer</td>
                <td>Edinburgh</td>
                <td>23</td>
                <td>2008/12/13</td>
                <td>$103,600</td>
            </tr>
            <tr>
                <td><input name="radio_id" type="radio" id="radio_id" value="133"></td>
                <td>Jena Gaines</td>
                <td>Office Manager</td>
                <td>London</td>
                <td>30</td>
                <td>2008/12/19</td>
                <td>$90,560</td>
            </tr>
            <tr>
                <td><input name="radio_id" type="radio" id="radio_id" value="134"></td>
                <td>Quinn Flynn</td>
                <td>Support Lead</td>
                <td>Edinburgh</td>
                <td>22</td>
                <td>2013/03/03</td>
                <td>$342,000</td>
            </tr>
            <tr>
                <td><input name="radio_id" type="radio" id="radio_id" value="135"></td>
                <td>Charde Marshall</td>
                <td>Regional Director</td>
                <td>San Francisco</td>
                <td>36</td>
                <td>2008/10/16</td>
                <td>$470,600</td>
            </tr>
            <tr>
                <td><input name="radio_id" type="radio" id="radio_id" value="136"></td>
                <td>Haley Kennedy</td>
                <td>Senior Marketing Designer</td>
                <td>London</td>
                <td>43</td>
                <td>2012/12/18</td>
                <td>$313,500</td>
            </tr>
        </tbody>
    </table>

</div>

</body>
</html>

The following may also be helpful: [Direct vs. Delegated - jQuery .on()](https://stackoverflow.com/q/8110934/12567365) — andrewJames, Dec 01 '21 at 18:35
Thank you @andrewJames, this solution definetely solved my problem. — HudsonBarroso, Dec 01 '21 at 19:19

Send selected radio button id from Datatable to Django URL

1 Answers1