Django, открыть модальную форму со значением, используя javascript - PullRequest
Новая
       24

Django, открыть модальную форму со значением, используя javascript

0 голосов
/ 15 января 2019

Я новичок в django и javascript, я пытаюсь открыть модальный со значением rowid, я мог бы передать значение, но не могу открыть форму с этим здесь мой код ниже;

внутри 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>

Мой модал 

<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>

1 Ответ

0 голосов
/ 16 января 2019

Просто чтобы показать модал этот код работает. Также добавлена ​​функция для кнопки «Нет», закрывающей модальную форму. Вам нужна помощь по другим вопросам? 

$(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>
...