如何將行 ID 從 Flask 傳遞給 Modal？

Question

我正在嘗試使這種模式正常工作。 I have a simple flask web app with a SQLite database and some JavaScript code to add new rows to the table with a modal.

編輯行直到現在在一個新頁面中打開，效果很好。 現在我想編輯模式中的行以及添加新行。 我正在努力讓它工作，因為有一個 ID 可以通過，我不知道如何在模態中處理這個問題。

這是我的 HTML 文件：

{% extends "layout.html" %}
{% block content %}
<div class="sensors">
     <div><h1>&nbsp;WIRED Sensors</h1>  </div>
{{ table }}
   <body>
      <div class="content_container">
      <table id="table">
         <thead>
            <td width=55px><b>Pin</b></td>
            <td><b>Location</b></td>
            <td width=175px><b>Last Signal</b></td>
            <td><b>Target</b></td>
            <td width=135px><b>Settings</b></td>
         </thead>

         {% for row in rows %}
            <tr>
               <td>{{row["ID"]}}</td>
               <td>{{row["wired_location"]}}</td>
               <td>{{row["wired_connection_state"]}}</td>   
               <td>{{row["wired_target"]}}</td>
               <td>
                  <form onclick="return confirm('Do you really want to delete this sensor?')" action="{{url_for('wired_delete', id=row['ID'])}}" method="post">
                     <input type="hidden" name="_method" value="DELETE">
                     <input type="submit" value="" class="button_delete">
                  </form>

                  <form action="{{url_for('wired_edit', id=row['ID'])}}" method="post">
                     <input type="hidden" name="_method" value="EDIT">
                     <input type="submit" value="" class="modal-button button_edit" href="#editmodal">
                  </form>
               </td>
            </tr>
         {% endfor %}
      </table>
      <br>
      <a href="/wired_sensors" class="button_refresh" ></a>
      <button class="modal-button button_add" href="#addmodal">Add Sensor</button>
      <a href="wired_service_restart" class="button_grey" >Restart Service</a>
    </div> 

</div>


<!-- The Modal -->
<div id="addmodal" class="modal">


  <!-- Modal content -->
  <div class="modal-content">
    <div class="modal-header">
      <span class="close">×</span>
      <h2>Add New Sensor</h2>
    </div>
    <div class="modal-body">

<form action = "{{ url_for('wired_addrec') }}" method = "POST">
    <br>
    Pin<br>
    <input class="inputfileid" type = "number" name = "ID" min="1" max="30" /></br>

    Location*<br>
    <input class="inputfile" type = "text" name = "wired_location" required /><br>

    Target <div class="tooltip"><img class="infoicon" src="/static/icons/info-circle_blue.svg">
    <span class="tooltiptext"><iframe src="{{ url_for('targetinfo') }}">
    <p>Your browser does not support iframes.</p>
    </iframe></span>
    </div> <br>
    <input class="inputfile" placeholder="z.B.: -h 192.168.1.1 -j sequenz" type = "text" name = "wired_target" /><br>  
    <br>    
    <input type = "submit" value = "Add Sensor" class="button_grey"/><br>
    </form>
    <br>
    <br>
    </div>
  </div>
</div>

<!-- The Modal -->
<div id="editmodal" class="modal">

  <!-- Modal content -->
  <div class="modal-content">
    <div class="modal-header">
      <span class="close">×</span>
      <h2>Edit sensor</h2>
    </div>
    <div class="modal-body">
      <form action = "{{ url_for('wired_editrec') }}" method = "POST">
         <h2>Edit Sensor</h2>
         Pin<br>
         <input class="inputfileid" type = "number" name = "ID" value = "{{id}}" readonly/></br>
         Location*<br>
         <input class="inputfile" type = "text" name = "wired_location" value = "{{new_wired_location}}" required /><br>
         Target <div class="tooltip"><img class="infoicon" src="/static/icons/info-circle_blue.svg">
         <span class="tooltiptext"><iframe src="{{ url_for('targetinfo') }}">
         <p>Your browser does not support iframes.</p>
         </iframe></span>
         </div> <br>
         <input class="inputfile" type = "text" name = "wired_target" value = "{{new_wired_target}}" /><br> 
         <br>
         <button class="button_grey" onclick="window.location.href='/wired_sensors'">Cancel</button>
         <input type = "submit" value = "Save" class="button_add"/>
      </form>
    <br>
    <br>
    </div>
  </div>

</div>

{% endblock %}

這是模態 JavaScript 代碼：

    // Get the button that opens the modal
    var btn = document.querySelectorAll(".modal-button");

    // All page modals
    var modals = document.querySelectorAll('.modal');

    // Get the <span> element that closes the modal
    var spans = document.getElementsByClassName("close");

    // When the user clicks the button, open the modal
    for (var i = 0; i < btn.length; i++) {
     btn[i].onclick = function(e) {
        console.log (this.btn);
        e.preventDefault();
        modal = document.querySelector(e.target.getAttribute("href"));
        modal.style.display = "block";
     }
    }

    // When the user clicks on <span> (x), close the modal
    for (var i = 0; i < spans.length; i++) {
     spans[i].onclick = function() {
        for (var index in modals) {
          if (typeof modals[index].style !== 'undefined') modals[index].style.display = "none";    
        }
     }
    }

Answer 1

我建議使用引導程序，因為它使編程模式更容易。 請參考以下鏈接： Bootstrap 4 Modals

如何將行 ID 從 Flask 傳遞給 Modal？

問題描述

1 個解決方案

解決方案1
0 2020-05-03 20:55:55

如何將行 ID 從 Flask 傳遞給 Modal？

問題描述

1 個解決方案

解決方案1 0 2020-05-03 20:55:55

解決方案1
0 2020-05-03 20:55:55