2017-01-12 5 views
3

Webサイト(Python + Flask)に管理パネルを作成していますが、をすべて選択するトグルを実装しようとしているときに問題が発生しました。選択した項目を切り替える際にアクションを有効にする方法

テーブルには、次のようになります。

enter image description here

トグル自体が実装されましたが、今、私はそれを有用なものにしたいです。

[選択済み]ボタンをクリックすると、選択したアイテム(フラグ)をすべて削除できるようにしたいと思いますが、どうすればよいかわかりません。

各フラグを個別にglyphicon-ゴミ次のPython/HTMLに応じてをクリックして削除することができます。

<button onclick="deleteSelected('politician')">SELECTED</button> 
{% for flag in flags %} 
    <tr> 
    <!-- Check box --> 
    <td style="width: 60px;"><input type="checkbox" name="politician" value="bar1"></td> 
    <!-- First Name --> 
    <td class="col-title">{{flag.flagtitle}}</td> 
    <!-- Last Name --> 
    <td class="col-description">{{flag.flagreason}}</td> 
    <!-- Details --> 
    <td> 
     <a href="/flag/{{ flag.idflag }}"> 
     <span class="glyphicon glyphicon-info-sign"></span> 
     </a> 
    </td> 
    <!-- Edit icon --> 
    <td class="list-buttons-column"> 
     <a href="/politician/{{ flag.politician }}"> 
     <span class="glyphicon glyphicon-pencil"></span> 
     </a> 
    </td> 

    <!-- DELETE ITEM/FLAG --> 
    <td class="col-delete"> 
     <form action ="/delete_flag/{{ flag.idflag }}" method="POST"> 
     <button onclick="return confirm('Are you sure you want to delete this flag?');"> 
      <span class="fa fa-trash glyphicon glyphicon-trash"></span> 
     </button> 
     </form> 
    </td> 

    </tr> 
{% endfor %} 

私の考えでは、選択したコンテンツを削除するには、JavaScriptの機能を開発することであったが、私は」どのように私がflag.idFlagを得ることができるかわからない、これはフラグのIDが関連付けられている。

私はそれがこのような何かを見てだろうと思った:

function deleteSelected(elem) { 
    checkboxes = document.getElementsByName(elem); 
    for(var i=0, n=checkboxes.length;i<n;i++) { 
     if (checkboxes[i].checked) { 
      delete((checkboxes[i].getSelectedFlag).idFlag) 
     } 
    } 
} 

明らかに上記のコードは、それはあなたに私が探しているもののアイデアを与えることを意図して、動作しません。

これを行う方法はありますか?前もって感謝します。

EDIT:

[OK]をので、私はそれを考え出しました。 action="/delete_flag/flag.idFlag"という複数のフォームを提出しなければならないと考えると、フラグのIDが表示される列をテーブルに追加しました。

enter image description here

そのことについては、私は、フォームを作成して提出することができるように、各列(ID)の最初の値を取得し、IDの配列に格納するJS関数を作成し、次のようなそれらのそれぞれのために。

配列のIDごとに、form.action = "/delete_flag/" + retrievedIDという形式を作成します。以下のコードを参照してください。

function deleteRecords() { 
    var arrayOfIDs; 
    arrayOfIDs = $('#table-style').find('[type="checkbox"]:checked').map(function(){ 
      return $(this).closest('tr').find('td:nth-child(2)').text(); 
     }).get(); 

     var delFlagForm = document.createElement("form"); 
     var action; 
     var formID; 
     var submitFormStr; 

     for (var i = 0; i < arr.length; i++) { 
      action = "/delete_flag/" + arr[i]; 
      formID = 'form' + i; 
      delFlagForm.setAttribute("id", formID); 
      delFlagForm.setAttribute("method", "post"); 
      delFlagForm.setAttribute("action", action); 

      delFlagForm.submit(); 
     } 
} 

これは、複数のフォーム送信が非同期的にしか動作しないことを認識するまで、これは私の頭の中でうまくいった。 私は以下の変更を加えました。これが今すぐに固まったところです。フォームは単純に提出されることはありません、何も起こりません:

function deleteRecords() { 
    var arraryOfIDs; 
    arraryOfIDs = $('#table-style').find('[type="checkbox"]:checked').map(function(){ 
      return $(this).closest('tr').find('td:nth-child(2)').text(); 
     }).get(); 

     var delFlagForm = document.createElement("form"); 
     var action; 
     var formID; 
     var submitFormStr; 

     for (var i = 0; i < arr.length; i++) { 
      action = "/delete_flag/" + arr[i]; 
      formID = 'form' + i; 
      delFlagForm.setAttribute("id", formID); 
      delFlagForm.setAttribute("method", "post"); 
      delFlagForm.setAttribute("action", action); 

      if (i != 0) submitFormStr += ' #' + formID; 
      else submitFormStr = '#' + formID; 
     } 
     $('submitFormStr').submit(); 
     return false; 
} 

変数submitFormStrは次のように作成された各フォームのループの店舗ID内に更新:#form0 #form1はとてもこのような理由のために、私は、なぜ作品を理解していません$('#form0 #form1').submit();と同等のコード$('submitFormStr').submit();が機能していません。

私が間違っていることはありますか?

答えて

0

私はそれを理解しました。action="/delete_flag/flag.idFlag"という複数のフォームを提出しなければならないと考えると、フラグのIDが表示される列をテーブルに追加しました。

enter image description here

そのことについては、私は、フォームを作成して提出することができるように、各列(ID)の最初の値を取得し、IDの配列に格納するJS関数を作成し、次のようなそれらのそれぞれのために。

配列のIDごとに、form.action = "/delete_flag/" + retrievedIDという形式を作成します。以下のコードを参照してください。

function deleteRecords() { 
    var arrayOfIDs; 
    arrayOfIDs = $('#table-style').find('[type="checkbox"]:checked').map(function(){ 
      return $(this).closest('tr').find('td:nth-child(2)').text(); 
     }).get(); 

     var delFlagForm = document.createElement("form"); 
     var action; 
     var formID; 
     var submitFormStr; 

     for (var i = 0; i < arr.length; i++) { 
      action = "/delete_flag/" + arr[i]; 
      formID = 'form' + i; 
      delFlagForm.setAttribute("id", formID); 
      delFlagForm.setAttribute("method", "post"); 
      delFlagForm.setAttribute("action", action); 

      delFlagForm.submit(); 
     } 
} 

これは、複数のフォーム送信が非同期的にしか動作しないことを認識するまで、これは私の頭の中でうまくいった。 私は以下の変更を加えました。これが今すぐに固まったところです。フォームは単純に提出されることはありません、何も起こりません:

function deleteRecords() { 
    var arraryOfIDs; 
    arraryOfIDs = $('#table-style').find('[type="checkbox"]:checked').map(function(){ 
      return $(this).closest('tr').find('td:nth-child(2)').text(); 
     }).get(); 

     var delFlagForm = document.createElement("form"); 
     var action; 
     var formID; 
     var submitFormStr; 

     for (var i = 0; i < arr.length; i++) { 
      action = "/delete_flag/" + arr[i]; 
      formID = 'form' + i; 
      delFlagForm.setAttribute("id", formID); 
      delFlagForm.setAttribute("method", "post"); 
      delFlagForm.setAttribute("action", action); 

      if (i != 0) submitFormStr += ' #' + formID; 
      else submitFormStr = '#' + formID; 
     } 
     $('submitFormStr').submit(); 
     return false; 
} 

変数submitFormStrは次のように作成された各フォームのループの店舗ID内に更新:#form0 #form1はとてもこのような理由のために、私は、なぜ作品を理解していません$('#form0 #form1').submit();と同等のコード$('submitFormStr').submit();が機能していません。

私が間違っていることはありますか?

関連する問題