0

I am using Django 2.2 with Bootstrap.

This is the approach used for

  1. Opening a modal window ,
  2. User updates the data,
  3. User saves it
  4. Underlying table from where the window was opened is updated and modal window is closed

Till here everything works perfectly, however, the issue occurs when you click the same button to open the window. Here when you click the button, nothing happens !

This is the javascript file.

            $("#modal-risk-profile").on("submit", ".form-risk-profile", function () {
            var form = $(this);         

            $.ajax({
                url:form.attr("action"),
                data:form.serialize(),
                type:form.attr("method"),
                dataType:'json',
                success: function(data) {
                    console.log(data.form_is_valid);
                    if(data.form_is_valid) {
                        console.log(data.html_planner_client_list);
                        $("#id_client_table tbody").html(data.html_planner_client_list); // if you remove this line, modal window appears without any issues
                        $("#modal-risk-profile").modal("hide");
                        console.log("I have returned with success");
                    }
                    else {
                        console.log("I am in else");
                        $("#modal-risk-profile .modal-content").html(html_form);
                    }                       
                }
            });

            return false;
        });

The output of the html_planner_client_list is as follows:

<tr>
<td> Rajesh </td>
<td> 01-04-2000 </td>
<td> Bangalore </td>
<td> ramachandran.test@gmail.com </td>
<td> Salaried </td>
<td class="text-center"> 

        <button class="button-risk-profile btn btn-danger btn-sm py-0" style="font-size:0.9em" data-url="/client/riskprofileplanner/19/">
            Take Questionnaire 
        </button> 


</td>
<td> Subramanian</td>
<td class="text-left"> 
    <a href="/client/client_select/19/" class="btn btn-primary btn-sm py-0" style="font-size: 0.9em;">Select </a>               
    <a href="/client/client_edit/19/" class="btn btn-primary btn-sm py-0" style="font-size: 0.9em;">Edit </a> 
    <a href="/client/client_report/19/" class="btn btn-primary btn-sm py-0" style="font-size: 0.9em;">Report </a>
    <button class="button-choose-planner btn btn-primary btn-sm py-0" style="font-size: 0.9em;" data-url="/client/select_planner/19/">
        Planner 
    </button> 
</td>

There are no errors in Inspector Log and there are no errors in Django as well.

What could possibly go wrong ?

Mani
  • 43
  • 7

1 Answers1

0

I solved this problem using this link :

            $('.button-risk-profile').click(function(){

            var btn = $(this);
            console.log("I am in client Risk Profile")

            $.ajax({
              url: btn.attr("data-url"),
              type: 'get',
              dataType: 'json',
              beforeSend: function () {
                $("#modal-risk-profile").modal("show");
              },
              success: function (data) {
                $("#modal-risk-profile .modal-content").html(data.html_form);
              }
            });             

        });

which I changed to :

            $('.client-table').on('click',".button-risk-profile",function(){

            var btn = $(this);
            console.log("I am in client Risk Profile")

            $.ajax({
              url: btn.attr("data-url"),
              type: 'get',
              dataType: 'json',
              beforeSend: function () {
                $("#modal-risk-profile").modal("show");
              },
              success: function (data) {
                $("#modal-risk-profile .modal-content").html(data.html_form);
              }
            });             

        });
Mani
  • 43
  • 7