0

Necesito que sin actualizar la página el mensaje de una caja modal cambie por otro cada vez que se muestre y se cierre. Los mensajes que quiero que se carguen están en la base de datos. El modal está hecho con javascript.

El mensaje que se guarda en la base de datos sale de este formulario:

def porv(request):

    data = None
    global nombre

    nombre = None

    if request.method == 'POST':
        data = request.POST
        nombre = request.POST.get('nombre')

    form=botonForm(data=data)

    if form.is_valid():

        form.save()
        return redirect ('index')


    context = {'form':form,
            'nombre':nombre,}


    return render(request, 'portada.html', context)

Aquí tengo la vista que recoge el campo nombre del otro formulario, que me parece que es donde tengo el fallo ya que solo muestra el último dato de la base de datos según la longitud de la lista:

def indexv(request):

    global nombre

    form=botonForm()

    t2=['1','2','3']


    for i in t2:

        t2=['1','2','3']

        nombre=boton.objects.filter(id=i)




    context={'form':form,
            'nombre':nombre,

            }

    return render(request, 'index.html',context)    

El codigo javascript, y el template donde quiero que se muestre es este:

<!DOCTYPE html>
{% load staticfiles %}

<html>
<head>

    <title>Videos</title>

<link rel="stylesheet" href="{% static 'js/bootstrap.min.css' %}">

<link rel="stylesheet" href="{% static 'css/bootstrap.min.css' %}">
<link rel="stylesheet" href="{% static 'css/estilos.css' %}">
</head>
<body id="">
<div id="updateDetails" class="videoWrapper">


<dialog id="favDialog">
  <section>

{% for boton in nombre %}


      <p id="cancel">{{boton.nombre}}</p>


 {% endfor %}

  </section>

  </dialog>


</div>


<script type="text/javascript">



    (function() {
      var updateButton = document.getElementById('updateDetails');
      var cancelButton = document.getElementById('cancel');
      var dialog = document.getElementById('favDialog');




      // Update button opens a modal dialog
      updateButton.addEventListener('dblclick', function() {
        dialog.showModal();



      });

      // Form cancel button closes the dialog box
      cancelButton.addEventListener('click', function() {
        dialog.close();
      });

    })();


    </script>       


</body>
</html>

¿Cómo hago para que el mensaje de la caja modal cambie dinámicamente sin tener que actualizar la página?

1

2 respuestas 2

0

Podrías utilizar AJAX para realizar la solicitud a tu backend, obtener el mensaje y después, con una función JS, pintar el DOM del navegador.

//Usaré como backend una API libre de prueba, tu deberías poner tu URL de Django
//Haz click en EJECUTAR o Copia todo el HTML guardalo como ejemplo.html y ejecútalo en tu navegador para verlo
<!DOCTYPE html>
<html>
<head>

  <title>Ejemplo</title>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script>
    //En host_backend debes poner tu función Django
    var host_backend = "https://jsonplaceholder.typicode.com/albums/"; 
    
    async function obt_Mensaje() {      
        return await $.ajax({
          type: "GET",
          url: host_backend+String(count),
          success: function(msg) {            
            return msg;
          },
          error: function(XMLHttpRequest, textStatus, errorThrown) {
                console.log(textStatus);
                return false;
          },
      });
    }

    function pintar_Mensaje() {
        //Reinicio el contador para que evite errores al consultar un id que no exista
        if(count == 20) count = 0;
        
        count = count +1;
        
        obt_Mensaje()
        .then(msg =>{
          //Se obtuvo el msg correctamente.
          //Lo pintamos en el DOM 
          //En este caso particular, ya que eso depende de la API a la que consulto, obtengo "title" como Mensaje
          $("#mensaje").text(msg['title']);

        })
        .catch(err =>{
          //No se pudo Obtener el Mensaje
          console.log(err); //Esto hace que se imprima el error en la consola del navegador
        })
    }
    //Este contador es para consultar un dato diferente
    var count = 0;
    //Aquí ejecutara la función cada 1200 milisegundos
    var actualizar_msg = window.setInterval(function() { pintar_Mensaje() }, 1200);
  </script>
</head>
<body>

<h1 id="mensaje"></h1>

</body>
</html>

En tu función Django, devuelve el mensaje como un JSON.

#Importar JSONRender
from rest_framework.renderers import JSONRenderer

#Crea la CLase JSONResponse
class JSONResponse(HttpResponse):
    """
    An HttpResponse that renders its content into JSON.
    """
    def __init__(self, data, **kwargs):
        content = JSONRenderer().render(data)
        kwargs['content_type'] = 'application/json'
        super(JSONResponse, self).__init__(content, **kwargs)

#En el return de tu Funcion, Deberias tener lo siguiente

  return JSONResponse(mensaje, status=200)

0
0

Para la mejor práctica, intente colocar un div dentro de su div de diálogo y agregar texto a eso en su lugar.

<div id = "myDialog"> <div id = "myDialogText"> </div> </div>

y luego configurando el texto de la div interna. Esto hace una mejor separación, por lo que tienes un div para la manipulación del diálogo y un div para visualización de texto. Luego puede configurar el texto con:

jQuery ("# myDialogText"). texto ("su texto aquí");

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.