Как реализовать JQuery подтвердить всплывающее окно диалога - PullRequest
Новая
       1

Как реализовать JQuery подтвердить всплывающее окно диалога

0 голосов
/ 05 ноября 2019

У меня есть форма с кнопкой отправки и я хочу добавить модальный диалог подтверждения, используя пример JQuery, но безуспешно, когда я использую шаблон django

В настоящее время я использовал JS Подтверждение () (см. Ниже), но яЯ хотел бы настроить диалоговое окно Я понимаю, что я должен использовать JQuery Dialog, поэтому я пытаюсь реализовать это решение

это мой шаблон: 

{% extends 'layouts/base.html' %}
{% load static %}
{% load crispy_forms_tags %}
{% block extrahead %}
<!--<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />-->
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
    <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

    <script>
        $(document).ready(function() {
            $("#randomize").click(function(event){
                var response = confirm("Do you confirm randomization");
                if (response == false) {
                    event.preventDefault()
                }
            });
        });
    </script>

{% endblock %}
{% block title %}Index | Intense TBM{% endblock %}
{% block content %}



<div class='container'>

<h1>Randomization form</h1>
</br>

<div class="row">
    <div class="col-sm">
        <strong>Patient code: </strong>{{ preincluded.pat_num }}
    </div>
    <div class="col-sm">
        <strong>Age: </strong>{{ preincluded.age }}
    </div>
    <div class="col-sm">
        <strong>Sex: </strong>
        {% if preincluded.pat_sex == 1 %}
            Male
        {% else %}
            Female
        {% endif %}

    </div>
</br></br>
</div>
    <form method="POST" class="post-form">
        {% csrf_token %}
        {{ form |crispy }}
        <!--<button id="randomize" type="submit" class="btn btn-primary" onclick="confirm('Do you confirm randomization?')">Randomize</button>-->
        <button id="randomize" type="submit" class="btn btn-primary">Randomize</button>
    </form>

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

{% endblock %}

Я пытаюсь изменить JSкод с этим: 

  <script>

    $(document).ready(function() {
        $("#randomize").click(function(event){
            $('body').append('<div id="dialog"></div>');
            $("#dialog").html('Do you confirm randomization?');

            $( "#dialog" ).dialog({
                title: 'Intense TBM Randomization',
                modal: true,
                buttons: {
                    Yes: function() {
                        //
                        $( this ).dialog( "close" );
                    },
                    Cancel: function() {
                        $( this ).dialog( "close" );
                        //
                    }
                }
            })
        });
    });
  </script>

РЕДАКТИРОВАТЬ Infact У меня ошибка сообщения: Объект не поддерживает свойство или метод 'dialog'

Если я проверяю свою страницу синструмент разработки Я вижу, что div #dialog добавлен, но диалоговое окно не показывало

Ответы [ 3 ]

0 голосов
/ 05 ноября 2019

Я попробовал с «самым простым» примером, и я работаю! Я заблудился !!! 

<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>jQuery UI Dialog - Default functionality</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
    <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
    <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
    <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
  <script>

    $(document).ready(function() {
        $("#randomize").click(function(event){
            //afficher popup -> créer une fonction et ajouter le numéor du patient en paramètre 
            //pour personnaliser le popup
            $('body').append('<div id="dialog"></div>');
            $("#dialog").html('Do you confirm randomization?');
            console.log($('#dialog'))
            $( "#dialog" ).dialog({
                title: 'Intense TBM Randomization',
                modal: true,
                buttons: {
                    Yes: function() {
                        //
                        $( this ).dialog( "close" );
                    },
                    Cancel: function() {
                        $( this ).dialog( "close" );
                        //
                    }
                }
            })
        });
    });

  // $( function() {
  //   $( "#dialog" ).dialog();
  // } );
  </script>
</head>
<body>
<button id="randomize" type="submit" class="btn btn-primary">Randomize</button> 



</body>
</html>```
0 голосов
/ 06 ноября 2019

Я думаю, что нашел проблему, мне нужно добавить jQuery.noConflict ();

0 голосов
/ 05 ноября 2019

Вы вставляете диалоговое окно div # dialog динамически в dom, но jquery не знает об этом. Jquery не находит диалоговое окно div # в dom, поэтому выдает ошибку.

Все, что вам нужно сделать, это инициализировать диалог div # при загрузке страницы, поэтому он будет отображаться в dom.

Вы должны сделать отображение стиля: ни один css в диалоге div #, чтобы он не отображался, если вы на самом деле не хотите его показывать.

Чтобы показать, вы можете просто использовать $ ('# dialog').show () и вызовите hide (), когда вы хотите переключиться.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...