Foros del Web » Programando para Internet » Javascript »

Actualizar contenido de un modal

Estas en el tema de Actualizar contenido de un modal en el foro de Javascript en Foros del Web. Hola amigos. Tengo un formulario, que dependiendo el resultado de la suma de los campos, mostrará un div u otro. Este div está en un ...
  #1 (permalink)  
Antiguo 12/01/2016, 09:49
 
Fecha de Ingreso: enero-2016
Mensajes: 3
Antigüedad: 3 años, 10 meses
Puntos: 0
Actualizar contenido de un modal

Hola amigos.

Tengo un formulario, que dependiendo el resultado de la suma de los campos, mostrará un div u otro. Este div está en un modal en Bootstrap, y lo que quiero es que cuando se haga clic en el botón cree un contenido, y si hay un contenido creado, lo sustituya... no sé si me explico bien. El código es el siguiente:

Código:
<script>
        function motiva(valor1,valor2,valor3,valor4) {
            var total;
            total = parseInt(valor1.value)+parseInt(valor2.value)+parseInt(valor3.value)+parseInt(valor4.value);
            
            if (total < 5) {
                var div1 = document.createElement("div");
                div1.setAttribute("id","baja");
                div1.innerHTML = "<div>Contenido de resultado 1 en modal</div>";
                document.body.appendChild(div1);
            }
            
            else if (total < 7) {
                var div1 = document.createElement("div");
                div1.setAttribute("id","media");
				div1.innerHTML = "<div>Contenido de resultado 2 en modal</div>";
                document.body.appendChild(div1);
            }
            
            else if (total >6){
                var div1 = document.createElement("div");
                div1.setAttribute("id","media");
				div1.innerHTML = "<div>Contenido de resultado 3 en modal</div>";
                document.body.appendChild(div1);
            }
            
        }
</script>
Y el botón es este:
Código:
<input type="button" name="Ver total" value="Resultado" onclick="motiva(valor1,valor2,valor3,valor4)" data-toggle="modal" data-target="#modalFormulario">
El problema es que si carga un resultado, aunque modifique el formulario para que de otro, al volverle a dar siempre muestra el primero que ha creado...

Gracias!
  #2 (permalink)  
Antiguo 12/01/2016, 10:07
 
Fecha de Ingreso: junio-2011
Mensajes: 289
Antigüedad: 8 años, 5 meses
Puntos: 15
Respuesta: Actualizar contenido de un modal

No tengo el tiempo de recrear el código pero puede ser por que usas

Código:
appendChild()
Con eso agregas al final del modal tu resultado... y si el tamaño es menor a tu contenido (y el css conspira) siempre te mostrará el priemer resultado


EDITO:


= lo recree xD

Cuando usas

Código Javascript:
Ver original
  1. var div1 = document.createElement("div");
  2.                 div1.setAttribute("id","media");
  3.         div1.innerHTML = "<div>Contenido de resultado 2 en modal</div>";
  4.                 document.body.appendChild(div1);

Creas un DIV #media y le insertas un div nuevo con el texto.... el append te irá creando DIV hacia abajo. Si modificas el append tienes el problema que = tienes 3 div con distinto ID, es decir, siempre te mostraría (en el peor de los casos) los div baja media y alta...

Prueba esto para ver si es lo que buscas

Código HTML:
Ver original
  1. <input type="button" name="Ver total" value="Resultado" onclick="motiva('1','1','1','1')" data-toggle="modal" data-target="#modalFormulario">

Código Javascript:
Ver original
  1. function motiva(valor1,valor2,valor3,valor4) {
  2.             var total;
  3.             total = parseInt(parseInt(valor1)+parseInt(valor2)+parseInt(valor3)+parseInt(valor4));
  4.             total+=Math.random()*2;
  5.             var div1 = document.createElement("div");
  6.             div1.setAttribute("id","contenido");
  7.             document.body.appendChild(div1);
  8.            
  9.             if (total < 5) {
  10.                $("#contenido").html("<div>Contenido de resultado 1 en modal</div>")
  11.             }
  12.  
  13.             else if (total < 7) {
  14.                $("#contenido").html("<div>Contenido de resultado 2 en modal</div>")
  15.             }
  16.            
  17.             else if (total >6){
  18.                $("#contenido").html("<div>Contenido de resultado 3 en modal</div>")
  19.             }
  20.            
  21.         }

Última edición por ZedGe1505; 12/01/2016 a las 10:38
  #3 (permalink)  
Antiguo 13/01/2016, 04:39
 
Fecha de Ingreso: enero-2016
Mensajes: 3
Antigüedad: 3 años, 10 meses
Puntos: 0
Respuesta: Actualizar contenido de un modal

ok, pero en el botón quiero meter el atributo onclick="motiva(valor1,valor2,valor3,valor3)" y al picar no lanza el modal. Sí lo hace cuando introduces valores numéricos. ¿por qué puede ser?
  #4 (permalink)  
Antiguo 13/01/2016, 06:35
 
Fecha de Ingreso: junio-2011
Mensajes: 289
Antigüedad: 8 años, 5 meses
Puntos: 15
Respuesta: Actualizar contenido de un modal

Por que con

Código Javascript:
Ver original
  1. total = parseInt(parseInt(valor1)+parseInt(valor2)+parseInt(valor3)+parseInt(valor4));

necesitas que sean números, usa el inspeccionador de elementos para ver que elementos estás pasandole o pone el código que te genera esos valores "valor"
  #5 (permalink)  
Antiguo 14/01/2016, 07:02
 
Fecha de Ingreso: enero-2016
Mensajes: 3
Antigüedad: 3 años, 10 meses
Puntos: 0
Respuesta: Actualizar contenido de un modal

Claro, es un valor de un formulario <input type="radio" name="valor1" value="1"> que luego suma el script en la var "total"
  #6 (permalink)  
Antiguo 14/01/2016, 07:34
 
Fecha de Ingreso: junio-2011
Mensajes: 289
Antigüedad: 8 años, 5 meses
Puntos: 15
Respuesta: Actualizar contenido de un modal

Si es de campos radio, en vez de pasarlo como parámetros hace que la función motiva obtenga el valor directamente dentro de ella de todo los campos

Código Javascript:
Ver original
  1. function motiva(){
  2.  
  3. valor = document.getElementById('id_del_input').value;  
  4. //Or
  5. valor2 = document.getElementById('id_del_input').checked
  6.  
  7. total = valor+.....
  8. }

Etiquetas: bootstrap, formulario, modal
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 23:03.