Membuka halaman pertunjukan dalam modal dengan memperbarui url di bilah alamat menggunakan HTML & JS

Saya ingin mendapatkan id klik tombol di bilah alamat untuk mengambil data kembali dari database seperti yang dilakukan Instagram. Saya ingin mendapatkan id dari bilah alamat menggunakan php untuk mencari data spesifik dari database sesuai dengan id referensi yang dipilih.

Catatan Gambar di bawah adalah kredit @designer dari postingan Pertanyaan Stackoverflow. masukkan deskripsi gambar di sini

Cuplikan kode saya adalah:

<script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet"/>


<a    class="btn btn-primary btnModal"  data-target ="#scrapModal"  href="/idwashingPlan.php#scrapModal?id=' . $row['id'] . '" data-toggle="modal" >Service Include</a>


<div class="modal fade bd-example-modal-lg" id="scrapModal" tabindex="-1" role="dialog" aria-labelledby="scrapModal" aria-hidden="true">
                <div class="modal-dialog modal-lg">
                    <div class="modal-content">


                        <!-- DataTales Example -->
                        <div class="card shadow mb-4">
                            <div class="card-header py-3">
                                <h6 class="m-0 font-weight-bold text-primary">WASHING PLAN SERVICES</h6>
                            </div>
                            <div class="card-body">
                                <div class="table-responsive">
                                
                                    <table class="table table-bordered" id="dataTable" width="100%" cellspacing="0">
                                    <input type="text" name="id" id="id" />

                                        <thead>
                                            <tr>
                                                <th>S.No.</th>
                                                <th>Washing plan Services</th>
                                                <th>Action</th>

                                            </tr>
                                        </thead>
                                        <tfoot>
                                            <tr>
                                                <th>S.No.</th>
                                                <th>Washing plan Services</th>
                                                <th>Action</th>
                                            </tr>
                                        </tfoot>
                                        <tbody>


                                        


        <tr>
        <th>test</th>
        <th>test1</th>
        <th>test2</th>
    </tr>

                                        
                                            
                                   
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                        </div>
                        <form action="" method="post">

                            <div class="col-lg-8 m-4">
                                <label class="ml-1">Plans Include</label><br>
                                <input type="text" id="plans" name="plans" placeholder="" class="col-12" required>
                            </div>

                            <div class="row m-5">
                                <input type="submit" value="Reset" class="btn" style="background-color: #FF9933;letter-spacing: 0.6px;border-radius: 2px;color: #FFF;">
                                <input type="submit" class="btn" name="includeService" value="Add Value" style="background-color: #0891FF;;letter-spacing: 0.6px;border-radius: 2px;color: #FFF; display: inline-block;vertical-align: middle;">
                            </div>
                        </form>


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

Alamatnya tidak berubah ketika saya menambahkan data-target=modal. Apakah ada teknik untuk membuat modal seperti ini?

Terima kasih sebelumnya


person Muhammad Addan Sarfraz    schedule 26.07.2020    source sumber


Jawaban (1)


Menurut saya, Anda sedang mencari History API, yang memungkinkan Anda memanipulasi riwayat browser (termasuk bilah URL) menggunakan JS.

history.pushState() memungkinkan Anda 'menambahkan' halaman ke tumpukan riwayat, yang akan mengubah URL menjadi apa pun yang Anda tentukan.

Jika Anda mendengarkan acara window.onpopstate, Anda dapat mendeteksi ketika pengguna menavigasi riwayat menggunakan kontrol browser (seperti tombol kembali), hentikan dan tangani sendiri, semuanya tanpa memuat ulang halaman!

Itu sudah cukup untuk membantu Anda memulai, ini adalah API yang sangat berguna untuk dimanfaatkan.

person Tom Anderson    schedule 26.07.2020