1

Tengo un modal con el cual cargo archivos en sus distintos tabs, he probado el codigo con las funciones en el codigo de abajo, pero estoy teniendo problemas, ya que por algun motivo no me llama a las funciones, estoy utilizando este modal de bootstrap:

<!--   Modal -->
    <div class="modal fade bd-example-modal-lg" tabindex="-1" role="dialog" id="modalf2">
        <div class="modal-dialog modal-lg"" role="document">
          <div class="modal-content">
            <div class="modal-header">              
              <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                <span aria-hidden="true">&times;</span>
              </button>
            </div>
            <div class="modal-body">
              <div class="modal-body">
                <ul class="nav nav-tabs" id="myTab" role="tablist">
                    De no existir ocultar este tab
                  <li class="nav-item">
                    <a class="nav-link active" id="home-tab" data-toggle="tab" href="#home" role="tab" aria-controls="home" aria-selected="true">
                      <div class="modalbutton">
                        <div>
                        <p class="circModalBtn">
                          <i class="fa fa-object-group fa-2x margenmodal alignicon" aria-hidden="true"></i>
                        </p>
                        </div>
                        <div>
                          <h4>Insctrucción</h4>
                        </div>
                      </div>
                    </a>
                  </li>

                  <li class="nav-item">
                    <a class="nav-link" id="profile-tab" data-toggle="tab" href="#profile" role="tab" aria-controls="profile" aria-selected="false">
                      <div class="modalbutton">
                        <div>
                          <i class="fa fa-flag-o fa-2x margenmodal alignicon" aria-hidden="true"></i>
                        </div>
                        <div>
                          <h4>Detalles</h4></a>
                        </div>
                      </div>
                  </li>
                  <li class="nav-item">
                    <a class="nav-link" id="contact-tab" data-toggle="tab" href="#contact" role="tab" aria-controls="contact" aria-selected="false">
                      <div class="modalbutton">
                        <div>
                          <i class="fa fa-folder-o fa-2x margenmodal alignicon" aria-hidden="true"></i>
                        </div>
                        <div>
                          <h4>Resumen</h4></a>
                        </div>
                      </div>
                  </li>
                  <li class="nav-item">
                    <a class="nav-link" id="example-tab" data-toggle="tab" href="#example" role="tab" aria-controls="example" aria-selected="false">
                      <div class="modalbutton">
                        <div>
                          <i class="fa fa-spinner fa-2x margenmodal alignicon" aria-hidden="true"></i>
                        </div>
                        <div>
                          <h4>Ejemplos</h4></a>
                        </div>
                      </div>
                  </li>
                </ul>
                <div class="tab-content" id="myTabContent">
                  <div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab">     
                        Cargar Aqui el archivo               
                  </div>
                  <div class="tab-pane fade" id="profile" role="tabpanel" aria-labelledby="profile-tab" style="vertical-align: top;">
                        Cargar Aqui el archivo   
                  </div>
                  <div class="tab-pane fade" id="contact" role="tabpanel" aria-labelledby="contact-tab">
                        Cargar Aqui el archivo   
                  </div>
                  <div class="tab-pane fade" id="example" role="tabpanel" aria-labelledby="example-tab">
                        Cargar Aqui el archivo   
                  </div>
                </div>
              </div>
            </div>
            <div class="modal-footer">
              <button type="button" class="btn btn-danger" data-dismiss="modal">Cerrar</button>
            </div>
          </div>
        </div>
      </div>
    </div>

y he cargado el script al principio y al final del html pero no me hace ningún efecto, tampoco obtengo error en la consola y en network no realiza la consulta de los archivos...

he aplicado en el modal.js y sigue sin llamar a las funciones

/**
 * Función para verificar que existe un archivo
 * @param string file           Nombre del archivo a comprobar
 * @param function callbackSi   Ejecutar si existe
 * @param function callbackNo   Ejecutar si no existe
 */
function fileCheck(file, callbackSi, callbackNo) {
$.ajax({
    url: file,
    type: 'HEAD',
    error: function() {
        // El archivo no existe, ejecutar función
        callbackNo();
    },
    success: function() {
        // El archivo sí existe
        callbackSi();
    }
});
}
// Crea un objeto para identificar contenedor y sufijo del archivo
// Servirá armar datos y acceder a los elementos, ejemplo:
// Sección: "#home", Archivo: "./files/ID/ID_archivo.pdf"
let sections = {
home: 'instruccion',
profile: 'glosario',
contact: 'declaraciones',
example: 'ejemplo'
};

$(document).ready(function() {
  $('.btnModal').click(function() {
    // obtener ID
    let id = this.id;
    // Recorrer arreglo con ID de contenedor para verificar
    Array.from(sections).forEach(section => {
        // Crear nombre de archivo
        let file = `./files/${id}/${id}_${sections[section]}.pdf`;
        // Verificar que existe archivo
        fileCheck(file,
            // Función a ejecutar si existe el archivo
            () => {
                // Mostrar PDF
                $('#' + section).html(`<embed src="${file}#toolbar=0&navpanes=0&scrollbar=0" type="application/pdf" width="100%" height="400px" class="margenfilemodal" />`)
                console.log("Se ha clickeado el id " +this.id);
            },
            // Función a ejecutar si no existe el archivo
            () => {
                // Simplemente ocultar sección
                $('#' + section).hide();
            });
    });
});
});

esta clase btnModal la aplico a los div donde contengo texto en ellos y en base a estos id que contienen cada div realizo la consulta en el directorio

 <div class="btnModal" id="l1">108</div>

esto a modo de ejemplo

1 respuesta 1

2

Es necesario verificar que el archivo existe y se puede hacer con una petición AJAX usando el método HEAD. Te recomiendo hacerlo con una función para evitar duplicar código y, aparte de enviar el archivo, también un par de funciones a ejecutar dependiendo del resultado:

/**
 * Función para verificar que existe un archivo
 *
 * @param string file           Nombre del archivo a comprobar
 * @param function callbackSi   Ejecutar si existe
 * @param function callbackNo   Ejecutar si no existe
 */
function fileCheck(file, callbackSi, callbackNo) {
    $.ajax({
        url: file,
        type: 'HEAD',
        error: function() {
            // El archivo no existe, ejecutar función
            callbackNo();
        },
        success: function() {
            // El archivo sí existe
            callbackSi();
        }
    });
}

Aprovecha para optimizar tu código, eliminando todos esos bloques de scripts porque duplicas (tanto código como eventos). Lo mejor es tener solo uno, hasta abajo, justo antes de </body>:

// Crea un objeto para identificar contenedor y sufijo del archivo
// Servirá armar datos y acceder a los elementos, ejemplo:
// Sección: "#home", Archivo: "./files/ID/ID_archivo.pdf"
let sections = {
    home: 'archivo',
    profile: 'detalles'
};

$(document).ready(function() {
    $('.btnModal').click(function() {
        // obtener ID
        let id = this.id;
        // Recorrer arreglo con ID de contenedor para verificar
        Object.keys(sections).forEach(section => {
            // Crear nombre de archivo
            let file = `./files/${id}/${id}_${sections[section]}.pdf`;
            // Verificar que existe archivo
            fileCheck(file,
                // Función a ejecutar si existe el archivo
                () => {
                    // Mostrar PDF
                    $('#' + section).html(`<embed src="${file}#toolbar=0&navpanes=0&scrollbar=0" type="application/pdf" width="100%" height="400px" class="margenfilemodal" style="margin-top: -420px;" />`)
                },
                // Función a ejecutar si no existe el archivo
                () => {
                    // Simplemente ocultar sección
                    $('#' + section).hide();
                });
        });
    });
});

Corrección de error: El objeto sections no es iterable, por lo que Array.from(sections) no da el resultado esperado. En su lugar, debe usarse Object.keys(sections) para poder recorrer cada una de las propiedades como si se tratara de un arreglo.

Como ejemplo, este fragmento de código podría funcionar si se proporciona una ruta válida para cada archivo; al menos se puede comprobar que oculta las secciones cuando no existe el archivo correspondiente.

/**
 * Función para verificar que existe un archivo
 * @param string file           Nombre del archivo a comprobar
 * @param function callbackSi   Ejecutar si existe
 * @param function callbackNo   Ejecutar si no existe
 */
function fileCheck(file, callbackSi, callbackNo) {
$.ajax({
    url: file,
    type: 'HEAD',
    error: function() {
        // El archivo no existe, ejecutar función
        callbackNo();
    },
    success: function() {
        // El archivo sí existe
        callbackSi();
    }
});
}
// Crea un objeto para identificar contenedor y sufijo del archivo
// Servirá armar datos y acceder a los elementos, ejemplo:
// Sección: "#home", Archivo: "./files/ID/ID_archivo.pdf"
let sections = {
  home: 'instruccion',
  profile: 'glosario',
  contact: 'declaraciones',
  example: 'ejemplo'
};

$(document).ready(function() {
  $('.btnModal').click(function() {
    // obtener ID
    let id = this.id;
    // Recorrer arreglo con ID de contenedor para verificar
    Object.keys(sections).forEach(section => {
        // Crear nombre de archivo
        let file = `./files/${id}/${id}_${sections[section]}.pdf`;
        // Verificar que existe archivo
        fileCheck(file,
            // Función a ejecutar si existe el archivo
            () => {
                // Mostrar PDF
                $('#' + section).html(`<embed src="${file}#toolbar=0&navpanes=0&scrollbar=0" type="application/pdf" width="100%" height="400px" class="margenfilemodal" />`)
                console.log("Se ha clickeado el id " +this.id);
            },
            // Función a ejecutar si no existe el archivo
            () => {
                // Simplemente ocultar sección
                $('#' + section).hide();
                console.log('No existe el archivo para la sección: ' + section);
            });
    });
  });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="btnModal" id="l1">108</div>

<!--   Modal -->
    <div class="modal fade bd-example-modal-lg" tabindex="-1" role="dialog" id="modalf2">
        <div class="modal-dialog modal-lg"" role="document">
          <div class="modal-content">
            <div class="modal-header">              
              <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                <span aria-hidden="true">&times;</span>
              </button>
            </div>
            <div class="modal-body">
              <div class="modal-body">
                <ul class="nav nav-tabs" id="myTab" role="tablist">
                    De no existir ocultar este tab
                  <li class="nav-item">
                    <a class="nav-link active" id="home-tab" data-toggle="tab" href="#home" role="tab" aria-controls="home" aria-selected="true">
                      <div class="modalbutton">
                        <div>
                        <p class="circModalBtn">
                          <i class="fa fa-object-group fa-2x margenmodal alignicon" aria-hidden="true"></i>
                        </p>
                        </div>
                        <div>
                          <h4>Insctrucción</h4>
                        </div>
                      </div>
                    </a>
                  </li>

                  <li class="nav-item">
                    <a class="nav-link" id="profile-tab" data-toggle="tab" href="#profile" role="tab" aria-controls="profile" aria-selected="false">
                      <div class="modalbutton">
                        <div>
                          <i class="fa fa-flag-o fa-2x margenmodal alignicon" aria-hidden="true"></i>
                        </div>
                        <div>
                          <h4>Detalles</h4></a>
                        </div>
                      </div>
                  </li>
                  <li class="nav-item">
                    <a class="nav-link" id="contact-tab" data-toggle="tab" href="#contact" role="tab" aria-controls="contact" aria-selected="false">
                      <div class="modalbutton">
                        <div>
                          <i class="fa fa-folder-o fa-2x margenmodal alignicon" aria-hidden="true"></i>
                        </div>
                        <div>
                          <h4>Resumen</h4></a>
                        </div>
                      </div>
                  </li>
                  <li class="nav-item">
                    <a class="nav-link" id="example-tab" data-toggle="tab" href="#example" role="tab" aria-controls="example" aria-selected="false">
                      <div class="modalbutton">
                        <div>
                          <i class="fa fa-spinner fa-2x margenmodal alignicon" aria-hidden="true"></i>
                        </div>
                        <div>
                          <h4>Ejemplos</h4></a>
                        </div>
                      </div>
                  </li>
                </ul>
                <div class="tab-content" id="myTabContent">
                  <div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab">     
                        Cargar Aqui el archivo               
                  </div>
                  <div class="tab-pane fade" id="profile" role="tabpanel" aria-labelledby="profile-tab" style="vertical-align: top;">
                        Cargar Aqui el archivo   
                  </div>
                  <div class="tab-pane fade" id="contact" role="tabpanel" aria-labelledby="contact-tab">
                        Cargar Aqui el archivo   
                  </div>
                  <div class="tab-pane fade" id="example" role="tabpanel" aria-labelledby="example-tab">
                        Cargar Aqui el archivo   
                  </div>
                </div>
              </div>
            </div>
            <div class="modal-footer">
              <button type="button" class="btn btn-danger" data-dismiss="modal">Cerrar</button>
            </div>
          </div>
        </div>
      </div>
    </div>

5
  • he agregado un codigo del modal, por algun motivo no me toma el js, y ademas no me da errores el 23 feb. 2021 a las 15:22
  • he editado la pregunta y eliminado la respuesta Triby para ser mas claro y como me recomendaste detallar mas, por otro lado para no armar un desorden en el post por mi parte, gracias por el consejo el 23 feb. 2021 a las 15:40
  • @TranceCode, error mío, revisa la respuesta actualizada. Corregí el error y, debajo, explico de qué se trataba.
    – Triby
    el 23 feb. 2021 a las 15:55
  • Muchas gracias, me toma el hide, pero trato de aplicarlo para esconder el tab modificando esta parte y no lo hace por algun motivo () => { // Simplemente ocultar sección $('#' + section + '-tab').hide(); console.log('No existe el archivo para la sección: ' + section); }); es decir esconder por ejemplo profile-tab el 23 feb. 2021 a las 17:09
  • he logrado solucionar aplicando clases al class de cada tabs y aplicando este pequeño cambio $('.' + section ).hide(); problema resuelto, muchas gracias amigo por la ayuda el 23 feb. 2021 a las 18:48

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.