2

tengo un problema que no logro entender. en mi sitio estoy imprimiendo información sobre distintas habitaciones de hotel en una ventana modal de boostrap. Dentro de cada modal se muestra información distinta pero tiene un Buscador de productos en tiempo real. El problema es que el buscador solo arroja resultados en la primera ventana modal. Abro la segunda ventana modal y lo que escriba para buscar lo muestra solo en el primer Modal.

introducir la descripción de la imagen aquí

introducir la descripción de la imagen aquí

Este es el código que ocupo:

<button style=" background-color: transparent;
        border: none;" type="button" data-toggle="modal" data-target="#registerModal{{ $habitacion->id }}"> </button>

<div wire:ignore.self class="modal fade bd-example-modal-xl" id="registerModal{{$habitacion->id}}" tabindex="-1" role="dialog"
    aria-labelledby="registerModalLabel" aria-hidden="true">
 @include('livewire.buscador-productos')

</div>

Buscador-Productos.blade.php

<div wire:ignore>

<form  action="#" id="search-form">
    @csrf
    <div class="row">
        <div class="col-12" id="search-wrapper">
            <input type="text" class="form-control w-100 m-0 search" placeholder="What are you looking for .. ">

            <div  id="results">

            </div>
        </div>
    </div>
</form>

Js:

  <script>
    $(function ()
    {
        'use strict';

        $(document).on('keyup', '#search-form .search', function ()
        {
            if($(this).val().length > 0)
            {
                var search = $(this).val();

                $.get("{{ route('posts.search') }}", {search: search}, function (res)
                {
                    $('#results').html(res);
                });

                return;
            }

            $('#results').empty();
        });

        $(document).on('click', '.post-link', function ()
        {
            var postId = $(this).data('id');

            $.get("{{ url('posts/show') }}", {id: postId}, function (res)
            {
                $('#results').empty();
                $('.search').val('');
                $('#post').html(res);
            });
        });
    });
    </script>

Como puedo hacer que los resultados se muestren en todas las ventanas modal? Los productos son los mismos para todas las habitaciones

7
  • El problema se da porque estas usando el mismo id en todos los modals. El id deber ser único y por eso siempre toma el primer elemento.
    – Marcos
    Commented el 4 abr. 2023 a las 19:10
  • @Marcos Hola marcos, pero arriba en el header del modal sale Habitacion 1 y 2. esas son las id distintas. a eso te refieres? Commented el 4 abr. 2023 a las 19:44
  • Se refiere al TAG del HTML que no muestras en tu código, el que genera las modales, debe de ser único y será algo así: id="modal"
    – track3r
    Commented el 4 abr. 2023 a las 19:51
  • @JeremiasRosas, me refiero a que por lo que detallas en tu pregunta tenes un modal por cada "Habitacion". Correcto? Entonces cuando se abre el modal para la "Habitacion 1", tenes un elemento con id="search-form" y otro con id="results". Luego "Habitación 2", de nuevo tenes elementos con los mismos id.
    – Marcos
    Commented el 4 abr. 2023 a las 19:52
  • @Marcos Actualice mi post, puse como genero el modal con el id Commented el 4 abr. 2023 a las 20:11

1 respuesta 1

1

El problema se da porque estas creando un modal por cada habitación y dentro de cada modal el id de los elementos se esta repitiendo. El id deber ser único y por eso siempre toma el primer elemento.

El atributo global id define un identificador único (ID) el cual no debe repetirse en todo el documento. Su propósito es identificar el elemento al vincularlo (usando un identificador de fragmento), en scripts u hojas de estilo (con CSS).

Fuente: MDN > HTML > id

Solución:

Para poder identificar los elementos dentro de cada modal, podrías usar el atributo class e indicar una clase distinta para cada elemento.

Ejemplo:

En el HTML reemplazamos los id con class y agregamos el nombre de una clase a gusto.

<!-- Indicamos en "class" una clase -->
<form  action="#" class="search-form">
    @csrf
    <div class="row">
        <!-- Indicamos en "class" una clase -->
        <div class="col-12" class="search-wrapper">
            <input type="text" class="form-control w-100 m-0 search" placeholder="What are you looking for .. ">

            <!-- Indicamos en "class" una clase -->
            <div class="search-results"></div>
        </div>
    </div>
</form>

En JS modificamos la asignación de eventos y sus callbacks para que, dependiendo desde "donde" (su contexto) se dispara, podamos afectar los elementos correctos.

    $(function() {
      'use strict';

      $(document).on('keyup', '.search-form .search', function() {
        let $input = $(this),
          // Desde el input buscamos en sus ancestros el from mas cercano
          $form = $input.closest('.search-form'),
          // Desde el from buscamos en sus descendientes el contenedor
          $results = $form.find('.search-results');
        
        if ($input.val().length > 0) {
          var search = $input.val();

          $.get("{{ route('posts.search') }}", {
            search: search
          }, function(res) {
            $results.html(res);
          });

          return;
        }

        $results.empty();
      });

      $(document).on('click', '.post-link', function() {
        let $link = $(this),
          postId = $link.data('id'),
          // Desde el "post" buscamos el form mas cercano
          $form = $link.closest('.search-form'),
          $input = $form.find('.search-input'),
          $results = $form.find('.search-results');

        $.get("{{ url('posts/show') }}", {
          id: postId
        }, function(res) {
          $results.empty();
          $input.val('');
          $('#post').html(res); // @TODO revisar si esto es correcto
        });
      });
    });

PD: Como te comente, considero que tener un modal por cada habitación no es una buena idea por toda la sobrecarga que esto implica. Con un solo modal deberías poder lograr el mismo resultado.

2
  • Hola @Marcos, puedes ayudarme a mejorar mi codigo?, tienes razón con que sobrecarga todo. ¿Como puedo utilizar un solo modal y que a su vez muestre las información de distintas habitaciones? Commented el 29 abr. 2023 a las 23:47
  • Hola @JeremiasRosas, tendrías que: 1.- Tener un único modal con un id. 2.- asignar a los botones que abren el modal una única función la cual tomaría el id de post, lo guardaría en una variable accesible fuera de su contexto (pseudo-global) y abriría el modal. Luego solo te quedaría leer dicha variable a la hora de buscar
    – Marcos
    Commented el 30 abr. 2023 a las 13:06

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.