[Resolved] CRED forms and Bootstrap tabs

[Author]

Posts

[volodiaB]

Hello,

I am using Bootstrap tabs to have different CRED forms on the same page.

The thing is that, while being in a tab, the map preview of the address field is not loading properly (see print screen).

Also, if the CRED form of tab 2 has error(s), the error message is displayed in tab 1 instead (see print screen).

I guess that this would be the same for the message that is displayed instead of the form after submission.

Can you help me with this?

Regards,
Volodia

[Nigel Supporter Languages: English (English ) Spanish (Español ) Timezone: Europe/London (GMT+01:00)]

I did some testing and I was able to reproduce the problems you described.

- errors from the second form appear above the first form. This appears to be the case whenever there are multiple CRED forms on the same page, whether they are in bootstrap tabs or not.

I have escalated this ticket so that our developers can investigate further.

- google map not rendering. In my tests I found that this is not an issue specific to CRED, I was unable to display a map in a bootstrap tab at all.

You can fix this issue by using JavaScript to trigger a reload of the map when you select the relevant tab.

If you edit the form you will see a box where you can add custom CSS and JS. Make a note of the map id your form is displaying, then add this custom JS, replacing the map id as required.

jQuery('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
    WPViews.view_addon_maps.reload_map('map-1');
})

Thanks for bringing these issues to our attention and apologies for the inconvenience.

[volodiaB]

Thank you for your reply Nigel.

I had a look in the Chrome Console but couldn't find the map-id of the preview. Could you guide me through?

And do you know if the message that is displayed instead of the form will be displayed in the right tab, this tab be open after submission ?

Regards,
Volodia

[Nigel Supporter Languages: English (English ) Spanish (Español ) Timezone: Europe/London (GMT+01:00)]

You should be able to see the map_id in the shortcode where you add your map.

I also saw the map id in Chrome devtools added as a "data-map" attribute.

As for your last point, I'm not sure, you will need to test and see.

[volodiaB]

Hi Nigel,

I didn't integrate the Google Map using the Views plugin. The map preview comes automatically with the CRED address field (see print screen).

Regards,
Volodia

[Nigel Supporter Languages: English (English ) Spanish (Español ) Timezone: Europe/London (GMT+01:00)]

Sorry Volodia

I missed your follow-up question. Could you verify, the Google Maps preview works if you display your form on its own page, and fails if you include it within a bootstrap tab, correct?

[volodiaB]

Hi Nigel,

Yes it works fine when the Google Maps preview is displayed on its own page.
Seing that those bugs are not trivial to solve, I opted for 2 separated pages.

Regards,
Volodia

[Nigel Supporter Languages: English (English ) Spanish (Español ) Timezone: Europe/London (GMT+01:00)]

Hi Volodia

I just wanted to let you know that an update of the Toolset suite is planned for next week, but a fix for this CRED issue won't make it into this update, it will be worked on for the subsequent release.

Thanks for your patience.