2

Poseo el siguiente codigo, (Solo Html y Js) no logro hacer funcionar el POPOVER de Bootstrap dentro del propio aplicativo, colocando un boton desde afuera si funciona pero dentro del aplicativo no da resultados y tengo ya casi una semana y no logro hacerlo funcionar, espero alguien me ayude a encontrar el error. Gracias

//DEFINIENDO VARIABLES GLOBALES
br = "<br>";
olli = "<ol><li>";
liol = "</li></ol>";
olc = "</li></ol>";
ulli = "<ul><li>";
liul = "</li></ul>";
ulc = "</li></ul>";
eli = "<li>";
lic = "</li>";
lili = lic + eli;

ml = " Mililitros";
mls = " Mililitro";
li = " Litros";
lis = " Litro";
gr = " Gramos";
grs = " Gramo";
mg = " Miligramos";
mgs = " Miligramo";
kl = " Kilogramos";
kls = " Kilogramo";

tca = "<b>Para hacer ";
tcc = " se requieren:</b>";
sup = 'Seleccione un Producto...';

// ARREGLO
producto = [
    /*
    a: Abreviacion Formula
    n: Nombre
    v: valor inicial
    t: tipo de producto true para liq y false para sol
    az: azul
    ro: rojo
    am: amarillo
    bla: blanco
        0 = OXI
        1 = COR
        2 = RADIOACTIVO
        3 = NO AGUA
        4 = RIESGO BIOLOGICO
        5 = NADA

    */
    { n: 'Prueba Entrada', az: 1, ro: 0, am: 0, bla: 0, c: ' ', v: 0, t: 'sol' },
    ];
    producto.sort(function (a, b) {
    if (a.n > b.n) {
        return 1;
    }
    if (a.n < b.n) {
        return -1;
    }
    // a must be equal to b
    return 0;
});

// ARREGLO
componente = new Array();
/*
a: Abreviacion Formula
n: Nombre con espacio igual espacio ( = )
v: valor inicial
t: tipo de componente true para liq y false para sol
*/
componente[00] = {
    n: 'Agua H<sub>2</sub>O = ',
    v: 0,
    t: "liq",
    c: "El agua (H<sub>2</sub>O) es un compuesto químico inorgánico formado por dos átomos de hidrógeno (H) y uno de oxígeno (O).​ Esta molécula es esencial en la vida de los seres vivos, al servir de medio para el metabolismo de las biomoléculas, se encuentra en la naturaleza en sus tres estados y fue clave para su formación. Hay que distinguir entre el agua potable y el agua pura, pues la primera es una mezcla que también contiene sales en solución; es por esto que en laboratorio y en otros ámbitos se usa agua destilada.",
};
componente[01] = {
    n: 'Texapon (Lauril Sulfato Sodico) = ',
    v: 0,
    t: "sol",
    c: "Este palabra presenta una notable insensibilidad frente a los endurecedores del agua e incluso a bajas temperaturas es capaz de desarrollar todo su poder espumante.Su alta compatibilidad con la piel y su capacidad humectante y emulsionante, hacen que sea una de las materias primas más usadas en cosmética. A estas propiedades hay que sumarle su ligero olor que permite que sea perfumado sin ningún problema. En cuanto a su coloración, si se presenta en forma de pasta es levemente turbio, pero una vez diluido toma un aspecto claro más o menos transparente según el grado de impurezas; esto permite que también sea fácilmente coloreado.",
};
componente[02] = {
    n: 'Alcohol Cetilico -  CH<sub>3</sub>(CH<sub>2</sub><sub>15</sub>OH = ',
    v: 0,
    t: "liq",
    c: "El alcohol cetílico, también conocido como 1-hexadecanol o alcohol palmitílico, es un alcohol graso con la fórmula molecular CH<sub>3</sub>(CH<sub>2</sub><sub>15</sub>OH. A temperatura ambiente el alcohol cetílico toma la forma de cera blanca o en copos.",

};


function tratamiento_n(){
    
    for (ab in componente)
    {
        //componente[ab].n = "<b>" + componente[ab].n+"</b>";
        componente[ab].n = "<button type='button' class='btn btn-default' data-toggle='popover' data-placement='right' title='popover on right' data-content='Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.'>popover on right</button>";
       
    }
    return componente[ab].n
}
tratamiento_n();

function formulas() {

    var resultado = "";
    resultado += "<div class=\"container-fluid\">";
    resultado += "<div class=\"row\">";
    resultado += "<div class=\"col-xs-12 col-sm-6\">";
    resultado += "<div id=\"lista\"><\/div>";
    resultado += "<\/div>";
    resultado += "<div class=\"col-xs-12 col-sm-6 text-right \"><a href='javascript: window.print(); void 0;'><button type=\"button\" class=\"btn btn-danger btn-primary btn-md\">Imprimir <span class=\"glyphicon glyphicon-print\" aria-hidden=\"true\"><\/button><\/a><\/div>";
    resultado += "<div class=\"clearfix\"><\/div>";

    
    resultado += "        <\/div>";
   

    resultado += "<div class=\"panel panel-info\">";
    resultado += "<div class=\"panel-heading\">";
    resultado += "<h1 class=\"text-uppercase panel-title\" id='formula' name=\"titulo\"><\/h1>";
    resultado += "<form class=\"form-inline\">";
    resultado += "<div class=\"form-group\">";
    resultado += "<\/div>";
    resultado += "<\/form>";
    resultado += "<form class=\"form-inline\">";
    resultado += "<div class=\"form-group\">";
    resultado += "<label id=\"tipo\" for=\"exampleInputName2\"><\/label>";
    resultado += "<input class=\"form-control\" placeholder=\"Cantidad de Producto\" id=\"entrada\" onkeyup=\"validarSiNumero(this.value);\" \/>";
    
    resultado += "<\/div>";
    resultado += "<\/form>";

resultado += "<div class=\"panel-body\">";
    resultado += "<div class=\"clase1\" id='nfpa'><\/div>";
    resultado += "<div data-toggle='popover' class=\"clase1\" id='salida'><\/div>";
    resultado += "<\/div>";
    resultado += "<\/div>";
    resultado += "<div class=\"well\" id='procedimiento'><\/div>";
    resultado += "<\/div>";

    document.getElementById('contenido').innerHTML = resultado;

    document.getElementById('tipo').innerHTML = "A la Espera de su Seleccion";
}

function salidaproducto() {
    var select = document.createElement('select');
    select.id = 'mySelect';
    select.classList.add('form-control');
    select.addEventListener('change', selector);
    var option = document.createElement('option');
    option.disabled = true;
    option.selected = true;
    option.textContent = sup;
    select.appendChild(option);
    for (li in producto) {
        option = document.createElement('option');
        option.textContent = producto[li].n;
        select.appendChild(option);

    }

    document.getElementById('lista').appendChild(select);

}

function selector() {

    fo = document.getElementById('mySelect').value;
    document.getElementById('formula').innerHTML = "<b>"+fo+"</b>";
    document.getElementById('entrada').value = "";
    document.getElementById('salida').innerHTML = "";
    document.getElementById('procedimiento').innerHTML = "";
    productoSeleccionado = producto.find(x => x.n === this.value);
    tipoEl = document.getElementById('tipo');
    if (productoSeleccionado) {
        tipoEl.innerText = (productoSeleccionado.t === 'liq' ?
            'Indique la cantidad de LITROS de' + ' ' + fo + ': ' : 'Indique la cantidad de KILOS de' + ' ' + fo + ': ');
    } else {
        tipoEl.innerText = '';
    }

    tipoproducto = "";
    tipoproducto = productoSeleccionado.t;
    if (tipoproducto == "liq"){
        tipoproducto = " Litros de ";
    }
    else {
        tipoproducto = " Kilos de ";
    }

}
    
function entrada() {
    if (UI = document.getElementById('entrada')) { eval(document.getElementById('formula').textContent.toLowerCase().replace(/ /gi, '_') + '()'); }
}

//VALIDAR SI VALOR INGRESADO ES VALIDO
function validarSiNumero(UI) {


    if (!/^([0.1-9])*$/.test(UI)) {
        var nada = "<div class='alert alert-info' role='alert'> <span class='glyphicon glyphicon-alert' aria-hidden='true'></span> </span> <span class='sr-only'>Error:</span> <strong> ALGO HA OCURRIDO..! </strong> El Valor: <b>" + UI + "</b> no es un numero valido, intente nuevamente utilizando numeros desde <strong> 0.1 </strong> hasta la cantidad de " + tipoproducto + " <strong>" + fo.toUpperCase() + " </strong> que usted desee fabricar.</div>";
        document.getElementById('salida').innerHTML =
            nada;
        document.getElementById("procedimiento").innerHTML = "";
    } else if (UI === "") {
        var nada = "<div class='alert alert-warning' role='alert'> <span class='glyphicon glyphicon-exclamation-sign' aria-hidden='true'></span> <span class='sr-only'>Error:</span><strong> LO SENTIMOS..! </strong> Pero usted no ha escrito nada, intente nuevamente utilizando numeros desde <strong> 0.1 </strong> hasta la cantidad de " + tipoproducto + " <strong>" + fo.toUpperCase() + "</strong> que usted desee fabricar.</div>";
        document.getElementById('salida').innerHTML =
            nada;
        document.getElementById("procedimiento").innerHTML = "";
    } else if (UI == 0) {
        var nada = "<div class='alert alert-danger' role='alert'> <span class='glyphicon glyphicon-warning-sign' aria-hidden='true'></span> </span> <span class='sr-only'>Error:</span> <strong> LO SENTIMOS..! </strong> Pero Cero (0) no es un numero valido, intente nuevamente utilizando numeros desde <strong> 0.1 </strong> hasta la cantidad de " + tipoproducto + " <strong>" + fo.toUpperCase() + "</strong> que usted desee fabricar.</div>";
        document.getElementById('salida').innerHTML =
            nada;
        document.getElementById("procedimiento").innerHTML = "";
    } else if (UI < 0.1) {
        var nada = "<div class='alert alert-danger' role='alert'> <span class='glyphicon glyphicon-warning-sign' aria-hidden='true'></span> </span> <span class='sr-only'>Error:</span> <strong> LO SENTIMOS..! </strong> El numero que ingreso es muy pequeño, intente nuevamente utilizando numeros desde <strong> 0.1 </strong> hasta la cantidad de " + tipoproducto + " <strong>" + fo.toUpperCase() + "</strong> que usted desee fabricar.</div>";
        document.getElementById('salida').innerHTML =
            nada;
        document.getElementById("procedimiento").innerHTML = "";
    }
    else if (UI === "010101100100010101001110010001010101101001010101010001010100110001000001") {
        var nada = "<div class='alert alert-warning' role='alert'></div><div class='alert alert-info text-center' role='alert'><span class='glyphicon glyphicon-star' aria-hidden='true'></span> <span class='glyphicon glyphicon-star' aria-hidden='true'></span> <span class='glyphicon glyphicon-star' aria-hidden='true'></span> <span class='glyphicon glyphicon-star' aria-hidden='true'></span> <span class='glyphicon glyphicon-star' aria-hidden='true'></span> <span class='glyphicon glyphicon-star' aria-hidden='true'></span> <span class='glyphicon glyphicon-star' aria-hidden='true'></span></div><div class='alert alert-danger' role='alert'></div>";
        document.getElementById('salida').innerHTML =
            nada;
        document.getElementById("procedimiento").innerHTML = "";
    }
    else {
        entrada();
    }

}


// CICLO 
function tratamiento(UI) {
    for (xy in componente) {

            tt = "";
            uu = "";
          
        
        if (componente[xy].t == "liq") { 
        
          if (componente[xy].v === 1) {
              uu = " Litro ";
              tt = " Mililitro ";
          } else {
              uu = " Litros ";
              tt = " Mililitros ";
          }
 } 
        else { 
       
          if (componente[xy].v === 1) {
              uu = " Kilo ";
               tt = " Gramo ";
          } else {
              uu = " Kilos ";
               tt = " Gramos ";
          }
 }
        
        if (UI <= 1) { componente[xy].v = (componente[xy].v * 1000).toFixed(2) + tt;}
        
    

        else {
             if (componente[xy].v * 1000 >= 1000) { componente[xy].v = (componente[xy].v).toFixed(2) + uu; }
            else {
                componente[xy].v = (componente[xy].v * 1000).toFixed(2) + tt;
            }
        }

    }
    return componente[xy].v;
}



function seleccion() {
    var selec = document.getElementById("mySelect").value;
    document.getElementById("formula").innerHTML = selec;
}



//DEFINIENDO FUNCIONES
//PRUEBA
function prueba_entrada() {
    var UI = document.getElementById('entrada').value;
    if (isNaN(UI)) { return false; }
    componente[00].v = UI * 91.8 / 100;
    componente[01].v = UI * 3 / 100;
    tratamiento(UI);
    resul =
        tca + UI + tipoproducto + fo + tcc + olli +
        componente[00].n + componente[00].v + lili +
        componente[01].n + componente[01].v + liol;

    var procedimiento = "<h3>PROCEDIMIENTO:</h3> PRODUCTO DE PRUEBA";

    document.getElementById('salida').innerHTML = resul,
        document.getElementById('procedimiento').innerHTML = procedimiento;
}

    
    function entrada() {
    if (UI = document.getElementById('entrada')) { eval(document.getElementById('formula').textContent.toLowerCase().replace(/ /gi, '_') + '()'); }
}
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
</head>
<body LANG="es-VE" DIR="LTR" onload="formulas(), salidaproducto();">

 <div class="col-xs-12">
                
                <div data-toggle='popover' class="clase2" id="contenido"></div>
            </div>
            
</div>

<button type='button' class='btn btn-default' data-toggle='popover' data-placement='right' title='popover on right' data-content='Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.'>popover on right</button>

<script>
    $(document).ready(function () {
        $('[data-toggle="popover"]').popover();
    });
</script>
</body>
</html>

2
  • Y donde es que lo quieres?
    – Legna
    Commented el 4 abr. 2018 a las 23:14
  • Cuando se selecciona el producto y se coloca el numero para que efectue el calculo el sistema muestra una lista donde estan en esta prueba 2 botones pero no funciona el popover dentro de la lista, pero si fuera de ella, tal como se puede apreciar en el ejemplo que deje. Commented el 4 abr. 2018 a las 23:26

1 respuesta 1

3

Basando en el ejemplo que pones al final, tu solamente tienes esta parte detro de tu función tratamiento_n():

<button type='button' class='btn btn-default' data-toggle='popover' data-placement='right' title='popover on right' data-content='Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.'>popover on right</button>

Pero aun te falta esta parte, que es lo que hace que se visualice el popover al dar clic en el botón.

<script>
    $(document).ready(function () {
        $('[data-toggle="popover"]').popover();
    });
</script>

En resumen, te falta agregar esta línea en tu código, en tu función prueba_entrada():

$('[data-toggle="popover"]').popover(); 

Al final que quede asi:

function prueba_entrada() {
    var UI = document.getElementById('entrada').value;
    if (isNaN(UI)) {
        return false;
    }
    componente[00].v = UI * 91.8 / 100;
    componente[01].v = UI * 3 / 100;
    tratamiento(UI);
    resul =
        tca + UI + tipoproducto + fo + tcc + olli +
        componente[00].n + componente[00].v + lili +
        componente[01].n + componente[01].v + liol;

    var procedimiento = "<h3>PROCEDIMIENTO:</h3> PRODUCTO DE PRUEBA";

    document.getElementById('salida').innerHTML = resul,
        document.getElementById('procedimiento').innerHTML = procedimiento;

    //Linea agregada
    $('[data-toggle="popover"]').popover();
}

Espero haber entendido tu problemática y te sirva!

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.