Настой Подтвердите модальное с несколькими кнопками - PullRequest
Новая
       8

Настой Подтвердите модальное с несколькими кнопками

0 голосов
/ 20 декабря 2018

Я работаю над приложением Flask, в котором у меня есть одна страница с несколькими кнопками, и для каждой из этих кнопок при нажатии я хотел «подтвердить - вы уверены?»всплывающее окно, прежде чем перейти к другой функции просмотра, которая выполняет запуск задания в зависимости от кнопки.Я застрял, пытаясь найти способ передать переменную из кнопки через модал для запуска функции просмотра.

Вот что я пробовал до сих пор:

app.py: 

@app.route('/buttons', methods=['GET', 'POST'])
def buttons():
return render_template("buttons.html")

@app.route('/run/<cmd>', methods=['GET', 'POST'])
def run(cmd):
    return render_template_string('''
    cmd = {{ cmd }}<br>
''', cmd=cmd)

buttons.html: 

<head>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<meta charset="utf-8">
 <script type="text/javascript">
 $(document).on("click", ".open-modal", function () {
 var mycmd = $(this).data('id');
 $(".modal-body #cmd").val( mycmd );
 $("#confirm-modal").modal("show");
<script>
</head>
<body>


        <form method="post" action="/">

          <button type="button" class="open-modal" data-toggle="modal" data-id="Test" data-target="#confirm_modal">Test</button>
          <button type="button" class="open-modal" data-toggle="modal" data-id="Test2" data-target="#confirm_modal">Test2</button>

        </div>
    </form>

    <!-- Modal for Pop Up-->
    <div class="modal" tabindex="-1" role="dialog" id="confirm-modal">
      <div class="modal-dialog" role="document">
        <div class="modal-content">
          <div class="modal-header">
            <h5 class="modal-title">Confirm</h5>
            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
              <span aria-hidden="true">&times;</span>
            </button>
          </div>
          <div class="modal-body">
            <p>Confirm - Are you sure?</p>
           <input type="hidden" name="cmd" id="cmd" value=""/>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>

            <form action="{{ url_for('run', cmd=cmd) }}" method="POST">
            <input class="btn btn-secondary" type="submit" name="submit_button" value="Confirm">

          </div>
        </div>
      </div>
    </div>

 </body>

До попытки добавить модальное окно я использовал кнопки отправки в форме внутри button.html, где я должен был поймать значение кнопки вКнопки работают и передают переменную в сеанс, а затем переводят ее в функцию запуска.Однако для модального режима требуется кнопка type = "button" для триггера, который ничего не отправляет обратно в форму.Я также изучил использование и каким-то образом передачу скрытого входного значения или обслуживания модального с другой HTML-страницы.

Любое предложение о том, как сделать эту работу лучше?Ранее у меня был модал подтверждения удаления, где я просто обернул кнопку подтверждения модала в форму с url_for, поэтому я подумал, что это не будет так сложно.К сожалению, я не слишком хорошо разбираюсь в Java-скриптах.Любая помощь очень ценится!

Ответы [ 2 ]

0 голосов
/ 21 декабря 2018

С помощью Джесси - это работает так, как описано в вопросе.

buttons.html: 

  <!-- Trigger buttons for modal-->
  <a data-toggle="modal" class="btn btn-primary" id="Test" value="btn_display_value" data-target="#confirm_modal" onclick="aPassValueFunction(this)"> Test</a> &nbsp;
  <a data-toggle="modal" class="btn btn-primary" id="Test2" value="btn_display_value" data-target="#confirm_modal" onclick="aPassValueFunction(this)"> Test2</a> &nbsp;


    <!-- Modal for Pop Up-->
    <div class="modal" tabindex="-1" role="dialog" id="confirm-modal">
      <div class="modal-dialog" role="document">
        <div class="modal-content">
          <div class="modal-header">
            <h5 class="modal-title">Confirm</h5>
            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
              <span aria-hidden="true">&times;</span>
            </button>
          </div>
          <div class="modal-body">
            <p>Confirm - Are you sure?</p>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>

            <form action="{{ url_for('run') }}" method="POST">
            <input name="pass_value" type="hidden" value="pass_value" id="hidden_input">
            <input class="btn btn-secondary" type="submit" name="submit_button" value="Confirm">
          </div>
        </div>
      </div>
    </div>

    <script>
        function aPassValueFunction(obj){
            let valuefromID = obj.id;
            $('#hidden_input').val(valuefromID);
            $("#confirm-modal").modal("show");
        }
    </script>

app.py: 

@app.route('/buttons', methods=['GET', 'POST'])
def buttons():
return render_template("buttons.html")

@app.route('/run', methods=['GET', 'POST'])
def run():
  if request.method == 'POST':
    if request.form['pass_value'] == 'Test':
    value ='Test just for fools and horses!'
    return render_template_string('''{{ value }}<br>''')
  elif request.form['pass_value'] == 'Test2':
    value ='Test2'
    return render_template_string('''{{ value }}<br>''')
0 голосов
/ 20 декабря 2018

Кроме ссылки, которую я указал в первом комментарии, это еще один способ. 

<a data-toggle="modal" class="btn btn-primary"
   id="value_you_want_to_pass" value="btn_display_value"
   data-target="#your_modal"
   onclick="aTestFunction(this)">                    
</a> &nbsp;


<script>
    function aTestFunction(obj){
        let valuefromID = obj.id;
        $('#hidden_input').val(valuefromID);
    }
</script>

<!-- your modal starts here -->

<input type="hidden" id="hidden_input">
<!-- your modal ends here -->

Делая так, когда вы нажимаете кнопку, вызывается функция JS и назначаетсязначение для скрытого ввода, и, когда модальное открывается, вы сможете передать это значение в модальном окне.Если вы хотите его увидеть, удалите скрытый атрибут.

...