Hi Guys! Long time no speak! I hope you're all doing good!
I have created a Modal with a form inside.
Within the form I have a location field.
When the form is exected from the modal popup, it does not work as expected.
Instead of it being a google search box with a visible map, it's instead a single line text input with no map.
Do you know how or even if I can fix this at all.
Many thanks!
Hi,
Thank you for contacting us and I'd be happy to assist.
There are two types of modal or pop-up windows:
1. AJAX based:
In this type, the content inside the modal window is not loaded when the page loads. Instead, it is loaded on-demand in the background, when the modal window is opened.
An example is the popup feature that is available with the Elementor plugin.
2. Non-AJAX based:
In this type, the content inside the modal window is loaded when the page loads. Using scripts, the content is shown or hidden, when the modal window is opened or closed.
An example is the Bootstrap 4 modal feature:
hidden link
If you'll place the Toolset Form inside an "AJAX based" modal, any dynamic elements like the date picker for the date type field or the map for the address type field won't work.
For this reason, you'll need to make sure to use non-AJAX modal/popup, if you'd like to put the Toolset Forms inside them.
I hope this helps and please let me know if you need any further assistance around this.
regards,
Waqar
Hi Waqar,
Thank you for getting back to me.
[wpv-layout-start]
[wpv-items-found]
<!-- wpv-loop-start -->
<wpv-loop>
<button type="button" class="btn tb-button__link" data-toggle="modal" data-target="#myModalabcbbcust[wpv-post-id]">Create BB Customer</button>
<!-- Modal -->
<div id="myModalabcbbcust[wpv-post-id]" class="modal fade" role="dialog">
<div class="modal-dialog modal-lg">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title w-100">Create a New BB Customer </h4>
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<div class="modal-body">
[cred_form form="260" form_name="Create BB Customer"]
</div>
<div class="modal-footer justify-content-between">
<div class="col-md-6">
<button type="button" class="btn btn-secondary tb-button__link" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>
</wpv-loop>
<!-- wpv-loop-end -->
[/wpv-items-found]
[wpv-no-items-found]
<strong>[wpml-string context="wpv-views"]No items found[/wpml-string]</strong>
[/wpv-no-items-found]
[wpv-layout-end]
This is the modal I use currently.
Looking at the link provided, there are different ways I can use Modal, but I cannot see how to impliment an AJAX based model.
Or am I missing something completely?
Thanks for writing back.
Your view already seems to be using the Bootstrap modal, which is a non-AJAX type, so you don't have to use some other modal type.
To troubleshoot why this location field is not functioning, I'll need to see how this view and the form are set up in the admin area.
Can you please share temporary admin login details, along with the link to the page with this modal and the form?
Note: Your next reply will be private and please make a complete backup copy, before sharing the access details.
Thank you for sharing these details.
I've performed some tests with a similar form and modal code on my test website, but couldn't reproduce this issue.
Also, if the same form is added in a simple modal on a separate test page, the address fields are shown correctly too.
( you'll find the test page at {yourwebsite.com}/test-page-from-ts-support/ )
This suggests that the issue is specific to this "Caravan Management Centre" page and how the multiple elements of that page are put together.
I couldn't access the website's plugins section to see which plugins are active, but, I'll recommend temporarily removing the different elements used on the page and adding them back, one by one, to narrow down to a possible conflicting one.
In case the issue still persists, you're welcome to share a clone/snapshot of the website, so that it can be investigated on a different server, without affecting the actual website.
( ref: https://toolset.com/faq/provide-supporters-copy-site/ )
Note: I've set your next reply as private again.
Hi Waqar,
Thank you for looking into this for me.
Something weird that i've just noticed.
Please go to the hidden link
Press on the Modal for 'Create a Holiday Park' - You will see the maps do not show as expected.
NOW
Usethe 'stocks' search filter, submit and let the page refresh - when clicking on the same Modal 'Create a Holiday Park' the maps now show...
It seems that it could be something else, other than plugins?
EDIT
It only works with the 'stocks' filter
Narrowing it down even further, it seems that I could have found the problem, I just don't know what the solution might be.
You can use ANY filter, apart from 'Out of Stock' within the 'Stocks' filter.
As long as the view is not showing any items marked 'Out of Stock' it seems to work as expected...
Weird eh?
Thank you for sharing your findings.
I can confirm that the issue with the address field in the modal only appears if there is an item in the results with the 'Out of Stock' status, which is indeed very weird.
I've checked through the source code of the pages in both states and looked through the code of the participating views and forms, but couldn't find anything which can cause this.
Would it be possible for your to share a super admin access temporarily so that I can see which plugins are active and if needed, create a clone/snapshot of the website?
Note: I've set your next reply as private again.
Hi Mate,
I've granted Super Admin Access to the account you're using to log in.
Thank you for the super admin access.
I've managed to download a duplicator package from your website and will be performing some tests on my own server.
I'll share my findings as soon as this testing completes and thank you for your patience.
No worries mate, thank you for your help!
Thank you for waiting, as this troubleshooting turned out more complex than expected.
As there are many views and forms involved in that page, narrowing it down to the conflicting one was very challenging.
During testing, I noticed that if the "Edit a Customer" form from view "Edit Customer Modal" and "Edit a BB Customer" form from view "Edit BB Customer Modal" are removed, the issue with the location type field is fixed.
Also, the "Edit Black Book" option only shows for the "out of stock" results. Can you please share some background information about how this "out of stock" status and black book customers are linked?
Hi Waqar,
I really appreciate you putting your time into this for me, this is what sets toolset apart from the rest!
Basically, when a product is sold, we us the “sell caravan” modal, where then we can add ‘sold price’, change the stock status to ‘out of stock’ and assign a ‘black book’ (person who purchased) to the product.
This page was designed to have a ‘all in one’ solution, which will improve efficiency by minimising page load times.
Being able to do everything from 1 place.
I’ll try to explain, on my phone at the moment;
Relationship
1 to many
1 Black Book to many caravans
Forms.
Using nested views, I’ve created a view that checks for a relationship attached.
If the view cannot find a black book relationship, the view will output the ‘sell caravan’ modal instead of ‘No posts found’.
If there is a relationship found, it will output the ‘Edit Black Book’ which allows us to edit the BB contact from the same screen.
Does that at all make sense?
Thanks Waqar, I know time is precious and I’m taking up a lot. That’s why I’ve tried not to post soo many support queries recently. Also, I think I’m doing quite well on my own too 🤦♂️
Thank you for sharing these details.
I had an unusually busy forum queue before the weekend, but, I'll resume my investigation on this today.
Thank you for your patience.
