Send php variables to jquery function - php

Question

Ok, I need to send data from PHP to jquery and use jquery function to update that data into HTML.
But the problem is jquery want update HTML elements with PHP data...
This is php code.Php is called from ajax.
$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 type="text/JavaScript">';
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 'showProduct();';
echo '</script>';
}
}
//echo $product_num_id;
mysqli_close($dbc);
exit();
}
This is jquery function for updating html elemtns:
function showProduct()
{
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);
}
And this is html elements:
<div class="product_view_info">
<ul class="product">
<li><img id="product_image_put" src="" alt=" Product Photo"></li>
<li class="informations">
<div class="product_name"><h4 id="product_name_put"></h4></div>
<div class="desc_info"><p id="product_desc_put"></p></div>
<img id="product_size_put" src="" alt="Size Photo">
</li>
</ul>
</div>
This is a problem: https://ibb.co/HGyJkwB
UPDATE: AJAX CODE: When user click on product ajax sending id of clicked product to php.
$(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() {
$(".big_categoryes").fadeOut("fast");
$(".all_products").fadeOut("fast");
$(".product_view_info").fadeIn("smooth");
}
});
});

Answer 1

U can get data from PHP as json like so:
if(mysqli_num_rows($r) > 0) {
while($row = mysqli_fetch_assoc($r)) {
$product = (object)[];
$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 json_encode($product);
}
}
mysqli_close($dbc);
exit();
and get data from json with jquery:
$(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(response) {
var product = JSON.parse(response);
console.log(product.image);// example
showProduct(product);
$(".big_categoryes").fadeOut("fast");
$(".all_products").fadeOut("fast");
$(".product_view_info").fadeIn("smooth");
}
});
});
function showProduct(product){
$("#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);
}
I hope this could help you.