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

[Author]

Posts

[Rita]

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

[Shane]

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

[Rita]

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

[Shane]

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

[Rita]

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

[Shane]

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

[Rita]

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?

[Shane]

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

[Rita]

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!

[Shane]

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 ]

[Rita]

Ah good spot Shane. Thank you!