Как передать данные из функции javascript на перенаправленную страницу? - PullRequest
0 голосов
/ 08 апреля 2020
const db = firebase.firestore();
function getDataOfBus() {
var dates = document.getElementById('departure-date').value.toString();
var fromd = document.getElementById('from-dest').value.toString()
var tod = document.getElementById('to-dest').value.toString()
console.log(dates + " -" + fromd + " -" + tod)

db.collection('Buses').where("DepartureDate", "==", dates).where("To", "==", tod).
where("From", "==", fromd).get().then((snapshot) => {
    let html = '';
    snapshot.forEach((busDatas) => {
        busData = busDatas.data()
          // console.log(busData.id)
          busData.docId = busDatas.id
        html += `
<div class="single-room-area d-flex align-items-center 
mb-50 wow fadeInUp" data-wow-delay="100ms" id="prince">

<div class="room-thumbnail">
  <img src="${busData.ImageLink}" alt="">
 </div>

<div class="room-content">

<h2><a href="javascript:getID('${busData.docId}');">${busData.TourName}</h2>
  <h6>${busData.From} to ${busData.To}</h6>
  <h4>₹ ${busData.SeatPrice} </h4>

  <div class="room-feature">
    <h6>Boarding Point  <span>${busData.BoardingTime}</span></h6>
    <h6>Dropping Point <span>${busData.DroppingTime}</span></h6>
    <h6>Seats Left <span>${busData.SeatsLeft}</span></h6>
    <h6>Total Time <span>${busData.TotalTime}</span></h6>
    <h6>Departure Date <span>${busData.DepartureDate}</span></h6>
  </div>


  </div>

</div>  `

        document.getElementById('bus-container-dynamic').innerHTML = html;

    })    // End foreach
})      // End then

}


function getID(id) {
  db.collection('Buses').doc(id).get().then((doc) => {
let html = '';
var data =  doc.data();
html += `<h1>${data.TourName} </h1>`
document.getElementById('div-1').innerHTML = html;
window.location = "single-bus.html"
}).catch((e) => {
console.log(e);
 })

}

Я выполнил этот код для отображения отфильтрованных документов на странице html, где я получаю идентификатор документа, по которому пользователь нажимает, и я не могу этого сделать, я хочу перенаправить его на "single-bus. html" при нажатии, и я хочу отправить этот идентификатор на следующую страницу "single-bus. html", где я хочу использовать этот идентификатор для отображения данных в файле html, используя это id.

<!-- single-bus.html-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Homepage</title>
</head>
<body>
<div class="classer" id="div-1">

</div>
<script src="./loader.js"></script>
</body>
</html>

1 Ответ

0 голосов
/ 08 апреля 2020

и извините за мой Engli sh.

Насколько я понимаю, вы хотите отправить идентификатор документа со страницы A на страницу B, используя window.location.

Хорошо следующий пример - решение, которое я нашел.

Страница A выглядит следующим образом

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>

</body>

<script>
    // redirect user to some site with a parameter called 'documentParam' which value = 123
    window.location = 'some-site.html?documentParam=123'
</script>
</html>

Обратите внимание, что параметры помещаются в URL с помощью знака вопроса ?. Если вам нужно больше параметров, вы можете разделить их, используя & Подробнее о параметрах запроса здесь: В чем разница между параметрами URL и строками запроса?

Страница B выглядит следующим образом this

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>

</body>

<script>

    // this page expects one parameter called 'documentParam'
    var urlParams = new URLSearchParams(window.location.search);

    console.log(urlParams.has('post')); // false --- no parameter called 'post'
    console.log(urlParams.get('documentParam')); // "123"

    alert(urlParams.get('documentParam'));
</script>
</html>

Это решение работает с использованием параметров запроса и считывает их из URL-адреса с помощью JavaScript. Я думаю, что вы можете адаптировать эту идею к вашим потребностям.

Вы можете прочитать больше здесь: Как я могу получить значения строки запроса в JavaScript?

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