javascript - How to enable actions on toggle selected items -
i'm developing admin panel on website (python + flask) , came across issue while trying implement select toggle.
the table looks following:
the toggle has been implemented want make useful.
upon clicking 'selected' button want able delete each , every selected item (flag) i'm not exacly sure how can pull off.
each flag can individually deleted clicking on glyphicon-trash according following python/html:
<button onclick="deleteselected('politician')">selected</button> {% 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 sure want delete flag?');"> <span class="fa fa-trash glyphicon glyphicon-trash"></span> </button> </form> </td> </tr> {% endfor %} my idea develop javascript function delete selected content i'm not sure how can flag.idflag, flags' id's associated.
i thought this:
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) } } } obviously code above doesn't work, meant give idea of i'm looking for.
is there way can this? in advance.
edit:
ok figured out. considering had submit multiple forms action="/delete_flag/flag.idflag", added column table flag's id visible. following:
for matter, created js function retrieve first value of each row (id) , store in array of ids create , submit form each 1 of them.
for each id of array create form form.action = "/delete_flag/" + retrievedid. see code below.
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; (var = 0; < 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(); } } this sounded in head until realised multiple form submissions work asynchronously. so made following changes , i'm stuck right now. forms won't submitted, nothing happens:
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; (var = 0; < 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; } the variable submitformstr updated within loop stores id each form created following: #form0 #form1so reason don't understand why piece of code $('submitformstr').submit(); equivalent $('#form0 #form1').submit(); not working.
is there i'm doing wrong?
ok figured out. considering had submit multiple forms action="/delete_flag/flag.idflag", added column table flag's id visible. following:
for matter, created js function retrieve first value of each row (id) , store in array of ids create , submit form each 1 of them.
for each id of array create form form.action = "/delete_flag/" + retrievedid. see code below.
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; (var = 0; < 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(); } } this sounded in head until realised multiple form submissions work asynchronously. so made following changes , i'm stuck right now. forms won't submitted, nothing happens:
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; (var = 0; < 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; } the variable submitformstr updated within loop stores id each form created following: #form0 #form1so reason don't understand why piece of code $('submitformstr').submit(); equivalent $('#form0 #form1').submit(); not working.
is there i'm doing wrong?
Comments
Post a Comment