Как создать новую HTML страницу на основе клика по ссылке пользователя в таблице? - PullRequest
Новая
       1

Как создать новую HTML страницу на основе клика по ссылке пользователя в таблице?

0 голосов
/ 20 января 2020

Просто дайте мне подсказку, как я начинаю отображать профиль пользователя с помощью идентификатора в клике привязки.

URL моей домашней страницы localhost/CRM/dashobard.html. Также у меня есть полный JSON, в котором я уже получил все сведения о потенциальной возможности и отображаю часть его содержимого в столбцах через таблицу в файле dashboard.html

enter image description here

Также в файле dashboard.html я использую PHP сеансов, как показано ниже. 

<?php

    session_start();

    if($_SESSION['State'] == 'Authenticated'){

     $user_id = $_SESSION['User_Id'];

     if(function_exists('date_default_timezone_set')) 
     {

        date_default_timezone_set("Asia/Kolkata");
     }   

     $today = date("Y-m-d H:i:s");     

    ?>
    <!DOCTYPE html>
    <html>
        <head>
            <html lang="en">
            <meta charset="UTF-8">
            <meta name="viewport" content="width=device-width, initial-scale=1.0">
            <meta http-equiv="X-UA-Compatible" content="ie=edge">
            <title>Dashboard</title>

         </head>
<body>

all header and sections tag  content are there

</body>
</html>
<?php 

    }else{    

        echo "<script>location.href='https://localhost/CRM/login.html';</script>";    

    }


    ?>

, и я хочу отобразить профиль пользователя в localhost/CRM/dashboard.html/17/John-doe или localhost/CRM/dashboard.html/lead/17/

У меня есть таблица с Lead Name в значениях столбцов. Я хочу разрешить пользователю нажимать на Lead Name, и пользователю отображается отдельная страница со всеми другими деталями, кроме других столбцов, которых нет в таблице, в новой вкладке, и это может быть сделано путем динамического создания страницы профиля. но, поскольку я не знаю, на какой Lead Name нажал посещающий пользователь. Я думаю, что мне не хватает концепции переадресации URL.

Ниже приведен скриншот Front end.

enter image description here

enter image description here

enter image description here

Я генерирую вышеупомянутую таблицу динамически, используя AJAX, и таблица имеет строку с тегом привязки Lead Name, где пользователь может нажать и доступ к странице профиля. но я думаю, что нужно динамически генерировать HTML страницу, но я не знаю, как это сделать.

Например, в приведенном ниже кодовом файле loadtable.js. 

$(document).ready(function() {

    var delay = 1000;

    // Campaign Submit Info
    $('[name="search_submit"]').click(function(e) {

        e.preventDefault();

        var lead_status = $('#filterformpost').find('#lead_status_select option:selected').val();
        var campaign_status = $('#filterformpost').find('#campaign_status_select option:selected').val();
        var company_name = $('#filterformpost').find('#company_name_select option:selected').val();
        var tech_area = $('#filterformpost').find('#tech_area_select option:selected').val();
        var firm_size = $('#filterformpost').find('#firm_size_select option:selected').val();
        var firm_type = $('#filterformpost').find('#firm_type_select option:selected').val();
        var country_name = $('#filterformpost').find('#country_name_select option:selected').val();
        var state_name = $('#filterformpost').find('#state_name_select option:selected').val();
        var start_date = $('#filterformpost').find('#start_date_search').val();
        var end_date = $('#filterformpost').find('#end_date_search').val();        

        $.ajax({
            type: "POST",            
            url: "./server/search.php",
            data: {
                "lead_status": lead_status,
                "campaign_status": campaign_status,
                "company_name": company_name,
                "tech_area": tech_area,
                "firm_size": firm_size,
                "firm_type": firm_type,
                "country_name": country_name,
                "state_name": state_name,
                "start_date": start_date,
                "end_date": end_date
            },
            beforeSend: function() {
                $('.message_box').html(
                    '<img src="tenor.gif" width="40" height="40"/>'
                );
            },

            success:function(data){

                var result = $.parseJSON(data);

                console.log(result);

                $("#filterRecords").empty();

                var table='';

                table = $("<table></table>");

                table.append('<thead><th>#</th><th>Lead Name</th><th>Company</th><th>Email</th><th>Phone</th><th>Lead Owner</th><th>Details</th></thead>'); 

                table.append('<tbody></tbody>'); 

                var i = 1;

                $.each(result, function(key, value) {

                    table.last().append("<tr><td>" + i + "</td><td><a target='_blank' class='lead-name' href="+value['Lead_Id']+">" + value['FirstName'] + ' ' + value['LastName'] + "</a></td><td>" + value['Company'] + "</td><td><a href=mailto:" + value['Email'] + ">" + value['Email'] + "</a></td><td>" + value['Phone'] + "</td><td><a target='_blank' class='lead-owner' href=" + value['LeadAddedBy'] +">" + value['LeadAddedBy'] + "</td><td>" + "<form action='' method='POST'><button id=" + value['Lead_Id'] + " name=''>View</button></form>"+"</td></tr>");

                    i = i + 1;                

                });

                $("#filterRecords").html(table);
                $('.message_box').html('');
            }           

        });

    });

});

In PHP файл, который запускает SQL запрос и возвращает JSON объект. 

<?php 

// send a JSON encoded array to client

include('connection.php');

$selectSQL = "SELECT * FROM tbl_main_lead_info ";

$result_array = array();

$result = $conn -> query ($selectSQL);

// If there are results from database push to result array

if(mysqli_num_rows($result) > 0){

    while ($row = mysqli_fetch_array($result)) {

        array_push($result_array, $row);

    }

}

echo json_encode($result_array);

$conn->close();


?>

В файле, где отображаются таблицы dashboard.html

<!-- Filter section with Main Lead Table  -->
<section class="operation" id="view_lead_info" style="display: block;">

<div class="row">
      <div class="col">
                        <div style="overflow-x:auto;">
                           <div id="filterRecords"></div> 
                        </div>                        
                    </div>                    
                </div> 

</section>

SQL для таблицы используется для отображения профиля. 

--
-- Table structure for table `tbl_main_lead_info`
--

DROP TABLE IF EXISTS `tbl_main_lead_info`;
CREATE TABLE IF NOT EXISTS `tbl_main_lead_info` (
  `Lead_Id` int(100) NOT NULL AUTO_INCREMENT,
  `FirstName` varchar(100) DEFAULT NULL,
  `LastName` varchar(100) DEFAULT NULL,
  `Company` varchar(100) DEFAULT 'NA',
  `Website` varchar(100) DEFAULT 'NA',
  `Designation` varchar(100) DEFAULT 'NA',
  `Linkedin` varchar(100) DEFAULT 'NA',
  `Email` varchar(100) DEFAULT NULL,
  `Phone` varchar(100) DEFAULT NULL,
  `State` varchar(100) DEFAULT NULL,
  `Country` varchar(100) DEFAULT NULL,
  `TechArea` varchar(100) DEFAULT NULL,
  `FirmType` varchar(100) DEFAULT NULL,
  `FirmSize` varchar(100) DEFAULT NULL,
  `LastContactDate` date DEFAULT NULL,
  `NextContactDate` date DEFAULT NULL,
  `LeadDescription` varchar(200) DEFAULT NULL,
  `OwnerNotes` varchar(200) DEFAULT NULL,
  `SetReminder` date DEFAULT NULL,
  `AdminNotes` varchar(200) DEFAULT NULL,
  `LeadStatus` varchar(100) DEFAULT NULL,
  `LeadAddedBy` int(100) NOT NULL,
  `LeadAddedOn` datetime DEFAULT NULL,
  PRIMARY KEY (`Lead_Id`),
  UNIQUE KEY `FirstName` (`FirstName`,`LastName`,`Company`,`Website`,`Designation`,`Linkedin`,`Email`,`Phone`)
) ENGINE=MyISAM AUTO_INCREMENT=19 DEFAULT CHARSET=latin1;

--
-- Dumping data for table `tbl_main_lead_info`
--

INSERT INTO `tbl_main_lead_info` (`Lead_Id`, `FirstName`, `LastName`, `Company`, `Website`, `Designation`, `Linkedin`, `Email`, `Phone`, `State`, `Country`, `TechArea`, `FirmType`, `FirmSize`, `LastContactDate`, `NextContactDate`, `LeadDescription`, `OwnerNotes`, `SetReminder`, `AdminNotes`, `LeadStatus`, `LeadAddedBy`, `LeadAddedOn`) VALUES
(18, 'Tohn', 'Doe', 'Microsoft', 'www.microsoft.com', 'Manager', 'Tohn Doe', 'tohndoe@microsoft.com', '5125501556', 'California', 'USA', 'Wireless technologies', 'Corporate', '1000+', '2020-01-27', '2020-01-31', 'This is a testing description', NULL, '2020-02-27', 'This is Admin Notes Testing', 'Active', 18, '2020-01-15 10:50:36'),
(17, 'John', 'Doe', 'Google', 'www.google.com', 'Manager', 'John Doe', 'johndoe@google.com', '5125501555', 'Texas', 'USA', 'Intellectual Property', 'Corporate', '11-50', '2020-01-14', '2020-01-25', 'This is a Testing Description', 'This is My Notes Belongs to Rinku 16', '2020-01-17', NULL, 'Active', 22, '2020-01-14 17:04:02');

Ответы [ 3 ]

2 голосов
/ 20 января 2020

Для динамического создания страницы из некоторых данных вам потребуется PHP. Допустим, ваша страница выглядит примерно так:

show-profile. php

$lead_id = $_GET[ 'lead_id' ]; // Get the lead_id value, of course you'd need to check if it has been set, is valid, etc.

... here your code to retrieve info through the $lead_id value ...

В вашей таблице будет достаточно поместить ссылку, подобную этой: 

"<a target='_blank' href='show-profile.php/?lead_id=" + value['Lead_Id'] + "'>Show Details</a>"

Редактировать

Вот более подробный пример show-profile. php page: 

<?php
  if ( ! isset( $_GET[ 'lead_id' ] ) {
    echo( 'No parameter lead_id given' );
    exit;
  }

  $lead_id = $_GET[ 'lead_id' ];

  $data = get_details( $lead_id );

  # Here you can check about the $data returned, which depends by your get_details function, to check if the details has been found or not and act consequently. Here we suppose you got the right data to make it short.

?>

<!-- HTML page definition, HTML, HEAD, LINKS, etc. goes here -->

<body>
  <div id="details">
    <p class="first-name">First Name: <?php echo $data[ 'first_name' ] ?></p>
    <p class="last-name">Last Name: <?php echo $data[ 'last_name' ] ?></p>
    <!-- other data to show here -->
  </div>
</body>

В коде, конечно, get_details - ваша функция для извлечения данных через значение $ lead_id.

Редактировать 2: с JSON данными уже получены

Допустим, ваши данные для отображения присутствуют в JSON объекте: 

data = {
  lead_id: 20,
  first_name: 'John',
  last_name: 'Doe',
}

ваша ссылка для открытия страницы с подробностями будет выглядеть примерно так: 

"<a target='_blank' href='show-profile.php/?lead_id=" + data.lead_id + "&first_name=" + data.first_name + "&last_name=" + data.last_name +  "'>Show Details</a>"

И ваш шоу-профиль. php страница будет выглядеть что-то такое: 

<?php
  # Check if all the data you need has been given
  ... your code ..

  # Retrieve the data and store them into variables
  $lead_id = $_GET[ 'lead_id' ];
  $first_name = $_GET[ 'first_name' ];
  $last_name = $_GET[ 'last_name' ]; 
?>

<html>
  <head></head>
  <body>  
    <p class="first-name">First Name: <?php echo $first_name; ?></p>
    <p class="last-name">Last Name: <?php echo $last_name; ?></p>
    <!-- other data to show here -->
  </body>
</html>
1 голос
/ 20 января 2020


• Первый вариант - сделать div похожим на окно. Если вы уже получили все данные, по нажатию индекса элемента найдите соответствующие данные в массиве и поместите их в новый шаблон, чтобы вы могли их отобразить.
• В противном случае на основе сгенерированного URL-адреса в теге -a- , это должно быть что-то вроде example.com? client = 2 , вы должны сделать запрос, получить сведения о клиенте и либо в передней, либо в задней части сделать шаблон из их.

Вы также можете проверить это Как получить параметры из строки URL в PHP?

1 голос
/ 20 января 2020

Сначала необходимо создать страницу профиля, на которой вы загружаете данные для определенного профиля c.

Вам необходимо передать id записи в виде строки запроса с вашим URL, например: www.your-domain.com/?profileId=xxx

На странице профиля вам нужно получить profileId и сделать запрос на получение, чтобы получить указанную c запись профиля из вашего хранилища данных и динамически заполнить ваши метки.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...