1

tengo un archivo html, con un botón modal que cuando lo pulsas se abre un modal en el cual tiene un formulario, con un campo input y un botón buscar, cuando pulsas en el botón buscar te muestra en otra pagina los datos enviados por post, esa es mi idea.

El primer archivo contiene el botón modal que al pulsarlo va al segundo archivo que contiene el cuerpo del modal con el formulario de búsqueda, al insertar los datos y pulsar en el botón buscar mostraría los datos enviados por post, pero el problema es que en mi caso muestra:

Not Found The requested URL was not found on this server.

/* funcion que se encarga de cargar el contenido del modal desde un archivo externo */
function mostrarModal(id, ruta) {
    // se encarga de apuntar a la etiqueta el contenido que se va a cargar en ella
    $(id).load(ruta, function () {
        // se encarga de mostrar el contenido en el cuerpo del modal
        $(id).modal('show');
    });
}
<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- aqui va la imagen de pestaña  -->
    <link rel="icon" href='../php/funciones/assets/faviconArenas.png'>
    <!-- bootstrap importado css-->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
    <!-- aqui importamos la libreria de jquery -->
    <link rel="stylesheet" href="../css/index.css" type="text/css">
</head>
<!-- bootstrap importado js-->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>

<body>
    <div class='botones my-3 text-end'>
        <!-- Boton que al pulsarlo abre el modal para buscar a un jugador -->
        <button type='button' class='btn btn-primary' data-bs-toggle='modal' onclick='mostrarModal("#btnBuscar","../buscar/buscar.php")'>
            Buscar por nombre jugador
        </button>
        <!-- cuerpo del modal de el boton buscar -->
        <div class="modal fade" id="btnBuscar" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-hidden="true"></div>
        </div>
    <script src="//code.jquery.com/jquery-3.6.0.min.js"></script>
  
    <script src="https://code.jquery.com/ui/1.13.1/jquery-ui.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</body>
</html>

<div class="modal-dialog">
    <div class="modal-content">
        <div class="modal-header">
            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
        </div>
        <form role="form" action="procesoBuscar.php" method="post" enctype="multipart/form-data">
            <div class="modal-body">
                <div class="input-group flex-nowrap">
                    <span class="input-group-text" id="addon-wrapping">
                        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-search" viewBox="0 0 16 16">
                            <path d="M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001c.03.04.062.078.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1.007 1.007 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0z" />
                        </svg>
                    </span>
                    <input type="text" class="form-control" name="txtNombreAbBuscar" placeholder="Introduce el nombre del jugador" aria-label="buscador" aria-describedby="addon-wrapping">
                </div>
            </div>
            <div class="modal-footer">
                <button type="submit" name="submit" value='hello' class="btn btn-primary" id="busqueda">Buscar jugador</button>
            </div>
        </form>
    </div>
</div>
</div>

<?php

if (isset($_POST['txtNombreAbBuscar'])){
    print_r($_POST['txtNombreAbBuscar']);
}
?>

introducir la descripción de la imagen aquí

introducir la descripción de la imagen aquí

15
  • ¿Qué hay en ruta exactamente? Y, ¿por qué ese lío de ventanas que se abren por aquí y por allá? ¿No es mejor tener todo integrado en un solo contenedor? Los modales datan de los años 90, con el boom de Windows, pero hoy, un modal sólo tendría sentido como cuadro de diálogo obligatorio antes de pasar a una acción, no como contenedor o solicitador de datos. No entiendo ese empeño de seguir programando como en los 90. Los modales son una pésima experiencia de usuario hoy día.
    – A. Cedano
    el 16 may. 2022 a las 14:29
  • la ruta del segundo archivo, como seria el planteamiento con el boom de windows, lo desconozco el 16 may. 2022 a las 14:30
  • ¿Y esa ruta funciona? Imprímela con console.log(ruta); revisa la consola, copia/pega para probar esa ruta en el navegador.
    – A. Cedano
    el 16 may. 2022 a las 14:31
  • si se imprime la ruta el 16 may. 2022 a las 14:36
  • Dado que ruta no parece ser una ruta absoluta, conviene que nos digas cómo están organizados tus archivos, ¿el HTML en qué carpeta está? Según esto: ../buscar/buscar.php en el directorio padre del HTML debe haber una carpeta buscar y allí un archivo llamado buscar.php. Muéstranos tu árbol de directorios y archivos.
    – A. Cedano
    el 16 may. 2022 a las 14:37

1 respuesta 1

0

Te sugiero que la petición la hagas por ajax, esto te permitirá enviar cualquier dato, veo que desas usar el modal y consumir los datos con un load, no veo que sea necesario, podrías utilizarlo cuando el usuario haga click en tu botón de buscar; pero debes priorizar qque es lo que continua, en tu caso el proceso es que cuando el usuario haga click en "buscar" hacer la petición vía ajax, consultar los datos, incrustar los datos en el cuerpo del modal y hasta el último mostrar el modal, te deje un ejemplo lo más sencillo posible, con la última versión de Jquery y Bootsrap (5.2)
Espero te sirva mi respuesta.

index.php o index.html

    <!DOCTYPE html>
    <html lang="en">
    <head>
         <meta charset="UTF-8">
         <meta http-equiv="X-UA-Compatible" content="IE=edge">
         <meta name="viewport" content="width=device-width, initial-scale=1.0">
         <title>Hagamos la web</title>
         <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-0evHe/X+R7YkIZDRvuzKMRqM+OrBnVFBL6DOitfPri4tjfHxaWutUpFmBp4vmVor" crossorigin="anonymous">
         </head>
      <body>

<div class="container mt-1">
    <input id="search" class="form-group" value="buscar texto"/>
    <button class="btn btn-success" onclick="abrirModal()">buscar</button>
</div>


<div id="nuevo-modal" class="modal" tabindex="-1" role="dialog">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">Paises</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        <p>Modal body text goes here.</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

<!-- incluyendo jquery -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>  
<!-- incluyendo cdn bootstrap.js -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0-beta1/dist/js/bootstrap.bundle.min.js" integrity="sha384-pprn3073KE6tl6bjs2QrFaJGz5/SUsLqktiwsUTF55Jfv3qYSDhgCecCxMW52nD2" crossorigin="anonymous"></script>
<script>
    function abrirModal(){
        //aqui si lanza el click del modal
        $.ajax({
            url: "datos.php?param="+ $("#search").val(),
            type: 'GET',
            datype: 'json',
            success: function(data) {
                //datos desde php
                var dataJson = JSON.parse(data);
                console.log(dataJson);  
                var body = ``;
                for(index in dataJson){
                    body += `${index}: ${dataJson[index].name} <br>`;
                }                
                //agrrego los datos al cuerpo del modal
                $('.modal-body').html(body);
                var myModal = new bootstrap.Modal('#nuevo-modal', {
                    keyboard: false //no cerrar el modal mediante la tecla ESC
                });
                myModal.show();
            },
        });
    }
</script>
</body>
</html>

datos.php

<?php

//usar el parametro del metodo GET 
// echo $_GET["param"];

//consulta BD 
$data = array(
    array('id'=>0,  'name'=>'México'),
    array('id'=>23, 'name'=>'EU'),
    array('id'=>23, 'name'=>'Inglaterra'),
);

echo json_encode ($data);

?>

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.