Hello,
I have a multiple product elements that get their class and ID from PHP:
$product1["codename"] = "product-1";
$product1["short"] = "Great Product 1";
$product2["codename"] = "product-2";
$product2["short"] = "Great Product 2";
<div class="leftMenuProductButton" id="'. $product1["codename"].'" >'. $product1["short"].'</div>
<div class="leftMenuProductButton" id="'. $product2["codename"].'" >'. $product2["short"].'</div>
These display as:
<div class="leftMenuProductButton" id="product-1" > Great Product 1</div>
<div class="leftMenuProductButton" id="product-2" > Great Product 2</div>
In the page, I have an element that I want to replace the HTML:
<div id="productPopupTop">
//Replace this content
</div>
Using jquery, I have tried the following:
$( '.leftMenuProductButton' ).hover (
function () {
var swapNAME = $(this).attr("id"); //gets the ID, #product-1, #product-2 etc. This works.
$("#productPopupTop").html(' <? echo $' + swapNAME + '["short"] ?>'); //This is supposed to get something like <? echo $product-1["short"] ?> This doesn't appear to work.
},
function () {
//this is just here for later
});
If I try to do an alert('<? echo $' + swapNAME + '["short"] ?>'); it will literally display something like <? echo $product-1["short"] ?>
Please note that both the Javascript and the PHP are externally linked in a PHP file (index.php <<< (js.js, products.php)
QUESTION: How do I replace the HTML() of #productPopupTop with the ["short"] of a product? If I should use Ajax, how would I code this?