How to load data from JSON after changing content via DOM?

T

topoleva2022-02-21 22:27:55

JavaScript

topoleva, 2022-02-21 22:27:55

Hello everyone)

I would be grateful for the hint in the implementation of the following.

There is a page (on bootstrap 5) with a number of different features for a particular product that are not initially rendered.

When a user enters it, he must initially select the product of interest to him.

This is how my page looks like (shortened for example and left the main blocks for which there is a question):

<!doctype html>
<html lang="ru">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6" crossorigin="anonymous">

    <title>Название</title>
    
</head>

<body>

<ul>
  <li onclick="product1()">Product 1</li>
</ul>

<p id="productOne">[укажите продукт]</p>

<a href="#" id="myProduct1" data-bs-toggle="modal" data-bs-target="#blockModal">I am descreption "Product 1 (отдельная, постоянная ссылка)</a>

<script src="js/all-product.js"></script>

<!--

Содержимое "all-product.js":

function product1() {
  document.getElementById("productOne").innerHTML = '<a href="#" id="myProduct1" data-bs-toggle="modal" data-bs-target="#blockModal">I am descreption "Product 1</a>"';
}

-->
<script src="js/date-for-modal.js"></script>

<!--

Содержимое "date-for-modal.js" в формате json с различными данными по по определенным "продуктам"

-->

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-JEW9xMcG8R+pH31jmWH6WWP0WintQrMb4s7ZOdauHnUtxwoG2vI5DkLtS3qm9Ekf" crossorigin="anonymous"></script>

</body>
</html>

Let's say a person has selected "Product 1" (there are actually several products, and for each product a function has been created in the file that changes / updates the data in the corresponding div, p or span tag).

For some elements (which are loaded as links), I would like to display a more detailed description in the modal window, but this does not work out for me.

A separate link that does not change in any way and is constantly located on the page works correctly, but this option is not very suitable, because depending on the selected product, the links are different, and different information should be displayed.

Initially, I thought that the problem was in the output using jQuery (all-product.js file):

$('#productOne').html('<a href="#" id="myProduct1" data-bs-toggle="modal" data-bs-target="#blockModal">I am descreption "Product 1</a>');

changed to this format

function product1() {
    document.getElementById("productOne").innerHTML ='<a href="#" id="myProduct1" data-bs-toggle="modal" data-bs-target="#blockModal">I am descreption "Product 1</a>';
}

nothing changed.

Can you please tell me if it is possible somehow to load data into the model window after adding/updating elements with content?! And in general, is it possible to do this?!

Thank you for your attention to my question :)

Reply

Answer the question

In order to leave comments, you need to log in

2 answer(s)

R

Rst0, 2022-02-22
@Rst0

Can you please tell me if it is possible somehow to load data into the model window after adding/updating elements with content?! And in general, is it possible to do this?!

if it's Bootstrap, then
Different contents of the modal window in Bootstrap 5
rolled out an example based on the manual:

create data attributes according to your rules and load what you need
in JS set a poll for these attributes

var recipient = button.getAttribute('data-bs-whatever');
modalTitle.textContent = 'Запрос цены ' + recipient;

T

ThunderCat, 2022-02-21
@ThunderCat

When a user enters it, he must initially select the product of interest to him.

What does it mean to choose? What is this, a selector?

Let's say a person selected "Product 1"

Yes, what kind of "choose" this one ???

(there are actually several products, and for each there is a function in the file that changes/updates the data in the corresponding div, p or span tag).

Harsh...

For some elements (which are loaded as links), I would like to display a more detailed description in the modal window, but this does not work for me.

Link descriptions? Elements? On what action should the modal window appear? By click? To the product link? Or where?

Can you please tell me if it is possible somehow to load data into the model window after adding/updating elements with content?!

What kind of elements with content - new products? Or do the products stay the same, only the descriptions change?
Extremely confusing and the code looks rather strange, it looks like you are doing some fairly common and simple task, in a very specific way, and explaining what needs to be done in an extremely confusing way...
Try to describe what needs to be done in simple words, or even better - give an example on another site with similar functionality.