Skip Navigation

[Résolu] Cannot add js script in content template using layout editor

Ce fil est résolu. Voici une description du problème et la solution proposée.

Problem:

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.

Solution:

Relevant Documentation:

The correct way to add the scripts are these:

https://toolset.com/forums/topic/cannot-add-js-script-in-content-template-using-layout-editor/#post-1233749

This support ticket is created Il y a 3 années et 2 mois. There's a good chance that you are reading advice that it now obsolete.

This is the technical support forum for Toolset - a suite of plugins for developing WordPress sites without writing PHP.

Everyone can read this forum, but only Toolset clients can post in it. Toolset support works 6 days per week, 19 hours per day.

This topic contains 10 réponses, has 3 voix.

Last updated by Robert Campbell Il y a 3 années et 2 mois.

Assigned support staff: Luo Yang.

Auteur
Publications
#1233451

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

#1233623

Luo Yang
Supporter

Languages: Anglais (English ) Chinois simplifié (简体中文 )

Timezone: Asia/Hong_Kong (GMT+08:00)

layout.JPG
js-errors.JPG

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/

#1233732
image-3.jpg
image-2.jpg
image1.jpg

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

#1233749

Luo Yang
Supporter

Languages: Anglais (English ) Chinois simplifié (简体中文 )

Timezone: Asia/Hong_Kong (GMT+08:00)

ct-js.JPG

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.

#1233761

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

#1234104

Luo Yang
Supporter

Languages: Anglais (English ) Chinois simplifié (简体中文 )

Timezone: Asia/Hong_Kong (GMT+08:00)

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

#1234160

Luo Yang
Supporter

Languages: Anglais (English ) Chinois simplifié (简体中文 )

Timezone: Asia/Hong_Kong (GMT+08:00)

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.

#1234624

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

#1234754

Luo Yang
Supporter

Languages: Anglais (English ) Chinois simplifié (简体中文 )

Timezone: Asia/Hong_Kong (GMT+08:00)

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/

#1234767

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.]

#1235238

Dear Luo

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