How to insert a PHP function into JS?

Question

I need to extend an online application by a translation functionality.
The application consists of a frontend (HTML+JS) and a backand (PHP), which is connected to a database.
The frontend and backend communicate via Ajax (jQuery).

From my colleague I got another PHP file with a function func which takes a word as a parameter. It then looks up its definition in the database, according to the set language, and returns the translated word.

Suppose I have a simple HTML form, that would look like this:

<?php echo func("Name"); ?>: <input type="text" id="name" />
<?php echo func("occupation"); ?>: <input type="text" id="address" />
...

If the language was set to French, the output would look like:

Prénom: <input type="text" id="name" />
Profession: <input type="text" id="address" />

But in my case all the output comes dynamically from the database via Ajax (jquery). So I assume, I would need to put PHP into my JS script.

When I try:

function getData() {
    $.ajax({
        type : "GET",
        url : "backend.php",
        data : {
            q : "query",
            attribut : "attr",
        },
        success : function(data) {
            $.each(data, function(i, item) {
                $('.myDiv').append("<button>" + <?php echo htmlspecialchars(tr(" + item.value +  "))?> + "</button>");
        },
        error : function(jqXHR, status, error) {
            console.log(status, error);
        }
    });
}

In this case I get the following error:

Uncaught SyntaxError: Unexpected token <

PS: The actual translation function in the PHP script comes from me colleagues, so I don't have any influence here, I just need to get it work.

You cannot write PHP in a .js file, of course. What about fetch all words translated and putting them in a javascript array at the end of your .php file? — Theraloss, Dec 19 '16 at 15:16
`javascript` runs on client side, `php` on server side. all `php` is compiled and comes to the browser as `html`. So you cant run `php` on client side. you have to get that in mind. You have to prepare your data in `item.value` before getting via ajax. — JustOnUnderMillions, Dec 19 '16 at 15:17
`actual translation function` is not the issue. The ` +` to `+ item.value +` — JustOnUnderMillions, Dec 19 '16 at 15:20
Do this for the buttons: `""`, if you have to change the values do it in php. — JustOnUnderMillions, Dec 19 '16 at 15:22
if you have to, use the htmlspecialchars() function in backend.php and output the content — JustBaron, Dec 19 '16 at 15:23
Just a note: `$('.myDiv').append("");` - You have "+" sign both before generating the "JavaScript string" with PHP and in JavaScript itself. The resulting JavaScript would have `+ + item.value + +` in the code. — Ezenhis, Dec 19 '16 at 15:36
Without seeing the PHP code it would be hard to know for sure, but there would have to be PHP that called the function e.g., `myFunction($_POST['name'], $_POST['address']);` and that function would echo the result of the function. Your `data` resource in your AJAX call has to send what the PHP file is expecting. — Jay Blanchard, Dec 19 '16 at 16:16
Can you show us what is returned from PHP? The response should be in your browser's developer tools. — Jay Blanchard, Dec 19 '16 at 16:26

Ezenhis · Answer 1 · 2016-12-19T16:19:08.697

0

Maybe this would help you understand the results you get from the AJAX call. After using AJAX to call the PHP script, you will have the output of the PHP script stored in the data variable used in the success function. Try the following:

function getData() {
    $.ajax({
        type : "GET",
        url : "backend.php",
        data : {
            q : "query",
            attribut : "attr",
        },
        success : function(data) {
           console.log(data);
        },
        error : function(jqXHR, status, error) {
            console.log(status, error);
        }
    });
}

This should display the result from your AJAX call in your browser's console. Then the question is no longer about getting the data, but about properly making use of it. ;)

UPDATE
So in your scenario, you could have your labels wrapped in span elements:

<span class='name-wrapper'>Name</span> <input ... >

and then once you have the AJAX response, use

$('.name-wrapper').html( data ); // data being the variable in the 'success' function of Ajax call

edited Dec 19 '16 at 16:19

answered Dec 19 '16 at 15:44

Ezenhis

997
9
14

Thanks. The problem is not getting the data, but properly make use of the PHP function I got from my colleague. – Evgenij Reznik Dec 19 '16 at 15:55
The `data` should contain whatever you asked the php about. Let's say that you call the script with Ajax GET `backend.php?q=name` and the script returns output "Prénom". Then you can use the `.html()` or `.append()` functions to use that information. – Ezenhis Dec 19 '16 at 15:57
Once the AJAX call returns the value, you no longer have to worry about PHP. The value is a pure JavaScript variable. – Ezenhis Dec 19 '16 at 16:01
Please see the update. – Ezenhis Dec 19 '16 at 16:19

Youssef · Answer 2 · 2016-12-19T15:24:25.193

You're getting this the wrong way:

Your PHP code is executed on the Server
Your Javascript code is executed on the client's machine

So item.value in your example is a client side variable, and you're trying to use it with PHP.

If you need "item" to be translated when appended to '.myDiv' you can either:

do the translation in the server beforehand and send a translated version of item.value back to the client
add a web service that takes a key and searches the database fo a translation.

The first suggestion would be better as there is no need to have multiple calls to the server here.

How to insert a PHP function into JS?

2 Answers2