Is it correct to concatenate PHP in Javascript?

Question

I often use this method, but do not know if it is appropriate, to rescue the id in JS I use echo php

<script type="text/javascript" src ="js/jquery.js"></ script>
<script type ="text/javascript">

$("document").ready(function(){
    $('.artigo-<?=$artigo['artigo_id']?>').click(function(){
        /* executa funçao */
     });
});
</ script>

<? php
$ artigo[] = array (); 
$ artigo['artigo_id'] = 1;
?>

<a class="artigo-<? = $artigo['artigo_id']?> " href =" javascript: void (0); ">executar</a>

Answer 1

It’s okay to do that, all that’s between <?php ?> and <?= ?> will be interpreted by PHP, the rest is just any text that will be sent to the HTTP server and consequently to the browser without modification.

Just remember that the code you are writing is PHP. It is possible to merge free texts into PHP code in a technique known as templating. Note that this is a text that PHP has no knowledge of, you can have whatever you want there. Of course it doesn’t make sense to put anything there, it makes sense to put HTML and very eventually CSS and/or JS.

It is not usually good to mix CSS and JS in HTML unless in rare cases very well thought out and very narrowly. This is a case where you should probably have most of the JS/jQuery in another file working with parameter to receive the such from artigo_id. It would not be absurd to have in HTML the call to the function that does this.

Of course I hope that this code is just an example. It does nothing useful in the way it was placed. It could be much simpler.

See more.

Answer 2

At first it is good to clarify that "Concatenate PHP in JS" is perhaps not the best description of what happens there, I believe that the most correct term would be something like "Dynamically generate JS with PHP", after all what happens is that you create parts of javascript printing (echo) PHP content.

To answer the question: depending on your case I would say that is the most appropriate option yes. If you have a small JS, let’s say something like your example of about 20 lines or less, and it needs to manipulate data that is on the server-side (php), echo and take the content that you need from PHP is simply the simplest way, if it works and it’s readable code there’s no reason why anyone should complain.

If your JS has a reasonable size the situation already changes, having a mega block of javascript in the middle of PHP code is something that I consider appalling, it completely contradicts the code around, it is difficult to read and it is something that clearly breaks the separation of responsibilities. In this case I recommend putting the JS in place, a file. js separate, and for you to have access to the phpnian values (heh that unfortunate word) that you need there are three options:

1. Ajax, your javascript asks the server for the values you need. It’s a "pure" solution since you don’t mix php and javascript directly, but it’s the most swollen since you’ll have to have an AJAX block in js, a php endpoint ("url that ajax will call") and an extra request that the client will have to do after loading the page.
2. In php echo the data js needs as value of a Hidden input, e.g.: echo '<input id="mypreciousdata" type="hidden" value="' . $var . '" />'; and in js you do something like console.log($("#mypreciousdata").val());. This is also a "pure" solution in terms of code separation, does not generate overhead like ajax and is reasonably simple.
3. In php you generate a JS that has the data stored in some global object, e.g.: echo '<script>var MeuApp = {data1: "' . $var . '", data2: "' . $var2 . '"};</script> and in your JS just access to such variable console.log(MeuApp.data1);. This is usually my most used strategy because I consider pragmatic. Although mixing js and php code to insert the data into the object will be only a few lines of code in it, being the bulk of your js that will use the data in a separate file.