用div替换php内容

Question

When a user clicks on product image ajax send id of product to PHP. PHP find product in MySQL database and fills data into HTML.

The problem is when PHP fill data that data do not exist on the current page. https://ibb.co/DG1sSNz --Product data is empty

Data is stored in another page same as index.php (I found data in chrome network tab) https://ibb.co/3SVmyQb

How can I solve this problem? And btw this is a wordpress site.

This is jquery code with ajax

$(document).on("click touchend", ".product_stake_stapovi, .product_invalidska_kolica, .product_antidekubitni_program, .product_ortoze, .product_mideri, .product_pojas, .product_toaletni_program, .product_bolnicki_kreveti_i_oprema", function (event) {
        var product_num_id = $(this).children(".num_id").attr("id"); //Getting id from image element (that is location of real stored id in database)
        var product_id = $(this).attr("class");
        var product_real_id = product_id.replace("col-3 col ", ""); 
        $.ajax({
            method: "POST",
            url: "index.php?proizvodi",
            data: ({product_num_id:product_num_id}),
            success: function(data) {
                //console.log(product_num_id);
                $(".big_categoryes").fadeOut("fast");
                $(".all_products").fadeOut("fast");
                $(".product_view_info").fadeIn("smooth");

            }
        });
    });

if(isset($_POST["product_num_id"])) { //ini_set('display_errors',1); //error_reporting(-1); $servername = "localhost"; $username = "medit105_admin"; $password = "s*ib#^Z*3pkL"; $database = "medit105_meditalis"; $dbc = mysqli_connect($servername, $username, $password, $database); //Konekcija na server - bazu podataka mysqli_query($dbc, "SET NAMES utf8"); mysqli_query($dbc, "SET CHARACTER SET utf8"); mysqli_query($dbc, "SET COLLATION_CONNECTION='utf8_unicode_ci'"); #Provera konekcije: if(!$dbc) { die("Connection failed: " . mysqli_connect_error()); } $product_num_id = $_POST["product_num_id"]; $q = "SELECT * FROM meditalis_proizvodi WHERE id = '$product_num_id'"; $r = mysqli_query($dbc, $q); if(mysqli_num_rows($r) > 0) { while($row = mysqli_fetch_assoc($r)) { ?>

<ul class="product">
    <li><img src="wp-content/themes/meditalis-to-wp/assets/products/<?php echo $row[" image "]; ?>" alt=" Product Photo"></li>
    <li class="informations">
        <div class="product_name">
            <h4><?php echo $row["name"]; ?></h4></div>
        <div class="desc_info">
            <p>
                <?php echo $row["description"]; ?>
            </p>
        </div>
        <img src="wp-content/themes/meditalis-to-wp/assets/products/<?php echo $row[" size_img "]; ?>" alt="Size Photo">
    </li>
</ul>

<?php }
}
//echo $product_num_id;
mysqli_close($dbc);
exit();
}

It's possible to replace data from a new page to the current page on screen without a refreshing page?

EDIT: Ok, I put PHP on top of the page and run jquery inside PHP.I used json_encode for variables and try to fill data to HTML with jquery. But now jquery want run and php want pull data from database(idk why).

        $product_image = "";
        $product_name = "";
        $product_description = "";
        $product_size = "";

        if(mysqli_num_rows($r) > 0) {
            while($row = mysqli_fetch_assoc($r)) { 

                $product_image = "wp-content/themes/meditalis-to-wp/assets/products/" . $row["image"];
                $product_name = $row["name"];
                $product_description = $row["description"];
                $product_size = "wp-content/themes/meditalis-to-wp/assets/products/" . $row["img_size"];


                echo '<script>';
                echo 'var product_image = ' . json_encode($product_image) . ';';
                echo 'var product_name = ' . json_encode($product_name) . ';';
                echo 'var product_description = ' . json_encode($product_description) . ';';
                echo 'var product_size = ' . json_encode($product_size) . ';';
                echo 'alert("dbg");';
                echo '$("#product_name_put").html(product_name);';
                echo '$("#product_desc_put").html(product_description);';
                echo '$("#product_image_put").attr("src", product_image);';
                echo '$("#product_size_put").attr("src", product_size);';
                echo '</script>'; 

            }
        }

This is output in network tab: var product_image = "wp-content/themes/meditalis-to-wp/assets/products/invalidska kolica/KOLICA MEHANIcKA EXCEL PLUS.jpg";var product_name = "Kolica mehanicka excel plus";var product_description = "Standardna mehani\u010dka kolica
\u0160irine sedi\u0161ta 36-40-43-46-50 cm
Stranice: preklopive
To\u010dkovi: pune gume napred i pozadi
Te\u017eina kolica : 16kg
Nosivost kolica : 120kg
Proizvo\u0111a\u010d: MOVI, Italija
";var product_size = "wp-content/themes/meditalis-to-wp/assets/products/";alert("dbg");$("#product_name_put").html(product_name);$("#product_desc_put").html(product_description);$("#product_image_put").attr("src", product_image);$("#product_size_put").attr("src", product_size);

Answer 1

Your will get HTML on ajax response. Then you can use that Ajax response in your Ajax success function and can append that wherever you want as below:

$(document).on("click touchend", ".product_stake_stapovi, .product_invalidska_kolica, .product_antidekubitni_program, .product_ortoze, .product_mideri, .product_pojas, .product_toaletni_program, .product_bolnicki_kreveti_i_oprema", function (event) {
        var product_num_id = $(this).children(".num_id").attr("id"); //Getting id from image element (that is location of real stored id in database)
        var product_id = $(this).attr("class");
        var product_real_id = product_id.replace("col-3 col ", ""); 
        $.ajax({
            method: "POST",
            url: "index.php?proizvodi",
            data: ({product_num_id:product_num_id}),
            success: function(data) {
                alert(data) //It will have your HTML, you can use this HTML wherever you want.
                //console.log(product_num_id);
                $(".big_categoryes").fadeOut("fast");
                $(".all_products").fadeOut("fast");
                $(".product_view_info").fadeIn("smooth");

            }
        });
    });

Hope it helps you!!