Please help me test out new ajax form template
Permalink
Hello,
I've developed a custom template for the built-in form block that submits the form via ajax (so the page doesn't reload). I need some people to help me test it out because Andrew said it wasn't working for him (wasn't forcing him to enter required data I believe), but I am unable to recreate the issue. If you have a few minutes to spare and want to help get this thing released in the marketplace so everyone can use it, please download the attachment, install it, and try using it.
**NOTE: You should not install this on a production site! I am fairly certain it's not going to break anything (I am actually using it on a couple of production sites already), but better safe than sorry**
INSTRUCTIONS TO INSTALL:
Unzip the attached file and place the "ajax_form" folder into your site's "packages" directory (NOT concrete/packages). The log into your site's dashboard, click "Add Functionality" in the sidebar, and click the "Install" button next to "Ajax Form".
INSTRUCTIONS TO USE:
This is a custom template for the built-in form block, not it's own separate block. So the way you use it is by adding a form block to a page (or editing a page that already has a form block in it), then clicking on the block and choosing "Custom Templates" from the popup menu. Then choose either "Ajax Default Layout" or "Ajax Tableless Layout" from the dropdown menu and click the "Update" button. Exit edit mode and publish the changes, and you should be good to go.
Thank you!
-Jordan
I've developed a custom template for the built-in form block that submits the form via ajax (so the page doesn't reload). I need some people to help me test it out because Andrew said it wasn't working for him (wasn't forcing him to enter required data I believe), but I am unable to recreate the issue. If you have a few minutes to spare and want to help get this thing released in the marketplace so everyone can use it, please download the attachment, install it, and try using it.
**NOTE: You should not install this on a production site! I am fairly certain it's not going to break anything (I am actually using it on a couple of production sites already), but better safe than sorry**
INSTRUCTIONS TO INSTALL:
Unzip the attached file and place the "ajax_form" folder into your site's "packages" directory (NOT concrete/packages). The log into your site's dashboard, click "Add Functionality" in the sidebar, and click the "Install" button next to "Ajax Form".
INSTRUCTIONS TO USE:
This is a custom template for the built-in form block, not it's own separate block. So the way you use it is by adding a form block to a page (or editing a page that already has a form block in it), then clicking on the block and choosing "Custom Templates" from the popup menu. Then choose either "Ajax Default Layout" or "Ajax Tableless Layout" from the dropdown menu and click the "Update" button. Exit edit mode and publish the changes, and you should be good to go.
Thank you!
-Jordan
bump. Anyone?
Hey Jordan,
Plugs in fine.
I'll have a mess around and get back to you.
Cheers
Steev.
BTW: You spend to much time on this stuff, go out for a cold beer!
Plugs in fine.
I'll have a mess around and get back to you.
Cheers
Steev.
BTW: You spend to much time on this stuff, go out for a cold beer!
heh, good advice :)
Nice block here. I installed it and changed the template with no problems. Made a form with three required fields & a Captcha. Everything went smoothly for submitting with data entered.
Then I tried to submit with a few empty required fields and it did, in fact, give me the "please fill out required fields" error. I then filled out those required fields and the Captcha (which didn't refresh upon submission) and, even though I have typed in the right letters to the Captcha, it is saying that my Captcha code is incorrect. See the screenshot.
Also, should the form completely disappear after you submit? That almost feigns a new page load. Maybe an opacity change (or something along those lines) of the form would be better along with the notification.
Then I tried to submit with a few empty required fields and it did, in fact, give me the "please fill out required fields" error. I then filled out those required fields and the Captcha (which didn't refresh upon submission) and, even though I have typed in the right letters to the Captcha, it is saying that my Captcha code is incorrect. See the screenshot.
Also, should the form completely disappear after you submit? That almost feigns a new page load. Maybe an opacity change (or something along those lines) of the form would be better along with the notification.
Thanks for the feedback -- I will look into the captcha issue.
As for the form disappearing, this was what I thought the best default behaviour would be, but I've set up the template to be fairly customizable in this regard. Up at the top are a few javascript functions that get called when the form is submitted, when it fails validation, and when it successfully submits. All you'd have to do is change the line that hides the form fields to do something else (not change them, change the opacity, whatever).
As for the form disappearing, this was what I thought the best default behaviour would be, but I've set up the template to be fairly customizable in this regard. Up at the top are a few javascript functions that get called when the form is submitted, when it fails validation, and when it successfully submits. All you'd have to do is change the line that hides the form fields to do something else (not change them, change the opacity, whatever).
I had the problem with captcha as well, if the form comes back with a validation error the captchs number does not change and when you re-enter the number it is not accepted.
Other than that it worked good.
Other than that it worked good.
Yeah, this is because the captcha has been regenerated but hasn't been reloaded in the form. Usually calling $("#captcha-image").reload(); or something like that should refresh the image and re-gen the captcha.
Hmm... this seems like it will be tricky. The form controller's loadSurvey() method calls:
Then the action_submit_form() method calls:
I'm not really understanding the process of how the check() function knows what to compare the submitted value against -- it must be reading some kind of session variable or something because no state is passed to it by the form controller -- no token or id, etc.
In other words, my custom template calls the controller's loadSurvey() method, which calls the captcha display() method (thus generating a captcha image+code). Then the template itself calls the captcha display() method AGAIN (because it wasn't really displayed the first time). So when the form is submitted, how is the controller's action_submit_form() method checking the value against the first code generated by the controller's display(), but not the second code generated by the template's display()? I would assume it just checks the "last generated value" because no identifier is being passed to it to tie it to a particular request... but somehow it is checking the submitted value against the first generated code, not the second??
My brain hurts :)
$captcha = Loader::helper('validation/captcha'); $captcha->display();
Then the action_submit_form() method calls:
$captcha = Loader::helper('validation/captcha'); $captcha->check()
I'm not really understanding the process of how the check() function knows what to compare the submitted value against -- it must be reading some kind of session variable or something because no state is passed to it by the form controller -- no token or id, etc.
In other words, my custom template calls the controller's loadSurvey() method, which calls the captcha display() method (thus generating a captcha image+code). Then the template itself calls the captcha display() method AGAIN (because it wasn't really displayed the first time). So when the form is submitted, how is the controller's action_submit_form() method checking the value against the first code generated by the controller's display(), but not the second code generated by the template's display()? I would assume it just checks the "last generated value" because no identifier is being passed to it to tie it to a particular request... but somehow it is checking the submitted value against the first generated code, not the second??
My brain hurts :)
I've fixed the captcha problem. Thanks everyone for the testing and the assistance. I updated the attachment on the original post up top, if you'd like to try out the new version (should be v1.2) and let me know if it works for you, that would be great.
-Jordan
-Jordan
