Problem / Motivation

Being able to hook into the webform submission process for AJAX forms isn't quite clear.

Proposed Resolution

Add a cookbook page to improve documentation for ajax webforms and passing information to Javascript. See https://www.drupal.org/docs/8/modules/webform/webform-cookbook/how-to-pa...

Comments

thhafner created an issue. See original summary.

josephdpurcell’s picture

Issue summary: View changes
Status: Active » Needs work

Updating description to clarify.

A few requests:

  1. The intro paragraph reads as though you're about to show a back-end example. Removing the parenthesis would make it read more clearly. But, also it jumps to a specific example rather than stating the generic problem. Revise the first paragraph such that it explains what the generic problem is, and THEN give a few specific examples.
  2. hook_webform_submission_form_alter should use a module prefix like "myajaxform_". Also, the module file should be all lowercase like "myAjaxForm.module"
  3. The my_ajax_form_callback should use the same module prefix as the hook alter
  4. In Step 2 I think you can remove the ellipses
  5. Rename "Step 2" to to note that it invokes the "myCustomAjaxFormSubmit", and then remove that from the Step 3; because Step 3 isn't where its invoked, its where its defined
  6. It's not clear why $.fn.myCustomAjaxFormSubmit must be defined as a jQuery function -- especially considering the InvokeCommand calls "myCustomAjaxFormSubmit"; either add a comment that explains why OR a comment that simply says it must be a jQuery function because that's how this works
  7. Why in step 3 is there this line if (argument) {? Maybe rename the variable from "argument" to something that explains what it is, is the value the same as the back-end variable "$field_values"?
thhafner’s picture

Thank you for the feedback. I have made updates to the cookbook page.

thhafner’s picture

Status: Needs work » Needs review
josephdpurcell’s picture

Status: Needs review » Needs work

This is great! A few follow up suggestions:

  1. The code examples don't comply with Drupal code style; notably comments end in a period.
  2. It looks like sometimes there are 2 line returns in the code when there should be one?
  3. The first example has "<?php" but the rest do not -- be consistent; either none of them have it or all do? How do other docs do it? It looks like they drop the "<?php"
  4. In the last step, change "$.fn.methodName" to "$.fn. myCustomAjaxFormSubmit" -- I think using "methodName" throws the reader off
  5. I like how you previously showed the full files; two ideas to consider, either (a) showing the 2 files first and then referencing method names and such to describe what's going on later, OR (b) just tack on the two full files at the very end of the document

Of these suggestions, I think code style is the most important; the others are OK if you feel there's a good reason to keep as is.

thhafner’s picture

Status: Needs work » Needs review

Thanks for the feedback! Updated.

josephdpurcell’s picture

Status: Needs review » Reviewed & tested by the community

Wonderful! Thank you for documenting this!

jrockowitz’s picture

Status: Reviewed & tested by the community » Fixed

@thhafner Thank you for updating that recipe.

Status: Fixed » Closed (fixed)

Automatically closed - issue fixed for 2 weeks with no activity.