I have been JS code provided by toolset to limit number of selections on a taxonomy dropdown in CRED form.
It has all been working fine but now it is not working. This is the setup - hidden link
Full code
jQuery(document).ready(function($){
jQuery("select[name='project-category[]']").prepend('<option value="">- Please select a project type -</option>');
jQuery("select[name='project-category[]']")[0].selectedIndex = 0;
});
jQuery(document).ready(function($){
jQuery("select[name='industry-category[]']").prepend('<option value="">- Please select an industry -</option>');
jQuery("select[name='industry-category[]']")[0].selectedIndex = 0;
});
//limit selection of 3 skills in an endorsement
jQuery(document).ready(function($){
var tema_limit = 3;
jQuery("select[name='skill-category[]']").on('click', 'option', function() {
if(jQuery("select[name='skill-category[]'] option:selected").length > tema_limit) {
this.selected = false;
alert("Maximum 3 Options allowed.")
}
});
});
// Add a placeholder for difficulty level
jQuery(document).ready(function($){
jQuery("select[name='difficulty-level[]']").prepend('<option value="">- Please select a difficulty level -</option>');
jQuery("select[name='difficulty-level[]']")[0].selectedIndex = 0;
});
// Add a placeholder for difficulty level
jQuery(document).ready(function($){
jQuery("select[name='time-commitment[]']").prepend('<option value="">- Please select time commitment -</option>');
jQuery("select[name='time-commitment[]']")[0].selectedIndex = 0;
});
None of this code executing on the form. Interestingly, this works on my staging site but not on production. The code is identical so I thought the issue was because of caching. So, I disabled the Wp Rocket plugin and tested it in incognito but nothing changed.
I am using Cloudflare as a CDN and there I removed minification for JS but the issue still exists. I have seen this article that suggests uploading files to CDN - https://toolset.com/documentation/programmer-reference/toolset-resource-directories-for-cdn-upload/
But, I am not sure how to do that.
What am I missing here? What could be causing this issue?
Hi,
Can you please share temporary admin login details for the production website along with the link to the form page?
Note: Your next reply will be private and it is recommended to make a complete backup copy, before sharing the access details.
regards,
Waqar
Thank you for sharing these details.
During troubleshooting, I noticed that no custom CSS or JS code from the Toolset Forms is getting included in the page's markup, which explains why they have no effect.
Most likely some optimization plugin is interfering with how that custom code. I'll recommend testing the page's markup again, after clearing all involved caches.
If the issue still persists, you can deploy the clone of this production website on a different server/location and then test it will all non-Toolset plugins disabled and the default theme like Twenty Twenty-One.
Once fixed, you can start adding the disabled items, one by one, to narrow down to a possible conflicting one.
I hope this helps and let me know how it goes.
Waqar,
I did the following -
1. Disabled Cloudflare CDN
2. Disabled the only optimization plugin I have - WP Rocket
3. Disabled custom cron job used to cache pages
4. Disabled a few other plugins that could have caused the issue.
But no impact. The forms work on my staging site with WP Rocket enabled, cron job working and all other plugins on. The only difference is the Types plugin version. Production has the latest version and staging has .14 version.
I can give you access to staging and you can compare the two but as I mentioned earlier - this issue is occurring mainly for toolset form and not other similar forms with JS such as WP Forms.
Update - on further analysis it seems like the JS is rendering on user forms but not post forms. So it seems like the issue is with Toolset not with caching.
Thanks for the update and this is very strange.
Do I have your permission to download a clone/snapshot of this production website?
Waqar,
I would prefer if you don't download the site. I can give you a staging site to work if you want. Will that work?
Also, here is the example of the user form that has JS and works -
Page - hidden link
First form - hidden link
Hello,
Within Toolset Forms, you can use JS event "cred_form_ready" to trigger your custom JS codes, I have done below modifications in your website:
1) Edit the user form "Career Goals for Pros - Target Role"
hidden link
In section "JS editor", line 125~127, add below codes:
jQuery( document ).on( "cred_form_ready", function() {
console.log('Here is your custom JS codes');
});
2) Test it in frontend:
hidden link
I can see it works fine, see my screenshot cred_form_ready1.JPG
Luo,
Thank you for jumping in. Let me explain the issue again for clarity -
1. The JS is rendered without issues on User form as you confirmed yourself.
2. The JS does not render on post forms. I have given an example of the post form to Waqar --it is the Prompt Creation Form on /Create-project-prompt page
The details are provided in the private message. Can you please review that form and recheck the issue?
As I mentioned in the thread, I have tried to remove all the caching out there to see if that's an issue but the post forms are not rendering JS.
Thank you for waiting, while I was away for a couple of days off.
I've done some more testing on my test website, but couldn't reproduce this issue of the inclusion of custom scripts and CSS code.
Unfortunately, troubleshooting on the website's clone is important to investigate this without the influence of any specific server or CDN configuration. To ensure the privacy and security of the data, we delete all copies of client sites, once the issue is resolved.
Waqar,
Hope you had a good break. You may download a clone.
Thank you for the permission.
During troubleshooting on your website's clone, I noticed that the issue with the custom code inclusion from the post forms is fixed, if the Elementor template "Share LinkedIn Profile" is removed or set to draft status.
The significance of this template is that it loads the two user forms ( "Import LinkedIn Profile" and "Import LinkedIn Profile - delayed import" ) on all pages.
After some further testing on my test website, I was able to reproduce this behavior, even without the Elementor plugin. It turns out that, if a page contains some user and post forms both, then the custom CSS and JS code are loaded only from the type of form that is loaded in the last, and the custom code from the other type is ignored.
This means that if the last loaded form is a user form, custom code from all included user forms will be loaded and if the last loaded form is a post form, then the custom code from all included post forms will be loaded.
I've shared these findings with the concerned team for further review and will keep you updated through this ticket.
For now, a workaround can be to include the custom CSS and JS code from all affected post forms into the common user form that you know will be included in all pages of the website.
Waqar,
Amazing work my friend. I have been able to temporarily resolve this issue by removing the "Import LinkedIn Profile" form from the pop-up and enabling the popup only on two pages.
I will wait for a more holistic answer from your team.
Glad I could help and I'll keep you updated on the progress.
