[Resolved] Cannot add js script in content template using layout editor

[Author]

Posts

[Robert Campbell]

I am designing a test page which you can see at hidden link

It uses the content template 'test-js-layouts-problem'

Which is add to the layout 'test-js-layouts-problem'

I want to add two js scripts which are called via the code lines;

<script type="text/javascript" src="hidden link"></script>
<script type="text/javascript" src="hidden link"></script>

I want to add these to the html area of the content template.

When I edit the content template via the layout; and I add the two scripts and press 'apply', then the scripts are not added.

If I add the scripts by editing the content template directly, then the scripts are added but the layout can no longer to edited.

Can you advise the correct way to add the scripts please.

Regards

Robert

[Luo Yang]

Dear Robert,

I can see the problem in your website, please check this:
Edit the layout "test-js-layouts-problem"
hidden link

I see a lots of JS errors, see screenshot js-errors.JPG

It is abnormal, there isn't the same problem in my localhost with a fresh wordpress installation, using the same codes as your website, see screenshot layout.JPG

I suggest you check these:

1) Make sure you are using the latest version of Toolset plugins, you can download them here:
https://toolset.com/account/downloads/

2) In case it is a compatibility problem, please deactivate other plugins, and switch to wordpress default theme 2019, deactivate all custom JS/PHP codes, and test again

3) Also check if there is any PHP/JS error in your website:
https://toolset.com/documentation/programmer-reference/debugging-sites-built-with-toolset/

[Robert Campbell]

Dear Luo

Here is what I tried:

1. Deactivated all non Toolset Plugins.

2. Changed to standard wordpress theme.

Problem remains and I get lots of js errors showing.

I then tried deleting and then recreating the layout.

Image-1 shows the layout with no script added to the content template - no errors

Image-2 shows the layout with only the following added:

<script type="text/javascript">
</script>

Errors appear; and once the layout is saved, it can no longer be edited.

So I tried exactly the same test on another WordPress site I have. Note the different url in Image-3. Exactly the same problem.

I understand you did not have the problem on your local host; but I am getting identical problem on multiple sites.

Can you have another look please.

Regards

Robert

[Luo Yang]

You are right, I can see the problem in my localhost.

The correct way to add the scripts are these:
1) Edit the content template, move your custom JS codes into section "JS editor".
Notice, you don't need to use "script" wrapper:

<script type="text/javascript">
</script>

just put the JS codes in to "JS editor" directly.

2) In content of content template, display links of other external JavaScript file:

<script type="text/javascript" src="<em><u>hidden link</u></em>"></script>
<script type="text/javascript" src="<em><u>hidden link</u></em>"></script>

See screenshot ct-js.JPG

But there is another problem, when you edit the layout again, the external JavaScript file codes of content template cell will be lost, can you confirm it in your website, I will escalate this problem.

Currently, you will need to setup the external JavaScript file codes by editing the content template directly.

[Robert Campbell]

Dear Luo

You are correct. The external javaScript file codes are lost when you edit the content template via the layout. I would be grateful if you could escalate this issue please.

Regards

Robert

[Luo Yang]

Thanks for the confirmation, I have escalated this issue, will update here if there is anything news.

[Luo Yang]

Here is the feedback from our 2nd tier supporters:
This is a known issue, for security reason it will not be fixed, as WP standard, the script tag will be removed.

So currently, you will consider one of below options:
1) setup the external JavaScript file codes by editing the content template directly.
2) setup custom PHP codes to enqueue those external JS files:
https://developer.wordpress.org/reference/functions/wp_enqueue_script/

for example:
https://developer.wordpress.org/reference/functions/wp_enqueue_script/#comment-274

3) Add a feature request for it:
https://toolset.com/home/contact-us/suggest-a-new-feature-for-toolset/
Our developers will evaluate it.

[Robert Campbell]

Dear Luo

Thank you for the update.

If I enqueue the external js files from my functions.php, is there a way to link the call to either a wordpress page id or to the template id? I don't want to load the functions for every page.

Regards

Robert

[Luo Yang]

It is possible to link the call to either a wordpress page id, for example, you can use WordPress function is_page() to check if current page is specific page.
https://developer.wordpress.org/reference/functions/is_page/

But it is not possible by content template id, I suggest you try with:
is_singular() check if current post is a single post of specific post type
https://developer.wordpress.org/reference/functions/is_singular/

is_tax() check if it is a archive page of specific taxonomy archive page:
https://developer.wordpress.org/reference/functions/is_tax/

[Akhil]

Robert, you need this .
https://wordpress.org/plugins/custom-css-js/

pro version allow you to specify the exact page to display .cheers
[ps: there is some other free plugin but i prefer this.]

[Robert Campbell]

Dear Luo

Thanks for the advice. I will try the php method to call the js code on specific pages.
Regards
Robert