How to manage a hook without an error

JavaScript
1

I have tested and added a hook into project file (format) JavaScript to test all errors.

window.Parsley.setLocale('en'); 
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&libraries=places&key=XXX&language=XX&region=XX" async defer></script>

It is an error:
Uncaught SyntaxError: Unexpected token ‘<’

What is wrong with the syntax?
Need help.

2

… are you in the middle of a javascript block, and you’ve just randomly inserted some HTML?

3

I try to insert two JavaScript codes using a hook in WP:

<script type="text/javascript"></script>
<script src="" async defer></script>

a hook is related to pure JS file although it could be used PHP.

5

Right… but in your first post, you said:

The first line is a line of Javascript code.
The second line is a line of HTML.
They cant exist in the same context back to back like that.

Either you’re in an HTML context, and there should be a </script> tag after line 1 (and a <script> tag somewhere above it),
or you’re in a Javascript context, and the HTML doesnt belong there,
or you’re in some other scripting context that requires explanation.

6 
<script type="text/javascript">window.Parsley.setLocale('en'); </script>
<script src="" async defer></script>

I am sorry but it is simple Google API detail inside JS file:

<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&libraries=places&key=XXX&language=XX&region=XX" async defer></script>

Another inserted code is a simple language detection:

<script type="text/javascript">window.Parsley.setLocale('fr');</script>

I am not sure but this is not HTML…

7

There’s obviously a language barrier here that I… am just not able to understand through.

You say the system is throwing a SyntaxError.

What line of code is it saying is causing the SyntaxError?

8

Syntax error: Uncaught SyntaxError: expected expression, got ‘<’

<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&libraries=places&key=XXX&language=XX&region=XX" async defer></script>
10

And what’s on the line immediately before this?

11

window.Parsley.setLocale(‘fr’);

12

… again, that’s a javascript line.

If this is a javascript file (something.js), you cant just stick HTML in the middle of it; it’s not an HTML file.

13

Ok.
Can you provide two lines that we test to solve tow lines JavaScript content inside JS file?

14

Ok.
Can you provide two lines that we test to solve tow lines JavaScript content inside JS file or PHP code to echo inside hooks all the time all JavaScript content or a javascript line?
Is there a demo for hooks using JavaScript content?

15

well generally you wouldnt. You’d include both files in the HTML.

<script src="something.js" type="text/javascript"></script>
<script src="https://maps.googleapis.com/maps/api/ etc etc etc" type="text/javascript"></script>

Order depending on what depends on what.

16

I have validated again. The second line is not a JS script. So, we should add inside a hook HTML/PHP files and add HTML inside a PHP content tags:

<?php 
    $js_code = '<script type="text/javascript">window.Parsley.setLocale("fr")</script>';
    echo $js_code;
    echo '<script type="text/javascript" src="https://maps.googleapis.com/maps/api/ etc etc etc"></script>';
?>
17

Can your please provide also a hook inside WordPress as it seems it does not detect HTML:

  wp_enqueue_script('api_google1',get_template_directory_uri() . '/api_google1.html','','',true);

One option which is nicer it is added API value:

wp_enqueue_script( 'google_js', 'https://maps.googleapis.com/maps/api/bla bla', '', '' );

But how to add also elements to the script: async defer and which version

18

@m_hutley is right you’re trying to insert HTML in the middle of a JavaScript file, which is causing the syntax error. In JavaScript files, you can’t just stick HTML in the middle of it; it’s not an HTML file.

var script = document.createElement('script');
script.src = 'https://maps.googleapis.com/maps/api/js?v=3.exp&libraries=places&key=XXX&language=XX&region=XX';
document.head.appendChild(script);

Just replace 'https://maps.googleapis.com/maps/api/js?v=3.exp&libraries=places&key=XXX&language=XX&region=XX' with your actual script URL. This should load your external script without causing any syntax errors.

As for the window.Parsley.setLocale ('fr'); line, you can keep it as is in your JavaScript file.

19

I have tested JavaScript is without an error but it will cause an issue inside Google Console as Google API is not detected when using your code and API Key.

You missed how to add also elements to the script: async defer.
Maybe it can be added to the above great script.

Currently, it works in Mozilla but Google Chrome is not working. I have to wait due to Cache. Currently it is jQuery is not compatible with Quirks Mode. Maybe Chrome reacts differently as Mozilla.