none
Insertando html dinámico (acordion bootstrap) RRS feed

  • Pregunta

  • Buenas,

    Tengo la estructura de un arcordion de bootstrap en mi html, tengo el script bootstrap.js para su funcionamiento y todo va perfecto. Ahora sucede que debo agregar otros acordiones vía javascript y la estructura de estos se forma correctament pero no funciona el efecto collapse, imagino que se debe a que el script bootstrap.js se ejecutó cuando estos acordiones no existían y por ende no tendrán el efecto deseado. Mi primer intento ha sido volver a insertar el script bootstrap.js desde código javascript y con esto ya funciona pero el efecto collapse de los que ya existían se duplica, como si se hubiera hecho doble clic sobre ellos.

    Favor si me orientan.


    lunes, 2 de abril de 2018 19:50

Respuestas

  • No tiene que insertar bootstrap.js nuevamente.  Como ya vio, eso es incorrecto.  Lo único que tiene que hacer es correr una línea de código JS bien sencilla.

    Dice que recibe esa vista parcial via AJAX.  ¿Correcto?  Entonces puede hacer algo así:

    //Muestro aquí nada más la función de éxito de AJAX
    , function(data) {
        var contenedor = $('#DivDondeInsertamosLaVistaParcial');
        //Data sería HTML.  La vista parcial.
        var nuevo = $(data);
        //Insertamos la vista parcial en el HTML.
        contenedor.append(nuevo);
        //Habilitamos los collapse que hayan en la vista parcial.
        $('.collapse', nuevo).collapse();
    }

    Lo que está en negrita es en última instancia la solución a su problema.


    Jose R. MCP
    Code Samples

    • Marcado como respuesta eduar2083 martes, 3 de abril de 2018 17:15
    martes, 3 de abril de 2018 4:02

Todas las respuestas

  • Buenas,

    Tengo la estructura de un arcordion de bootstrap en mi html, tengo el script bootstrap.js para su funcionamiento y todo va perfecto. Ahora sucede que debo agregar otros acordiones vía javascript y la estructura de estos se forma correctament pero no funciona el efecto collapse, imagino que se debe a que el script bootstrap.js se ejecutó cuando estos acordiones no existían y por ende no tendrán el efecto deseado. Mi primer intento ha sido volver a insertar el script bootstrap.js desde código javascript y con esto ya funciona pero el efecto collapse de los que ya existían se duplica, como si se hubiera hecho doble clic sobre ellos.

    Favor si me orientan.


    Eduar puedes exponer el código de los bloques donde tienes el collapse?

    cuando hay varios bloques donde tienes colapse se usa este

    lunes, 2 de abril de 2018 19:55
  • El Html de los acordiones dinámicos se genera a partir de una vista parcial

    @model FNT_BusinessEntities.Interface.DTODetalle_asignatura
    
    <div class="table-responsive font-70pct acordion-asignatura">
        <div class="acordion-evaluador">
            <div class="acordion-head">
                <a href="javascript:;" class="acordion-icon" data-toggle="collapse" data-href="@string.Format("#Asig_{0}_{1}_{2}", Model.cod_area, Model.cod_curso, Model.cod_detalle_asignatura)">
                    <span class="title">@string.Format("#{0}", Model.cod_detalle_asignatura)</span>
                    <span class="title" style="text-align:center; width: 90%;">ASIGNATURA EXTERNA</span>
                    <span class="imagenCabeceraAcordeon"></span>
                </a>
            </div>
            <div class="acordion-body collapse" id="@string.Format("Asig_{0}_{1}_{2}", Model.cod_area, Model.cod_curso, Model.cod_detalle_asignatura)">
                <div class="row mt-7">
                    <div class="col-sm-4">
                        <div class="form-group">
                            <div class="text-right"><label>INSTITUCIÓN EXTERNA:</label></div>
                        </div>
                    </div>
                    <div class="col-sm-8">
                        <div class="form-group">
                            <input type="text" disabled class="form-control" value="@Model.desc_empresa" />
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-sm-4">
                        <div class="form-group">
                            <div class="text-right"><label>CARRERA EXTERNA:</label></div>
                        </div>
                    </div>
                    <div class="col-sm-8">
                        <div class="form-group">
                            <input type="text" disabled class="form-control" value="@Model.desc_carrera_otra" />
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-sm-4">
                        <div class="form-group">
                            <div class="text-right"><label>ASIGNATURA EXTERNA:</label></div>
                        </div>
                    </div>
                    <div class="col-sm-8">
                        <div class="form-group">
                            <input type="text" disabled class="form-control" value="@Model.desc_asignatura_otra" />
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-sm-4">
                        <div class="form-group">
                            <div class="text-right"><label>ARCHIVO ADJUNTO SÍLABO:</label></div>
                        </div>
                    </div>
                    <div class="col-sm-8">
                        <div class="form-group">
                            <label>@Model.nombre_doc_silabo</label>
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-sm-4">
                        <div class="form-group">
                            <div class="text-right"><label>ARCHIVO ADJUNTO CERTIFICADO:</label></div>
                        </div>
                    </div>
                    <div class="col-sm-8">
                        <div class="form-group">
                            <label>@Model.nombre_doc_certif</label>
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-sm-4">
                        <div class="form-group">
                            <div class="text-right"><label>AÑO DE SÍLABO:</label></div>
                        </div>
                    </div>
                    <div class="col-sm-2">
                        <div class="form-group">
                            <input type="text" disabled class="form-control text-center" value="@Model.anio_silabo" />
                        </div>
                    </div>
                    <div class="col-sm-6"></div>
                </div>
                <div class="row">
                    <div class="col-sm-4">
                        <div class="form-group">
                            <div class="text-right"><label>AÑO DE CERTIFICADO:</label></div>
                        </div>
                    </div>
                    <div class="col-sm-2">
                        <div class="form-group">
                            <input type="text" disabled class="form-control text-center" value="@Model.anio_certif" />
                        </div>
                    </div>
                    <div class="col-sm-6"></div>
                </div>
                <div class="row">
                    <div class="col-sm-4">
                        <div class="form-group">
                            <div class="text-right"><label>CICLO:</label></div>
                        </div>
                    </div>
                    <div class="col-sm-2">
                        <div class="form-group">
                            <input type="text" disabled class="form-control text-center" value="@Model.ciclo" />
                        </div>
                    </div>
                    <div class="col-sm-6"></div>
                </div>
                <div class="row">
                    <div class="col-sm-4">
                        <div class="form-group">
                            <div class="text-right"><label>NOTA:</label></div>
                        </div>
                    </div>
                    <div class="col-sm-2">
                        <div class="form-group">
                            <input type="text" disabled class="form-control text-center" value="@Model.nota" />
                        </div>
                    </div>
                    <div class="col-sm-6"></div>
                </div>
                <div class="row">
                    <div class="col-sm-12">
                        <div class="pull-right">
                            <input type="button" class="btn btn-lg btn-primary" value="Eliminar" />
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    Cuando la petición ajax devuelve el html generado, lo establece mediante la siguiente línea

    $('#contenedorDetalle_' + codArea + '_' + codCurso).append(html);


    Siendo el contenedorDetalle un div para todos los acordiones.

    <div id="@string.Format("contenedorDetalle_{0}_{1}", area.CodArea, curso.CodCurso)">
    </div>

    lunes, 2 de abril de 2018 20:07
  • Puedo hacer que el script se ejecute sólo en el ámbito de un div y que no afecte al resto del html?

    Es posible hacer esto??

    lunes, 2 de abril de 2018 21:10
  • No tiene que insertar bootstrap.js nuevamente.  Como ya vio, eso es incorrecto.  Lo único que tiene que hacer es correr una línea de código JS bien sencilla.

    Dice que recibe esa vista parcial via AJAX.  ¿Correcto?  Entonces puede hacer algo así:

    //Muestro aquí nada más la función de éxito de AJAX
    , function(data) {
        var contenedor = $('#DivDondeInsertamosLaVistaParcial');
        //Data sería HTML.  La vista parcial.
        var nuevo = $(data);
        //Insertamos la vista parcial en el HTML.
        contenedor.append(nuevo);
        //Habilitamos los collapse que hayan en la vista parcial.
        $('.collapse', nuevo).collapse();
    }

    Lo que está en negrita es en última instancia la solución a su problema.


    Jose R. MCP
    Code Samples

    • Marcado como respuesta eduar2083 martes, 3 de abril de 2018 17:15
    martes, 3 de abril de 2018 4:02