Skip Navigation

[Resolved] Cannot add new hierarchical taxonomy with CRED form in safari

This thread is resolved. Here is a description of the problem and solution.

Problem:

The issue here is that the user's Add New button on their Toolset form isn't showing up in Safari browsers

Solution:

This issue was actually being caused by the user's javascript that was being used on the form.

It was complaining about the syntax of this line.
var c = $("select[name='market-category[]'").prepend(s);

The correct solution was.
var c = $("select[name='market-category[]']").prepend(s);

This support ticket is created 5 years, 3 months ago. 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.

Sun Mon Tue Wed Thu Fri Sat
- 9:00 – 12:00 9:00 – 12:00 9:00 – 12:00 9:00 – 12:00 9:00 – 12:00 -
- 13:00 – 18:00 13:00 – 18:00 13:00 – 18:00 14:00 – 18:00 13:00 – 18:00 -

Supporter timezone: America/Jamaica (GMT-05:00)

This topic contains 10 replies, has 2 voices.

Last updated by Rita 5 years, 3 months ago.

Assisted by: Shane.

Author
Posts
#1165487
add new 3.png
add new 2.png
add new 1.png

Hi there

A strange thing... I have various custom post cred forms that include a hierarchical taxonomy with the 'Add New' shortcode so users can add another item. In this example, the taxonomy is called 'Event Cities' and users need to be able to add a city to the taxonomy if it is not already listed in the select dropdown options.

The function works fine in Firefox and Chrome (I haven't/can't check explorer). See screenshots of Safari and Firefox.

After a little inspection in Safari 'element' Safari seems to add a 'style="display:none;" to the placeholder <div> - See screenshot attached.

I have done all the usual checks for conflictions with plugins and themes. Have checked my CSS, function snippets and scripts. No change...

Hoping you might have an idea what to do... It's quite a problem since most of the website's members are using Safari...

#1165588

Shane
Supporter

Languages: English (English )

Timezone: America/Jamaica (GMT-05:00)

Hi Rita,

It could that its being set to that on safari. Not sure why.

However could you remove the display none and try refreshing the page?

If that does not work could you try using this conditional css.

@media screen and (-webkit-min-device-pixel-ratio:0) {
/* Safari-Opera specific declarations here */

.js-taxonomy-hierarchical-button-placeholder{
display: block;
}
}

Finally could you send me a link to the page?

Thanks,
Shane

#1165677

Hi Shane
Yes, I tried to do that, and some CSS ideas and also your media idea - I didn't think of that.
Nothing will make that 'display:none' go away or change.
Here is one form where this issue occurs: hidden link
The site is live and only members can create forms so feel free to sign up to view the form. I will delete your account after if you let me know your account username. No worries.
Thanks much!
Rita

#1165736

Shane
Supporter

Languages: English (English )

Timezone: America/Jamaica (GMT-05:00)

Screenshot 2018-12-13 at 1.41.43 PM.png

Hi Rita,

I tried this and was able to see the issue but I wasn't able to replicate on a fresh install. See Screenshot.

Could you update my account to admin so that I can take a look for you ?

Thanks,
Shane

#1165742

Yes, no problem. You are now an admin. You just need to log in again.

#1165754

Shane
Supporter

Languages: English (English )

Timezone: America/Jamaica (GMT-05:00)

Hi Rita,

The issue is being caused by this JS here.


jQuery(function( $ ) {
var s = '<option value="">Your City</option>';
var c = $("select[name='market-city[]'").prepend(s);
$("option:first", c).attr('selected', 'selected');
} );


jQuery(function( $ ) {
var s = '<option value="">Category</option>';
var c = $("select[name='market-category[]'").prepend(s);
$("option:first", c).attr('selected', 'selected');
} );

Once I removed it from the form it started to work again.

Thanks,
Shane

#1165768

Hi Shane

Ah I see... I updated all the Toolset plugins this morning... so... this presents a new problem then since this script is to set the category to an empty default option - Any City - so the user at least doesn't submit the form with the wrong city.

What I actually need to do is also make that taxonomy required. But have never managed to achieve it...

I have this issue on every form with a taxonomy - some displayed as select drop downs to prevent the user from selecting more than one and some as checkboxes where the user must be able to select more than one.

I have tried SO many ideas, bits of code, this and that... am at my wits end... Do you possibly have another idea I can try?

#1166331

Shane
Supporter

Languages: English (English )

Timezone: America/Jamaica (GMT-05:00)

Hi Rita,

SO the first thing you want to do is to add a default option and then make this taxonomy required correct?

Please confirm as I should be able to provide a solution for this.
THanks,
Shane

#1166391

Hi Shane

Yes exactly. A default 'field is empty' option and for this to be the case whether the taxonomy is displayed as a checkbox or as a select dropdown.

Fingers crossed!

#1166410

Shane
Supporter

Languages: English (English )

Timezone: America/Jamaica (GMT-05:00)

Hi Rita,

I managed to fix your code for safari.

It was complaining about the syntax of this line.
var c = $("select[name='market-category[]'").prepend(s);

The correct solution was.
var c = $("select[name='market-category[]']").prepend(s);

Adding the close ]

#1169704

Ah good spot Shane. Thank you!

This ticket is now closed. If you're a WPML client and need related help, please open a new support ticket.