CODEWITHSUNDEEP
javascriptdjangomodal-dialogmodalviewcontroller
BCA
BCA

Reputation: 438

Django , open modal form with value , using javascript

I'm new at django and javascript , I try to open modal with value of rowid , I could pass value at last but can't open form with it here my code downbelow ;

inside HTML:

<thead>
      {% for customer in object_list %}
      <tr>
        <td>{{ customer.id }}</td>
        <td>{{ customer.name }}</td>
        <td>{{ customer.surname }}</td>
        <td>{{ customer.gender }}</td>
        <td>{{ customer.email }}</td>
        <td>{{ customer.phone }}</td>
        <td>{{ customer.bloodtype }}</td>
        <td><a href=# data-target="#my_modal" data-toggle="modal" class="identifyingClass" data-id="{{ customer.id }}">Open Modal</a> </td>
      </tr>
      {% endfor %}
    </thead>

My Modal

<h2>Modal</h2>
<div class="modal fade" id="my_modal" tabindex="-1" role="dialog" aria-labelledby="my_modalLabel">
<div class="modal-dialog" role="dialog">
    <div class="modal-content">
        <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
            <h4 class="modal-title" id="myModalLabel">Modal Title</h4>
        </div>
        <div class="modal-body">

          <form method="post">
            {% csrf_token %}
              {{ form.as_p }}
              <input type="submit" value="Update">
          </form>

            <input type="hidden" name="hiddenValue" id="hiddenValue" value="{{ customer.id }} />
        </div>
        <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">No</button>
            <button type="button" class="btn btn-primary">Yes</button>
        </div>
    </div>
</div>

Javascript

<script type="text/javascript">
$(function () {
 $(".identifyingClass").click(function () {
     var my_id_value = $(this).data('id');
     $(".modal-body #hiddenValue").val(my_id_value);
 })
});
</script>

Upvotes: 1

Views: 4542

Answers (1)

Victor Ermakov
Victor Ermakov

Reputation: 491

Just to show modal this code works. Also added function for button "No", closing modal form. Do you need help on other stuff?

$(function () {
 $(".identifyingClass").click(function () {
     $('.main-modal').show();
     var my_id_value = $(this).data('id');
     $(".modal-body #hiddenValue").val(my_id_value);
 })
});

$(function () {
 $("#close-modal").click(function () {
     $('.main-modal').hide();
     
 })
});
.main-modal{
  display:none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<thead>
      <tr>
        <td>1</td>
        <td>a</td>
        <td>as</td>
        <td>male</td>
        <td>[email protected]</td>
        <td>asdasd</td>
        <td>A</td>
        <td><a href=# data-target="#my_modal" data-toggle="modal" class="identifyingClass" data-id="1">Open Modal</a> </td>
      </tr>
    </thead>
    
<div class="main-modal">
<h2>Modal</h2>
<div class="modal fade" id="my_modal" tabindex="-1" role="dialog" aria-labelledby="my_modalLabel">
<div class="modal-dialog" role="dialog">
    <div class="modal-content">
        <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
            <h4 class="modal-title" id="myModalLabel">Modal Title</h4>
        </div>
        <div class="modal-body">

          <form method="post">
            {% csrf_token %}
              {{ form.as_p }}
              <input type="submit" value="Update">
          </form>

            <input type="hidden" name="hiddenValue" id="hiddenValue" value="{{ customer.id }} />
        </div>
        <div class="modal-footer">
            <button id="close-modal" type="button" class="btn btn-default" data-dismiss="modal">No</button>
            <button type="button" class="btn btn-primary">Yes</button>
        </div>
    </div>
</div>
</div>

Upvotes: 2

Related Questions