Calling PHP variable inside a Javascript function

Question

Inside the Nivoslider . js, I have the following line calling the two slider arrows (left and right):

slider.append('<div class="nivo-directionNav"><a class="nivo-prevNav"><img class="seta-esquerda" src="document.write('<?php echo $imagens_links_base . $imagens_links['seta-esquerda'] ;?>');" /></a><a class="nivo-nextNav"><img class="seta-direita" src="document.write('<?php echo $imagens_links_base . $imagens_links['seta-direita'] ;?>');'" /></a></div>');

The parts below are where I try unsuccessfully to display a PHP created variable on the main page:

<?php echo $imagens_links_base . $imagens_links['seta-esquerda'] ;?>

<?php echo $imagens_links_base . $imagens_links['seta-direita'] ;?>

How can I make it right?

Answer 1

The solution would have to be a little more elaborate.

On the home page:

Put the PHP part that processes variables at the beginning of the script, and add something like this in the PHP part:

$esquerda = $imagens_links_base . $imagens_links['seta-esquerda'];
$direita  = $imagens_links_base . $imagens_links['seta-direita'];

And, in the HTML part calling the previous JS, modified:

Assuming the original is like this:

<script src="/scripts/meuScript.js"></script>

You change to

<?php
   // notar que mudamos o .js pra .php:
   echo '<script src="scripts/meuScript.php?esquerda=';
   echo urlencode( $esquerda ) . '"&direita="' . urlencode( $direita );
   echo '"></script>';
?>

Note that the order of the code in this case is important. Your PHP has to produce the correct variables before this <script>, which can take some work depending on how your code is today.

in your Javascript:

First, rename . js script to . php, so that it is processed on the server.

Add these lines at the beginning of the script:

<?php
    $esquerda = $_GET['esquerda'];
    $direita  = $_GET['direita' ];
?>

These lines will extract the paths mounted by the main page, and place them on the varivers $esquerda and $direita, to facilitate the following part.

There modify the lines mentioned in this way:

slider.append('<div class="nivo-directionNav">
   <a class="nivo-prevNav"><img class="seta-esquerda" src="<?php echo $esquerda; ?>" /></a>
   <a class="nivo-nextNav"><img class="seta-direita"  src="<?php echo $direita; ?>" /></a>
</div>');

Brief explanation:

Javascript runs in the browser, and PHP runs on the server. They are completely separate languages and concepts.

The solution proposal does the following: first, on the main page, we send the paths all processed by PHP to the JS file, as part of the URL.

Then, when changing the name of the JS file to PHP, we cause it to be processed on the server, and the variables sent in the URL will be inserted in the JS part, and then sent the result to the browser, with the correct path already being part of the source, like it was typed. The browser doesn’t even know about PHP.

Important: sure has a thousand more elegant ways to solve this problem, the biggest intention of the answer was to "force the bar" for the thing to work the way you’re imagining> Now, forget this solution and rethink the thing in the right order and separate the tasks of each language would be the most correct way.