0

Deseo actualizar una parte de una página al hacer click en un checkbox. En el caso de desmarcarla, que muestre solo una página de default. Sin embargo, algo falla. Les dejo el código:

Principal:

 <html>
    <head>
        <script type="text/javascript" src="resources/jquery.js"></script>
        <script>
            $(document).ready(function(){
                $('#1').change(function () {
                $("#contenido").load("default.html");
                                             });

                $('#2').change(function(){
                $("#contenido").load("pagina1.html");
                                             });

                $('#3').change(function(){
                $("#contenido").load("pagina2.html");
                                             });
                                        });
        </script>
    </head>
    <body>
    <input type="checkbox" id="1" autocomplete="off"> 
    <input type="checkbox" id="2" autocomplete="off">
    <input type="checkbox" id="3" autocomplete="off">
        <br>
        <table border="1">
            <tr>
                <td>
                    Acá se muestra
                </td>
                <td id ="contenido">
                </td>
            </tr>
        </table>
    </body>
</html>

Saludos y desde ya, gracias.-

1
  • Hago click en el checkbox y nada sucede.
    – Vhalianna
    Commented el 18 dic. 2020 a las 17:15

1 respuesta 1

1

No sé a que se debe tu problema porque no compartiste un error, pero aquí te muestro todo lo que podría ser basándome en la información que has dado.

  1. Puede tratarse de un error debido a que estás usando la versión de jQuery Slim que no cuenta con Ajax y por lo tanto la función load() no será reconocida.
  2. Estás llamando el archivo html desde tu directorio de archivos y la documentación dice que load debe ser usado para llamar archivos que se encuentren en un servidor ya que la mayoría de navegadores cuentan con sistemas de seguridad para impedir ese tipo de cosas, aunque si ejecutas tu navegador desde la línea de comandos con un flag que varía según el navegador que usas podrías desactivar esta medida de seguridad para poder verificar si tu aplicación funciona. Sin embargo yo prefiero simplemente pasar a load un enlace a un sitio web para verificar esto como te haré ver en el siguiente ejemplo.

Ejemplo de código:

  $(document).ready(function(){

      $('#1').change(function () {
          if (this.checked) {
              // Se debe cargar una página hosteada en un servidor no en un archivo y se puede especificar una clase o id.
              $("#contenido").load("https://montesariel.com/es/contactos .heading");
          }
          if (!this.checked) {
              // Elimina el contenido si se desmarca la selección.
              $("#contenido").html("");
          }
      });

  });
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

</head>

<body>

  <input type="checkbox" id="1" autocomplete="off"> 
  <br>
  <table border="1">
      <tr>
          <td>
              Acá se muestra
          </td>
          <td id ="contenido">
          </td>
      </tr>
  </table>

  <!-- jQuery completo con ajax -->
  <script src="https://code.jquery.com/jquery-3.5.1.js" integrity="sha256-QWo7LDvxbWT2tbbQ97B53yJnYU3WhH/C8ycbRAkjPDc=" crossorigin="anonymous"></script>

</body>
</html>

Forma correcta de unir el código anterior:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

</head>

<body>

    <input type="checkbox" id="1" autocomplete="off"> 
    <br>
    <table border="1">
        <tr>
            <td>
                Acá se muestra
            </td>
            <td id ="contenido">
            </td>
        </tr>
    </table>

    <!-- jQuery completo con ajax -->
    <script src="https://code.jquery.com/jquery-3.5.1.js" integrity="sha256-QWo7LDvxbWT2tbbQ97B53yJnYU3WhH/C8ycbRAkjPDc=" crossorigin="anonymous"></script>

    <script>
        $(document).ready(function(){
            $('#1').change(function () {
                if (this.checked) {
                    // Se debe cargar una página hosteada en un servidor no en un archivo y se puede especificar una clase o id.
                    $("#contenido").load("https://montesariel.com/es/contactos .heading");
                }
                if (!this.checked) {
                    // Elimina el contenido si se desmarca la selección.
                    $("#contenido").html("");
                }
            });
        });
    </script>

</body>
</html>
5
  • Hola! muchas gracias por tu respuesta. Ya me quedó claro lo que estaba haciendo mal. Ahora el tema es que si o sí al menos para la demostración, debo contar con archivos locales. Me explicarías más en detalle lo que mencionabas acerca del flag? busqué pero creo que no doy con la respuesta indicada. El navegador para la prueba es Google Chrome.
    – Vhalianna
    Commented el 18 dic. 2020 a las 17:34
  • Claro, pero considera para tu demostración utilizar un servicio como el gratuito de github pages. La información que solicitas sobre Chrome la puedes hallar en esta guía. En caso de que como ahí se recomienda al lanzar google-chrome desde cmd no se ejecuta el navegador entonces coloca el directorio hacia el ejecutable de este programa seguido por el flag. Commented el 18 dic. 2020 a las 17:39
  • Probé el load con la ejecución de las líneas de comando, pero no me lo toma... es raro... El ejemplo con tu dirección sí funcionó, pero cuando le pongo "pagina1.html", no lo muestra. Sí, ya puse el ok a la respuesta:)
    – Vhalianna
    Commented el 18 dic. 2020 a las 18:50
  • Ese ya es tema para una pregunta diferente sobre navegadores y no soy muy competente en ello. Commented el 18 dic. 2020 a las 19:08
  • Oki, gracias por tu ayuda!
    – Vhalianna
    Commented el 18 dic. 2020 a las 19:20

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.