For years I've used Foobox inside of CRED:
For Iframes:
<a href="/event" class="foobox" target="foobox">SOME TEXT HERE</a>
OR for inline html:
<a href="#thefooboxcontent" target="foobox">T</a>
For reference:
hidden link
But as of 1.9x of cred this is broken. Instead of a window popping up inside a modal, it now pops over to a new tab/page.
And it's an emergency because a major form on a site needs this to work. Funny thing is, when I use the inspector console on Chrome, it works (with some jiggling/resetting)!! So something about opening up the inspector helps the conflict along. The page in question:
hidden link
I'll be doing some testing on the site in the meantime, but any assistance is much appreciated to work around what must be a javascript conflict.
As a follow up, here's more researched info:
If the code for foobox (as above) is put AFTER [credform class="cred-form cred-keep-original"] it doesn't work, but if put BEFORE, or on another non-cred page, it works.
I also tested with no other plugins but toolset running, plus tried switching themes (I'm using toolset starter theme).
I also tried with a regular bootstrap modal. As before, it only doesn't work when put inside the credform. This code will start to open, but immediately close itself. But works anywhere else:
<!-- Button trigger modal -->
<button class="btn btn-primary btn-md" data-toggle="modal" data-target="#myModal">Launch demo modal</button>
<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
<h4 class="modal-title" id="myModalLabel">Modal title</h4>
</div>
<div class="modal-body">
[wpv-form-view name="event form check and input title"]
</div>
</div>
</div>
</div>
So I rolled Cred back to 1.8.8 and it works. So it's definitely 1.9x -- The problem also is I can't just roll back Cred but also need to use earlier versions of other toolset plugins, otherwise the date input breaks...
Obviously this can only be a temporary solution since, yeah, I do need to be able to do upgrades.
Dear Scott,
One of the new features of the CRED update in June was that the old markup generated by the form has changed for the fields.
The old input forms used the class “form-controls”, controlled by Bootstrap, but the new version did not do this. Therefore the old styling did not apply to the form field regardless of which Bootstrap stylesheet is loaded.
As the new Cred forms default to using the Bootstrap markup and styling, there could be a conflict with the foobox.
With the latest version from the 23rd of June on last Friday, we removed the CRED button to insert forms from the Gravity Forms editors and also fixed some other issues that were causing the kind of issues you have with CRED 1.9.
Is it possible to revert your installation back to the older version of the plugin for the time being or does this break everything?
Could you give me some more details about your setup? I am enabling the debug information box, if you send me the information, I will try to replicate your issue in a minimal install with the actual and older versions of CRED to see where this could be originating from.
Kind regards,
Cristina
Cristina,
Thank you for your assistance. You Said:
>>>"Is it possible to revert your installation back to the older version of the plugin for the time being or does this break everything?"
Yes, my emails above mention that I rolled back and it DOES work with older plugins. So for the moment, my main/active site is using old plugins.
I've already set up a vanilla testing site. If you enable a place for me to post all information to this, I'll get you full access to it so that you don't need to set up a site yourself and you can test the problem. The debug info I included is to the testing site.
Hello Scott,
sorry, I did not refresh the page before answering, otherwise I would not have asked if you could roll it back.
Thanks for the debug info. I am enabling the private reply box for your next answer, so you can paste there the access credentials.
Kind regards,
Cristina
Hello,
thanks for the credentials, I could access the site and the ftp.
I will see the details and for the issue you are describing and try to find the cause for it and possible solutions.
I'll keep you informed,
Kind regards,
Cristina
Hi Scott,
with the update to WordPress 4.8. the internal Foobox seemed to work, as it showed again in a modal window. I checked with several browsers and it showed fine.
So I have made a copy of the page with just the link inside the form, as you would have it in your site and started to check with several browsers and crazy click behaviour.
It stopped showing the modal window in all browsers because it seemed to work before just due to the browser cache.
I am escalating this to the developers to see if they can find out why this happens.
Kind regards,
Cristina
Thanks. Looking forward to the follow up. : )
Hello Scott,
this problem has a very irregular behaviour, so it seems to work sometimes, and then it stops.
It looks that the function of the foobox plugin that delivers the html modal window, is firing the code with the default jQuery(document).ready(......
That function, when used in CRED, should be fired at a different event than the default
jQuery(document).ready(.....
which is probably used by that Plugin currently, and that is causing this behaviour.
So you need to now the function name that fires the code for the modal windows, and then re-fire that on CRED forms, by adding this to the CRED forms JS section:
jQuery( document ).on( 'cred_form_ready', function() { PUT function to be called HERE });
If you would consider to use the model windows of Bootstrap instead, you would not run into issues with the foobox, as Toolset is built with Bootstrap and will open always correctly.
I have escalated this, so someone from second tier will help you from this point on.
Kind regards,
Cristina
Hi,
I tried using bootstrap, but it also had an issue of dropping out of the window. As I wrote i nthe 2nd email above:
" also tried with a regular bootstrap modal. As before, it only doesn't work when put inside the credform. This code will start to open, but immediately close itself. But works anywhere else"
So, yeah, it would be great to get further help on this! Thanks! : )
Hello Scott, this is Beda.
Let me try to help you.
I also tested with no other plugins but toolset running, plus tried switching themes (I'm using toolset starter theme).
I think this is impossible, as the FooBox requires a Plugin to work, is this correct?
I also tried with a regular bootstrap modal. As before, it only doesn't work when put inside the credform. This code will start to open, but immediately close itself. But works anywhere else:
I think this is due to the Bootstrap Load sequence.
In Toolset > Settings > General you have a Bootstrap Setting.
If you use Layouts AND a Plugin/Theme that already ships Bootstrap you need to use "The theme or another plugin is already loading Bootstrap 3.0".
If none of the Plugins or Themes loads Bootstrap but you use Layouts, you need to use "Toolset should load Bootstrap 3.0"
If you do not want to use Bootstrap at all, then choose "This site is not using Bootstrap CSS".
With that, the Bootstrap issue should be solved.
As for 3rd Party code, just as Cristina already elaborated, you need to fire your JS Function that is responsible for your own Modals on "cred_form_ready", but that requires you to ask the Developer of that Plugin, to instruct you what functions of his Plugin need to be re-fired.
I still suggest Bootstrap, which will work fine with the above mentioned adjustments.
Thanks!
Well, I already have it set to "The theme or another plugin is already loading Bootstrap 3.0", as you can see in the testing site.
Can you give me a heads up on how to form the JS code to do the call. Meanwhile I'll ask foobox what to fire. Perhaps you can tell me how to form the question to them?
Remember, ALL OF THIS WORKED up until the latest release of toolset.
Can you give me a heads up on how to form the JS code to do the call
Cristina already elaborated this nicely here:
https://toolset.com/forums/topic/cred-1-9x-breaks-foobox/#post-544166
jQuery( document ).on( 'cred_form_ready', function() {
PUT function to be called HERE
});
This goes to the CRED JS Section.
Perhaps you can tell me how to form the question to them?
I would ask what function is used to fire the FooBox.
That you need to re-fire the function in a 3rd party JS action that acts similar to jQuery(document).ready but instead has its own action for compatibility reasons and non-conflict mode reasons:
jQuery( document ).on( 'cred_form_ready'
Remember, ALL OF THIS WORKED up until the latest release of toolset.
Yes, and we missed to even update the Documentation in regard.
This is already filed internally and the failure will be corrected ASAP, I made sure this is in the way of progress.
I understand that this is unacceptable and we should have updated the Documentation in regard 🙁
I apologise for that deeply -
Please let me know if you have any remaining issues I can help you with?
