I have created a simple 'Ask a Question' form that upon submit saves to db, sends email and displays a thank you message. This form is displayed within a bootstrap 3 modal. The modal code for this sits in the html/php page (view template). The form is working 100% correct and the thank you display message is shown as intended.
My issue is that as soon as the form is submitted, the page reloads and hides the modal that shows my thank you. I tried to add some jquery to trigger the modal open, so the user is not left wondering what happened. As it is right now, the user would have to manually click to open the modal to see the thank you message.
The jquery I used is as follows:
As far as I could tell, there is no issue with the jquery. When I investigate further I see a TypeError $(...) is null. This leads me to believe that it cannot find the modal with the id specified. I verified the id name with no issues. Worth mentioning is that the modal I am attempting to trigger is in the html/php (template view) and not apart of the form.
I am wondering if there are some limitations to jquery executed from the form that prevent it from executing on the code directly outside of the form itself?
My issue is that as soon as the form is submitted, the page reloads and hides the modal that shows my thank you. I tried to add some jquery to trigger the modal open, so the user is not left wondering what happened. As it is right now, the user would have to manually click to open the modal to see the thank you message.
The jquery I used is as follows:
jQuery(document).ready(function($){
$('#questions').modal('show');
});As far as I could tell, there is no issue with the jquery. When I investigate further I see a TypeError $(...) is null. This leads me to believe that it cannot find the modal with the id specified. I verified the id name with no issues. Worth mentioning is that the modal I am attempting to trigger is in the html/php (template view) and not apart of the form.
I am wondering if there are some limitations to jquery executed from the form that prevent it from executing on the code directly outside of the form itself?
Hi wayne.regehr,
It might be possible to do this using AJAX form submission so that the page isn't reloaded but a neater solution is probably to use an iFrame for the modal form display - they it should reload inside the modal window,
Bob
It might be possible to do this using AJAX form submission so that the page isn't reloaded but a neater solution is probably to use an iFrame for the modal form display - they it should reload inside the modal window,
Bob
Hi Bob,
An IFrame for the form seems like a workable alternative solution.
Out of curiosity though, are there some limitations to jquery executed from the form that prevent it from executing on the code directly outside of the form itself?
An IFrame for the form seems like a workable alternative solution.
Out of curiosity though, are there some limitations to jquery executed from the form that prevent it from executing on the code directly outside of the form itself?
Hi wayne.regehr,
I think that the jQuery can - theoretically at least access anything on the page; there's certainly nothing in CF to stop it.
The problem may be that Joomla! is not too clever at loading scripts in sequence. Try putting this code before the script to prompt the jQuery file to be loaded
Bob
I think that the jQuery can - theoretically at least access anything on the page; there's certainly nothing in CF to stop it.
The problem may be that Joomla! is not too clever at loading scripts in sequence. Try putting this code before the script to prompt the jQuery file to be loaded
<?php
JHtml::_('jquery.framework');
?>Bob
Thanks Bob,
The code example you provided eliminated the TypeError (...) null I was getting. I suspect my issue is actually a library conflict, most likely prototype.js.
I appreciate your assistance and speedy response.
Consider this issue solved. I will try to remember to update this after some more troubleshooting.
The code example you provided eliminated the TypeError (...) null I was getting. I suspect my issue is actually a library conflict, most likely prototype.js.
I appreciate your assistance and speedy response.
Consider this issue solved. I will try to remember to update this after some more troubleshooting.
This is a quick update:
The possible Java-script conflict was eliminated. That left me with two options either use AJAX to submit the form, eliminating the page reload (upon submission) or use the iFrame.
I'm not a savvy JS coder yet.
I opted to use the iFrame solution which works wonderfully. I was able to find the correct source to specify for the iFrame itself, however it needed to be adjusted. In case this can help someone else out I will provide it below. Make sure to update the FORM NAME to match the form you are using. (iFrame 'src' is specific to Chronoforms V5)
Also a small hint, you will need to add a Load CSS action to your form in some cases as some css files/rules may not be applied correctly. That should be fairly straight forward.
The possible Java-script conflict was eliminated. That left me with two options either use AJAX to submit the form, eliminating the page reload (upon submission) or use the iFrame.
I'm not a savvy JS coder yet.
I opted to use the iFrame solution which works wonderfully. I was able to find the correct source to specify for the iFrame itself, however it needed to be adjusted. In case this can help someone else out I will provide it below. Make sure to update the FORM NAME to match the form you are using. (iFrame 'src' is specific to Chronoforms V5)
<iframe src="/index.php?option=com_chronoforms5&chronoform=FORM_NAME&tmpl=component" width="100%" height="510px" frameborder="0" allowtransparency="true"></iframe>
Also a small hint, you will need to add a Load CSS action to your form in some cases as some css files/rules may not be applied correctly. That should be fairly straight forward.
This topic is locked and no more replies can be posted.
