我如何在 php laravel 中創建一個 javascript 彈出輸入字段？

Question

我正在嘗試制作一個彈出模塊，一旦單擊一個按鈕，它就會顯示一個彈出窗口，其中包含一些用戶可以填寫和保存的字段，如姓名等。 但是我嘗試這樣做，但我似乎無法將它連接在一起。 我不確定是否有人可以告訴我應該將 html css 和 javascript 放在哪里？ 因為我使用的是 php laravel。

這是查看頁面。

@extends('layouts.adminmaster')

@section('section')
  <div class="container paddingTop20">
    <h1>Negombo View Places</h1>
    <hr>
    <div class="row">
      <div id="date-picker-example" class="col-xs-3">
        <form action="{{ route('admin.place.submit') }}" method="POST" id="form1" style="
        padding: 7px;
        margin-left: 15px;
        justify-content: flex-end;
        text-shadow: 0 0 black;
        float: right;
    ">
          @csrf
          <input type="date" id="fDate" name="startDate" value="{{ $startDate ?? '' }}">
          <input type="date" id="tDate" name="endDate" value="{{ $endDate ?? '' }}">  
          <input type="reset" value="Reset">
          <input type="submit" value="Submit">  
        </form>


        </div>
        <div class="col-sm-12">  
            <table id="example" class="table table-striped table-bordered" style="width:100%">
                <thead>
                    <tr>
                        <th>Place ID</th> 
                        <th>Place Name</th>
                        <th>Coordinates (Umbrella)</th>
                        <th>Coordinates (N)</th>
                        <th>Coordinates (E)</th>
                        <th>Map Name</th>
                        <th>Availabilty</th>
                        @if (Auth::user()->role == "admin")
                          <th>Action</th>
                        @endif
                        <th>Quick Book</th>

                    </tr>
                </thead>
                <div id="preloader"></div>
                <tbody id="hidden_table_processing">
                  @foreach ($places ?? '' as $place)
                    <tr>
                        <td>{{ $place->place_id }}</td>
                        <td>{{ $place->place_name }}</td>
                        <td>L({{ $place->co_xl }}, {{ $place->co_yl }})</td>
                        <td>{{ $place->coordsn }}</td>
                        <td>{{ $place->coordse }}</td>
                        <td>{{ $place->map_name }}</td>


                      <td>
        
                      @if ($place->status==0)
                        <span style="color: green">Available</span>
                      @endif
                      @if ($place->status==-1)
                        <span style="color: gray"> Not Available </span>
                      @endif
                      @if ($place->status==2)
                        <span  style="color: red"> Booked </span>
                      @endif
                     </td>
  
                        @if (Auth::user()->role == "admin")
                          <td> <a href="{{ route('admin.place.edit', $place->place_id) }}">Edit</a> /
                            @if ($place->status == -1)
                              <a href="{{ route('admin.place.changestatus', $place->place_id) }}">Activate</a>
                            @else
                              <a href="{{ route('admin.place.changestatus', $place->place_id) }}">Deactivate</a>
                              
                            @endif

                          </td>
                        @endif

                        <td>
                          @if ($place->status==0)
                            <span></span>

// THIS IS THE BUTTON WHERE ONCE CLICKED THE POPUP SHOULD SHOW UP

                        <button type="button" class="btn btn-success dashboardcardbodystyle2" data-toggle="modal" data-target="#myModal"></button>

// END 

                          @endif
                          @if ($place->status==-1)
                            <span>Book</span>
                          @endif
                          @if ($place->status==2)
                            <span>Booked</span>
                          @endif
                         </td>
                    </tr>
                  @endforeach
                </tbody>
            </table>

            <div id="loader_space"></div>
            <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/pace/1.0.2/pace.min.js"></script>

        <script>
          $('#myModal').on('shown.bs.modal', function () {
          $('#myInput').trigger('focus')
        })
        </script>

            <script>


              $('.input-daterange input').each(function() {
              $(this).datepicker('clearDates');
              });
            </script>

              

            <script>   
            var startDate = document.getElementById('fDate').value;
            var endDate = document.getElementById('tDate').value;
            document.write(startDate);
            document.write(endDate);

                paceOptions = {
                  ajax: true,
                  document: true,
                  eventLag: false
                };

                Pace.on('done', function() {
                  $('#preloader').delay(100).fadeOut(500);
                  document.getElementById("loader_space").style.display = "none";
                  $('#hidden_table_processing').fadeIn(200);
                });

            </script>

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

    @endsection

Answer 1

你可以這樣做

<table class="table table-striped table-nowrap custom-table mb-0 " id="tblAllOrder">
    <thead>
     <tr>
        <th>Price (&pound;)</th>
        <th>Status</th>
    </tr>
    </thead>
    <tbody>
       @foreach($orderList as $result)
        <tr>                                
           <td>{{$result->id}}</td>
           <td>
            <a href="#" data-toggle="modal" data-target="#project-details">{{$output[0]}} </br> {{$output[1]}}</a>
            </td>
    @endforeach
   </tbody>
</table>

然后在您的部分結束的任何地方添加模型

<div class="modal right fade" id="project-details" tabindex="-1" role="dialog" aria-modal="true">
          <div class="modal-dialog" role="document">
            <button type="button" class="close md-close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
            <div class="modal-content" style="overflow-y: auto;">

              <div class="modal-header">
                <button type="button" class="close xs-close" data-dismiss="modal">×</button>
                <div class="row w-100">
                   <div class="col-md-7 account d-flex">
                        Order Detail 
                     </div>
                </div>
              </div>
              <div class="orderDetail"> Order Detail  </div>
            </div><!-- modal-content -->
          </div><!-- modal-dialog -->
        </div><!-- modal -->

現在當你每次點擊錨標簽時，它都會打開這個模型。