Replacing div html() by echoing PHP - how to?

Question

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?

Answer 1

try this:

$( '.leftMenuProductButton' ).hover (
            function () {
                $("#productPopupTop").html($(this).html());


            },
            function () {
            //this is just here for later

    });

Answer 2

As knittl mentioned, php is a pre-processor on the server, and can't do anything once the page has been sent to the client.

The options I can think of are

1. Store the product information in javascript on the client (i.e. a javascript array that is populated with php)

2. Use ajax to query the server with a codename and receive the corresponding data (i.e. server.com/getshort.php?codename=product-2, which would respond with Great Product 2).

If the text within the tag is always the same, @Kasia's answer will work, and is simpler.