Problem/Motivation

The AJAX Wizard example is rather broken. It does not present results or really signal an outcome, and does not demonstrate keeping track of the values already entered.

Steps to reproduce

  1. Enable the Ajax Example module
  2. Go to examples/ajax-example/wizard
  3. Type a name under the "name" field and click next
  4. Type a street name at the "Street name" field and click next
  5. Error: You are back to the first step where the form is asking your name instead of being at the third step where you should see the city name input.

Expected behaviour

  1. Go to examples/ajax-example/wizard
  2. Type a name under the "name" field and click next
  3. Type a street name at the "Street name" field and click next
  4. Type a city name at the city field and click on submit.
  5. You should see a message with the values you have entered in the different steps of the wizard.

Proposed resolution

Fix. Test.

Remaining tasks

Comments

Mile23 created an issue. See original summary.

andeersg’s picture

I'm not sure it is the correct solution, but I used this example to create a form that added a row to a table with ajax. It did not work before I added the setRebuild-method in submitForm. Before that the step counter would reset to original value every time and just overwrite the new step.

$form_state->setValue('steps', $step);
$form_state->setRebuild();
Lal_’s picture

@andeersg well I tried but it's not working. Also the Wizard with graceful degradation, w/JS turned off also not working I did lots things to make it work while porting Ajax, maybe I am missing something or completely wrong.

ccshannon’s picture

Correct the Wizard example does not work as indicated in the Form code for 'Wizard.php'. It implies a three-step form: name, address, city.

- On the AJAX-enabled wizard, only two steps render: name and address. While on address, clicking 'next step' takes me back to step 1 (name).
- On the NON-ajax wizard, while on step 1, when I click 'next step' it simply reloads the page and gives me empty step 1 form.

Though the code does help developers envision how to implement ajax in a form to produce different 'states' within one form, the wizard example code does not really work as intended.

Don't have time to look into it now, but this is definitely a bug.

cosolom’s picture

Status: Active » Needs review
StatusFileSize
new9.46 KB

Maybe not best solution, but works.

monymirza’s picture

#5 works.

Lal_’s picture

Issue tags: +Needs reroll
StatusFileSize
new9.48 KB

re rolled the patch and I think it good to go.... @miles23 waiting for your input

no sssweat’s picture

#7 worked like a charm

The code looks beautiful, good to go 👍

jlbellido’s picture

Issue summary: View changes

Updated the issue description adding the steps to reproduce and the expected behaviour.

jlbellido’s picture

Hi, I've tested #7 according to the expected behaviour described at the description and it works fine. On the other hand I've run the PHPCs check it meets the coding standards. It is RTBC from my side.

Thanks!

jlbellido’s picture

Status: Needs review » Reviewed & tested by the community
mile23’s picture

Status: Reviewed & tested by the community » Needs work

Thanks!

$ git apply 2930038.patch 
error: patch failed: ajax_example/src/Form/Wizard.php:104
error: ajax_example/src/Form/Wizard.php: patch does not apply

Patch no longer applies.

+++ b/ajax_example/src/Form/Wizard.php
@@ -104,125 +166,28 @@ class Wizard extends FormBase {
+  public function nextSubmit(array $form, FormStateInterface $form_state) {
...
+  public function prevSubmit(array $form, FormStateInterface $form_state) {

These methods need descriptive docblocks.

Also, we need a functional JS test that goes through the repro steps from the IS. That way we can prevent a regression.

jlbellido’s picture

Thanks @Mile23 for your quick reply!

I've just checked the patch and It applies to me:

modules/contrib/examples (8.x-1.x) $ git pull
Already up-to-date.
$ git apply 2930038.patch
$ 

About the other remaining tasks I agree totally.

Thanks

mile23’s picture

Issue tags: -Needs reroll

Ahh, I hadn't done the pull/fetch cycle for this machine. So the patch applies. :-)

no sssweat’s picture

Status: Needs work » Reviewed & tested by the community
jlbellido’s picture

Status: Reviewed & tested by the community » Needs work
Issue tags: +Needs tests

Adding tags according to the feedback from #12

jlbellido’s picture

Status: Needs work » Needs review
Issue tags: +drupaldevdays
StatusFileSize
new10.26 KB
new14.56 KB
new6.16 KB

Finally after some time I was able to run and write Functional JS tests. I'm attaching new patches with the following improvements:

  • Add docblock to some missing methods. Thansk for the feedback at #12
  • Solve some CS errors.
  • Provide Functional Javascript Test to the Ajax Wizard example.

I was inspired by the beautiful city of Lisboa and the great Portuguese community at Drupal Dev Days Lisbon.

jlbellido’s picture

StatusFileSize
new14.56 KB
new4.3 KB

Ups! I didn't uploaded the test-only patch. I'm trying again.

Status: Needs review » Needs work

The last submitted patch, 18: 2930038-18-tests-only.patch, failed testing. View results

jlbellido’s picture

Status: Needs work » Needs review

The tests failed because I uploaded the patches in the wrong order. It seems they are passing.

  • Mile23 committed 6e81c0c on 8.x-1.x authored by Lal_
    Issue #2930038 by jlbellido, Lal_, cosolom, No Sssweat, andeersg,...
mile23’s picture

Status: Needs review » Fixed
Issue tags: -Needs tests

Yay devdays. :-)

Added @group examples to the test on commit.

Thanks everyone!

Status: Fixed » Closed (fixed)

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