Можно ли дать мои параметры URL "ajax-divs"?

Question

Мое приложение читает информацию из базы данных и показывает информацию пользователю, используя jQuery . Если пользователь нажимает на запись, всплывающее окно div отображает дополнительную информацию.

Я хочу открыть эти div с помощью URL. Является ли это возможным? Я собираюсь использовать идентификатор записи в качестве параметра?

Как это: div с записью id = 123 откроет ссылку, как это

https://url.de/index.php?param=123

// *** Funktion für Details-Overlay ***
function on(id) {
  $.ajax({
    url: "AJAX.php",
    data: 'id=' + id + '&switch_content=details',
    success: function(result) {
      $("#data-table").html(result);
    }
  });
  document.getElementById("overlay").style.display = "block";
}

function off() {
  document.getElementById("overlay").style.display = "none";
}

#overlay {
  display: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div id=12>Click on me</div>

<!-- OVERLAY -->
<div id="overlay">
  <div id="ContainerBox" align="center">
    <img onclick="off()" id="imgclose" src="images/auswertung-close.png">
    <div id="headerSticky"></div>
    <h2>Gesamte Übersicht</h2>
    <hr>

    <!--  Tabelle für Detailseite  -->
    <table data-role="table" id="data-table" data-filter="true" data-input="#filterTable-input" class="ui-responsive" border="1" style="overflow-x: auto;">
      <!-- AJAX/Informations -->
    </table>
  </div>
</div>

PHP / AJAX:

<?php 
// Verbindung zur Datenbank
$pdo = new PDO('mysql:host=***;dbname=***', '***', '***');

$pdo ->exec("set names utf8");

if ($_GET ['switch_content']=='details'){

    // SQL Befehl + ID rausnehmen
    $sql_befehlDetail = "SELECT * FROM fair_contact_form WHERE  id= :id";

    // Ergebnisse aus dem SQL Befehl in $ergebnis ziehen
    $ergebnisDetail = $pdo->prepare ($sql_befehlDetail);
    $ergebnisDetail->execute(array('id'=>$_GET['id']));

    $datenDetail = $ergebnisDetail->fetch();
    $search = '/../../../../htdocs/..;
    $replace = 'https://url.de';
    $karte = str_replace($search, $replace, $datenDetail['businessCard']);
    echo '<thead>
            <tr>
                <td class="" colspan="2"></td>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td data-priority="2"> ID </td>
                <td> '. $datenDetail['id'] .' </td>
            </tr>
            <tr>
                <td data-priority="2"> Handelsmesse </td>
                <td> '. $datenDetail['fair'] .' </td>
            </tr>
            <tr>
                 <td data-priority="3"> Datum </td>
                    <td> '. $datenDetail['timestamp'] .' </td>
             </tr>
             <tr>
                 <td data-priority="4"> dateTimeOfContact: </td>
                 <td> '. $datenDetail['dateTimeOfContact'] .' </td>
             </tr>
             <tr>
                 <td data-priority="5"> Gesprächsdauer </td>
                     <td> '. $datenDetail['durationOfContact'] .' </td>
             </tr>
        </tbody>';
} 
else if($_GET['switch_content']=='startseite') {

    $sql_befehlGesamt = "SELECT * FROM fair_contact_form ORDER BY id DESC";
    $ergebnisGesamt = $pdo->query($sql_befehlGesamt);

    ?><div data-role="header"></div>
    <div role="main" class="ui-content">    
        <table id="table" border="1" data-filter="true" data-input="#filterTable-input" class="ui-responsive" data-role="table" 
                id="table-column-toggle" data-mode="columntoggle" class="ui-responsive table-stroke">
            <thead>
                <tr>
                    <th data-priority="1" id="sortieren_id">ID</th>
                    <th data-priority="4" id="sortieren_email" class="ui-table-cell-hidden">E-Mail</th>
                    <th data-priority="4" id="sortieren_gespraechsinhalt" class="ui-table-cell-hidden">Gesprächsinhalt</th> <!-- classe dient dazu, checkbox auf unchecked zu stellen  -->
                </tr>
            </thead>
            <tbody><?php 
            while ($datenGesamt = $ergebnisGesamt->fetchObject()) {
                $dateTimeOfContact = new DateTime($datenGesamt->dateTimeOfContact);
                ?><tr onclick="on(<?=$datenGesamt->id?>)" style="cursor:pointer">
                    <td onclick="on(<?=$datenGesamt->id ?>)"><p style="color:#E3000F;"><b><?=$datenGesamt->id ?></b></p></td>
                    <td><?=$datenGesamt->fair ?></td>
                    <td><?=$dateTimeOfContact->format('d.m.Y') ?></td>
                    <td><?=$datenGesamt->author ?></td>
                    <td><?=$datenGesamt->genderOfContact ?></td>
                    <td><?=$datenGesamt->nameOfContact ?></td>
                    <td><?=$datenGesamt->surnameOfContact ?></td>
                    <td class="ui-table-cell-hidden"><?=$datenGesamt->companyName ?></td>
                </tr><?php 
            } ?>
        </tbody>
    </table>
</div>

Информация в div Ajax должна быть доступна с параметром URL +.

Answer 1

Да, вы можете активировать желаемые данные идентификатора при запуске.

Просто добавьте следующий код в ваш файл js:

// Shorthand for $( document ).ready()
$(function() {
    // This code will be run when document will be loaded
    var args = window.location.search.substring(1); // Get all URL arg
    args = args.split('&').map(arg => arg.split('=')); // convert to array with key, value

    args.forEach(function(arg) {
        var key = arg[0];
        var val = arg[1];

        if (key === 'param') { // Check if the URL param is our param, and if yes - open popup
            on(val);
        }
    });
});