为什么Bootstrap4模式在Django模板中不显示数据?

2024-04-26 05:29:31 发布

您现在位置:Python中文网/ 问答频道 /正文

我试图用django变量将数据显示到模态体中。我对ajax和django很在行。ajax函数传递Galeria对象的id,然后视图返回带有数据的JsonResponse。莫代尔为什么不获取数据?如果I console.log也打印数据,但是当我尝试通过django变量传递数据时,模式显示为空。我做错了什么

我的观点

def get_galeria(request):
    galeria = Galeria.objects.get(id=int(request.GET['ajax_galeria']))
    print(galeria.id)
    context = {}
    context['galeriaID'] = galeria.id
    context['galeriaNombre'] = galeria.nombre

    return JsonResponse(context, safe=False)

models.py

class Galeria(models.Model):
    uuid = models.CharField(unique=True, max_length=36, blank=True, null=True)
    usuario_creador = models.ForeignKey('Usuario', on_delete=models.CASCADE, db_column='usuario_creador', blank=True, null=True, related_name='galerias_usuariocreador')
    usuario_auditor = models.ForeignKey('Usuario', on_delete=models.CASCADE, db_column='usuario_auditor', blank=True, null=True, related_name='galerias_usuarioauditor')
    nombre = models.CharField(unique=True, max_length=100)
    ruta = models.ImageField(upload_to=settings.MEDIA_ROOT, unique=True, max_length=255)
    es_imagen = models.IntegerField()
    es_video = models.IntegerField()
    es_audio = models.IntegerField(blank=True, null=True)
    auditada = models.DateTimeField(blank=True, null=True)
    descripcion = models.TextField(blank=True, null=True)
    modificado = models.DateTimeField(blank=True, null=True)
    eliminado = models.IntegerField(blank=True, null=True)
    tipo = models.CharField(max_length=10, blank=True, null=True)
    grupo = models.ForeignKey('Grupo', on_delete=models.CASCADE, db_column='grupo', blank=True, null=True, related_name='galerias_grupo')
    fecha_creacion = models.DateField(auto_now_add=True, blank=True, null=True)

    def __str__(self):
        return self.nombre

    class Meta:
        managed = True
        db_table = 'galeria'

index.html(请参阅ajax函数和id='modal\u info\u galeria'的modal)

<!doctype html>
<html lang="en">

<head>

    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"
        integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">

    <!-- Local CSS -->
    <link rel="stylesheet" href="/static/css/style.css">

    <!-- Material Icons -->
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

    <!-- Google Fonts -->
    <!-- <link href="https://fonts.googleapis.com/css?family=Open+Sans&display=swap" rel="stylesheet"> -->
    <link href="https://fonts.googleapis.com/css?family=Roboto:400,400i,500,500i,700&display=swap" rel="stylesheet"> 

</head>

<body>
    <script src="https://code.jquery.com/jquery-3.4.1.min.js"
        integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
        crossorigin="anonymous"></script>
    <section class="contenedor" id="sidemenutrans">

        <!-- Header Grid -->
        <div class="header-bar">

            <!-- Header Title -->
            <div class="title-section">
                Galeria de Medios
            </div>

            <!-- Header Navbar -->
            <nav class="navbar navbar-expand-lg navbar-light navbar-edited">
                <button class="navbar-toggler" type="button" data-toggle="collapse"
                    data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false"
                    aria-label="Toggle navigation">
                    <span class="navbar-toggler-icon"></span>
                </button>
                <div class="collapse navbar-collapse" id="navbarSupportedContent">
                    <i class="material-icons" style="font-size:30px;cursor:pointer" onclick="openNav()">
                        menu
                    </i>

                    <!-- Sidebar Menu -->
                    <div id="mySidenav" class="sidenav">
                        <div class="profile-cont">
                            <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;</a>
                            <div class="profile-img"></a></div>
                            <div class="username">{{ user }}</div>
                            <div class="profile-bg"></div>
                        </div>
                        <!-- Items, secciones administrativas links -->
                        <section class="menu-section">
                            <a href="{% url 'index' %}" class="menu-option"><i class="material-icons icon-menu">insert_photo</i> Galeria</a>
                            <a href="{% url 'pantallas' %}" class="menu-option"><i class="material-icons icon-menu">personal_video</i>Pantallas</a>
                        </section>
                    </div>

                    <!-- Header - Navbar Content -->
                    <ul class="navbar-nav mr-auto">
                        <li class="nav-item dropdown">
                            <!-- Split dropright button -->
                            <div class="btn-group dropright">
                                <button type="submit" form='form_filter_galerias' class="btn btn-secondary">
                                FILTRAR
                                </button>
                                <button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                <span class="sr-only">Toggle Dropright</span>
                                </button>
                                <!--DROPDOWN FILTROS-->
                                <div class="dropdown-menu" aria-labelledby="navbarDropdown">
                                    <!--FORMULARIO DE FILTROS-->
                                    <form action='{% url "filtrar_galerias" %}' method='POST' id='form_filter_galerias'>
                                        {% csrf_token %}
                                        <h6 class="dropdown-header">Tipos de Archivo</h6>
                                        <div class="form-check; dropdown-item">
                                            <label class="form-check-label">
                                              <input type="radio" class="form-check-input" name="filter_tipoarchivo" value='Imagenes' checked>Imagenes
                                            </label>
                                        </div>
                                        <div class="form-check; dropdown-item">
                                            <label class="form-check-label">
                                            <input type="radio" class="form-check-input" name="filter_tipoarchivo" value='Videos'>Videos
                                            </label>
                                        </div>
                                        <div class="form-check disabled; dropdown-item">
                                            <label class="form-check-label">
                                            <input type="radio" class="form-check-input" name="filter_tipoarchivo" value='Audios' disabled>Audios
                                            </label>
                                        </div>
                                        <!--SEPARADOR DROPDOWN-->
                                        <div class="dropdown-divider"></div>
                                        <h6 class="dropdown-header">Filtrar por:</h6>
                                        <div class="form-check; dropdown-item">
                                            <label class="form-check-label">
                                            <input type="radio" class="form-check-input" name="filter_otros" value='Autor'>Autor
                                            </label>
                                        </div>
                                        <div class="form-check; dropdown-item">
                                            <label class="form-check-label">
                                            <input type="radio" class="form-check-input" name="filter_otros" value='Fecha_asc'>Fecha ASC
                                            </label>
                                        </div>
                                        <div class="form-check; dropdown-item">
                                            <label class="form-check-label">
                                            <input type="radio" class="form-check-input" name="filter_otros" value='Fecha_desc'>Fecha DESC
                                            </label>
                                        </div>
                                        <div class="form-check; dropdown-item">
                                            <label class="form-check-label">
                                            <input type="text" class="col-12 form-check-input" name="filter_grupo" placeholder="Grupo...">
                                            </label>
                                        </div>                          
                                    </form>
                                </div>
                            </div>                           
                        </li>

                        <!-- Button Subir Archivo (Modal) -->
                        <li style='padding-left: 5px;'>
                            <button type="button" class="btn btn-primary" id="UploadButton" data-toggle="modal"
                                data-target="#staticBackdrop">Subir Archivo</button>
                        </li>
                    </ul>

                    <!-- Formulario de Busqueda de Galerias -->
                    <form class="form-inline my-2 my-lg-0" action='{% url "buscar_galerias" %}' method='GET'>
                        <input class="form-control mr-sm-2" type="search" placeholder="Buscar galerias" aria-label="Search" name='search'>
                        <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Buscar</button>
                    </form>

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

        <!-- Modal Subir Archivo -->
        <div class="modal fade" id="staticBackdrop" data-backdrop="static" tabindex="-1" role="dialog"
            aria-labelledby="staticBackdropLabel" aria-hidden="true">
            <div class="modal-dialog modal-lg">
                <div class="modal-content">

                    <!-- Modal Subir Archivo - Header -->
                    <div class="modal-header border-0">
                        <h5 class="modal-title" id="staticBackdropLabel">Subir Contenido</h5>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>

                    <!-- Modal Subir Archivo - Drag & Drop Body -->
                    <div class="modal-body dad-container">
                        <div class="caption-info">
                            <i class="material-icons md-48 caption-sign">add</i>
                            <p class="caption-text">Drag & Drop Files Here</p>
                        </div>
                    </div>

                    <!-- Modal Subir Archivo - Footer Browser -->
                    <div class="modal-footer border-0 footer-edited">
                        <!-- FORMULARIO CREAR GALERIA -->
                        <form method='POST' enctype="multipart/form-data" action='{% url "crear_galeria" %}'>
                            {% csrf_token %}                                               
                            <div class="custom-file">
                                <input type="file" class="custom-file-input browse-file" id="customFile" name='Galeria_ruta' required>
                                <label class="custom-file-label" for="customFile">Elegir archivo...</label>
                              </div>
                              <button type="submit" class="btn btn-outline-success">Subir Archivo</button>
                          </form>                        
                    </div>
                </div>
            </div>
        </div>        

        <!-- Media Content Container -->
        <div class="content">

            <!-- Recorrer las galerias -->            
            {% for g in galerias %}

                <!-- Si la galeria es imagen, crear container de imagen -->
                {% if g.es_imagen == 1 %}
                <!-- Container de Imagen -->
                <div class="img-container">
                    <img id="img-content" src="{{g.ruta.url}}">
                    <p>{{galeriaID}}</p>
                    <!-- Formulario para Borrar Galeria Imagen -->
                    <form method='POST' action='{% url "borrar_galeria" %}' id='form_borrar_galeria'>
                        {% csrf_token %}
                    </form>
                    <!-- Formulario para Obtener la Galeria (para ser usada en una modal)-->
                    <form id='form_get_galeria'>
                        {% csrf_token %}                        
                    </form>
                    <input type="radio" class="form-check-input" name="selected_galeria" id='selected_galeria' form='form_borrar_galeria' value="{{g.id}}">

                </div>

                <!-- Si la galeria es video, crear container de video -->
                {% elif g.es_video == 1 %}
                <div class="img-container">
                    <!-- Container de Video -->
                    <video id='img-content' controls>
                        <source src="{{g.ruta.url}}" type="video/mp4" media="screen and (min-width:320px)">
                        <source src="{{g.ruta.url}}" type="video/ogg" media="screen and (min-width:320px)">
                        <source src="{{g.ruta.url}}" type="video/avi" media="screen and (min-width:320px)">
                        <source src="{{g.ruta.url}}" type="video/wav" media="screen and (min-width:320px)">
                        <source src="{{g.ruta.url}}" type="video/mkv" media="screen and (min-width:320px)">
                        <source src="{{g.ruta.url}}" type="video/ogg" media="screen and (min-width:320px)">
                        Su navegador no soporta contenido multimedia.
                    </video>

                    <!-- Formulario para Borrar Galeria Video -->
                    <form method='POST' action='{% url "borrar_galeria" %}' id='form_borrar_galeria'>
                        {% csrf_token %}                        
                    </form>
                    <!-- Formulario para Obtener la Galeria (para ser usada en una modal)-->
                    <form id='form_get_galeria'>
                        {% csrf_token %}                        
                    </form>
                    <input type="radio" class="form-check-input" name="selected_galeria" form='form_borrar_galeria' value="{{g.id}}">

                </div>
                {% endif %}

                <!-- Si no hay galerias, imprimir este tag -->          
                {% empty %}
                <h1 style='color:red'>No hay galerias disponibles. Presione Subir Archivo para agregar una galeria.</h1>

            {% endfor %}
        </div>       

        <div class="modal fade" id="modal_galeria_info" tabindex="-1" role="dialog" aria-labelledby="modal_galeria_infoLabel" aria-hidden="true"  style='display: none;'>
            <div class="modal-dialog" role="document" id='datos'>
                <div class="modal-content">


                    <div class="modal-header">
                        <h5 class="modal-title" id="modal_galeria_infoLabel">Detalles de la Galeria</h5>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>


                    <div class="modal-body" id='modal_galeria_body'>
                        <p>{{galeriaNombre}} {{galeriaID}}</p>
                    </div>


                    <div class="modal-footer">                        
                        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                        <button type="button" class="btn btn-primary">Save changes</button>
                    </div>

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

        <!-- Media Content Container - Delete Galeria Button -->
        <button type="submit" class="btn btn-danger delete-btn" form='form_borrar_galeria'>
            <i class="material-icons">delete</i>
        </button>
        <button type="submit" id='info_btn_galeria' class="btn btn-info info-btn" form='form_get_galeria' onclick="get_galeria_details()" data-toggle="modal" data-target="#modal_galeria_info">
            <i class="material-icons">info</i>
        </button>

        <div id='modal-div' name='modal-div'></div>

    </section>    

    <!-- Off Canvas Menu Java Script -->
    <script>
        function openNav() {
            document.getElementById("mySidenav").style.width = "250px";
            document.getElementById("sidemenutrans").style.marginLeft = "250px";
        }

        function closeNav() {
            document.getElementById("mySidenav").style.width = "0";
            document.getElementById("sidemenutrans").style.marginLeft = "0";
        }
    </script>
    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->    
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"
        integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo"
        crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"
        integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6"
        crossorigin="anonymous"></script>
    <script>

        // Submit post on submit        
        $('#form_get_galeria').on('submit', function(event){
            event.preventDefault();
            //get_galeria_details();
        });

        // AJAX for posting
        function get_galeria_details() {
            console.log('get galeria details function running');
            $.ajax({
                url : "{% url 'obtener_galeria' %}", // the endpoint
                type : "GET", // http method
                //dataType: "json",
                //async: true,
                data : {
                    csrfmiddlewaretoken: '{{ csrf_token }}',
                    ajax_galeria: $("input[type=radio][name=selected_galeria]:checked").val()
                }, // data sent with the post request

                // handle a successful response
                success : function(data, response) {
                    //$('#selected_galeria').val(''); // remove the value from the input                 
                    console.log(data);
                    $(".modal-body").html(data);
                    document.getElementById('modal_galeria_info').style.display='block';
                },


                // handle a non-successful response
                error : function(xhr,errmsg,err) {
                    //$('#comment-form').prepend("<div class='alert alert-danger'><button type='button' class='close' data-dismiss='alert'>&times;</button>Oop! Error happend!</div>"); // add the error to the dom
                    console.log(xhr.status + ": " + xhr.responseText); // provide a bit more info about the error to the console
                }
            });
        }
    </script>
</body>


</html>

Tags: divformidtrueinputdatamodelscheck
1条回答
网友
1楼 · 发布于 2024-04-26 05:29:31

我在ajax函数中解决了这个问题:

由此:



                // handle a successful response
                success : function(data, response) {
                    //$('#selected_galeria').val(''); // remove the value from the input                 
                    console.log(data);
                    $(".modal-body").html(data);
                    document.getElementById('modal_galeria_info').style.display='block';
                },

为此:

                    // handle a successful response
                    success : function(data, response) {
                        //$('#selected_galeria').val(''); // remove the value from the input                 
                        console.log(data.galeriaID);
                        document.getElementById('gg').innerHTML = data.galeriaID;
                    },

这很明显,我不敢相信我是个傻瓜。我试图用数据粘贴html,而不是将数据传递给元素

问题解决了

相关问题 更多 >