1

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>
BCA
  • 438
  • 6
  • 21

1 Answers1

2

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@asdasd.com</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>
Victor Ermakov
  • 471
  • 3
  • 6
  • I can open modal it's ok but how can I open update form (filled with data) inside modal , like we can do with calling this " Edit" (page with parameter) , how can I implement that to modal ,
    {% csrf_token %} {{ form.as_p }}
    – BCA Jan 16 '19 at 07:19
  • 1
    Ah. I got it. I did the same thing using Ajax actually. And all modal form handler is the new view in Django. View can return json or whole html. – Victor Ermakov Jan 16 '19 at 07:28
  • nice , any source you can point at me to lookup , I'm quite new for these things. I hear that django rest api is good for these kind of things does it worth to use it ? UI stuff. – BCA Jan 16 '19 at 07:36
  • I think there is a good example: (https://stackoverflow.com/questions/11276100/how-do-i-insert-a-django-form-in-twitter-bootstrap-modal-window) Using django rest api for 1 modal form is kinda overkill. – Victor Ermakov Jan 16 '19 at 07:43