gianmarx
4 weeks ago

popup tailwind with laravel jetstream not work

Posted 4 weeks ago by gianmarx

this button takes ID at random instead of the specified one, when I press the close button the status change of a random ID starts but I pass it poll-> id in the form.

i can't understand what's wrong with js.

<td border-0 px-4 py-6>
   <body class="bg-gray-200 flex items-center justify-center h-screen">
      <button class="modal-open bg-transparent hover:bg-red text-red-dark font-semibold hover:text-red py-2 px-4 border border-red hover:border-transparent rounded">
      change
          </button>

          <!--Modal-->
          <div class="modal opacity-0 pointer-events-none fixed w-full h-full top-0 left-0 flex items-center justify-center">
             <div class="modal-overlay absolute w-full h-full bg-gray-900 opacity-50"></div>
             <div class="modal-container bg-white w-11/12 md:max-w-md mx-auto rounded shadow-lg z-50 overflow-y-auto">
                <div class="modal-close absolute top-0 right-0 cursor-pointer flex flex-col items-center mt-4 mr-4 text-white text-sm z-50">
                   <svg class="fill-current text-white" xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 18 18">
                      <path d="M14.53 4.53l-1.06-1.06L9 7.94 4.53 3.47 3.47 4.53 7.94 9l-4.47 4.47 1.06 1.06L9 10.06l4.47 4.47 1.06-1.06L10.06 9z"></path>
                   </svg>
                   <span class="text-sm">(Esc)</span>
                </div>
                <!-- Add margin if you want to see some of the overlay behind the modal-->
                <div class="modal-content py-4 text-left px-6">

                   <!--Title-->
                   <div class="flex justify-between items-center pb-3">
                      <p class="text-2xl font-bold">change</p>
                      <div class="modal-close cursor-pointer z-50">
                         <svg class="fill-current text-black" xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 18 18">
                            <path d="M14.53 4.53l-1.06-1.06L9 7.94 4.53 3.47 3.47 4.53 7.94 9l-4.47 4.47 1.06 1.06L9 10.06l4.47 4.47 1.06-1.06L10.06 9z"></path>
                         </svg>
                      </div>
                   </div>

                   <!--Body-->
                   <form method='POST' action="{{ route('change',['poll'=>$poll]) }}">
                      @csrf
                      @method('PUT')
                      <div class="field mb-8">
                         <div class='control'>
                            <div class="bg-teal-100 border-t-4 border-teal-500 rounded-b text-teal-900 px-4 py-3 shadow-md bg-gray-400" role="alert">
                               <div class="flex">
                                    <p class="text-3xl m-8">you are changing the status of ID: {{$poll->id}} are you sure you want to proceed? </p>
                               </div>
                            </div>
                         </div>
                   </form>

                   <!--Footer-->
                   <button class="bg-transparent hover:bg-red text-red-dark font-semibold ">
                   OK
                   </button>
                   <button class="modal-close bg-transparent hover:bg-red text-red-dark">Close</button>
                   </div>
                </div>
             </div>
          </div>


          <script>
             var openmodal = document.querySelectorAll('.modal-open')
             for (var i = 0; i < openmodal.length; i++) {
               openmodal[i].addEventListener('click', function(event){
                 event.preventDefault()
                 toggleModal()
               })
             }
             
             const overlay = document.querySelector('.modal-overlay')
             overlay.addEventListener('click', toggleModal)
             
             var closemodal = document.querySelectorAll('.modal-close')
             for (var i = 0; i < closemodal.length; i++) {
               closemodal[i].addEventListener('click', toggleModal)
             }
             
             document.onkeydown = function(evt) {
               evt = evt || window.event
               var isEscape = false
               if ("key" in evt) {
                 isEscape = (evt.key === "Escape" || evt.key === "Esc")
               } else {
                 isEscape = (evt.keyCode === 27)
               }
               if (isEscape && document.body.classList.contains('modal-active')) {
                 toggleModal()
               }
             };
             
             
             function toggleModal () {
               const body = document.querySelector('body')
               const modal = document.querySelector('.modal')
               modal.classList.toggle('opacity-0')
               modal.classList.toggle('pointer-events-none')
               body.classList.toggle('modal-active')
             }
             
             
          </script>
    </td>

For example if I select id 100 it takes me 75 or if I select id 20 it takes me 10.is there a way to select the row with id and have only that one modified?

Please sign in or create an account to participate in this conversation.