Как повторно использовать переменную в модале, чтобы перейти к замене модальной (начальной загрузки) - PullRequest
Новая
       6

Как повторно использовать переменную в модале, чтобы перейти к замене модальной (начальной загрузки)

0 голосов
/ 26 ноября 2018

Я хочу перенести данные из режима редактирования в режим удаления.Так как я не программист javascript, я пробовал разные вещи из примеров, но, похоже, ничто не передает данные в режиме редактирования в режим удаления.Честно говоря, я даже не знаю, возможно ли это.

Я сделал скрипку, где я открываю модал удаления в модале редактирования, чтобы показать цель, поэтому остается большой вопрос, как мне перенести данныемежду этими двумя модами?

https://jsfiddle.net/atongraaff/dxhgo06t/56/

я отредактировал свой предыдущий запрос и вместо этого сделал эту скрипку.

html на скрипке: 

<table>
<tr ID1="1" sometext1="example1" data-toggle="modal" data-target="#modaledit">
  <td>1</td>
  <td>example1</td>
</tr>
<tr ID1="2" sometext1="example2" data-toggle="modal" data-target="#modaledit">
  <td>2</td>
  <td>example2</td>
</tr>
<tr ID1="3" sometext1="example3" data-toggle="modal" data-target="#modaledit">
  <td>3</td>
  <td>example3</td>
</tr>
</table>

<div class="modal fade" id="modaledit" tabindex="-1" role="dialog" aria-labelledby="example" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <form id="editform" action="" method="POST">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLongTitle">editting</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <input type="hidden" id="testID" name="ID" value="ID"/>
        <div class="form-group row">
           <label for="sometext" class="col-sm-3 col-form-label">Some text</label>
           <div class="col-sm-9">
           <input type="text" id="text" name="sometext" value="sometext" />
           </div>
        </div>
      </div>
      <div class="modal-footer">
        <a href="#" id="btnDel" ID1="ID" sometext1="sometext" class="button btn-danger btn-sm">Delete</a>
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
      </form>
  </div>
</div>

<div class="modal fade" id="modaldel" tabindex="-1" role="dialog" aria-labelledby="example" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <form id="delform" method="POST">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLongTitle">deleting the entry</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <input type="hidden" id="testID" name="ID" value="ID"/>
        <div class="form-group row">
           <label for="sometext" class="col-sm-3 col-form-label">Some text</label>
           <div class="col-sm-9">
           <input type="text" id="text" name="sometext" value="sometext" readonly="true" />
           </div>
        </div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-danger">Delete</button>
      </div>
      </form>
    </div>
  </div>
</div>

и JavaScript 

$(document).ready(function() {
  $('.modaledit').on('hidden.bs.modal', function(e)
    { 
        $(this).removeData();
    }) ;
  });

$('#modaledit').on('show.bs.modal', function (e) {
  var opener=e.relatedTarget;//this holds the element who called the modal
   //we get details from attributes
   var ID=$(opener).attr('ID1'); 
   var sometext=$(opener).attr('sometext1');
   $('#editform').find('[name="ID"]').val(ID);
  $('#editform').find('[name="sometext"]').val(sometext);
}); 

$('#btnDel').click(function(){
     $('#modaldel').modal('show');
});
...