Port ajax_example module to Drupal 8

Started work on a port. Attached patch provides the framework of the module, and the first (of many) examples.

I'll try to attack the rest as time allows, others feel free to jump in.

Whoopsie, made patch backwards. New patch attached.

Putting this one on my list for a review during this week

There is most certainly work to be done on this one. I believe @Mile23 set it to "needs review" to fire off the testbot.

No, I set it to 'needs review' because it needs a review. :-) Part of that is the testbot.

If you'd like to make a list of things that need to be done, that would be great, and would count as a review.

Hi, thanks for quick reply.
My plan is to check the example provided by kerasai as methods, etc.
I want to spend more time into that in order to see the rest of the examples as well and help with what I can for the rest as well, so basically this is why I assigned the ticket to spend more time and go into details.

Hi back, the patch is ok and works well. It's indeed a good base example of the simplest case.

I would only change the usage of t() function at the current state, the rest is a good start!

1. +++ b/ajax_example/src/Form/AjaxExampleSimplest.php
   @@ -0,0 +1,78 @@
   +      '#title' => t("Choose something and explain why"),
   

   it's better to use the $this->t(), because global functions will be gone at some point and the FormBase takes the StringTranslationTrait which provides the method

2. +++ b/ajax_example/src/Form/AjaxExampleSimplest.php
   @@ -0,0 +1,78 @@
   +      '#title' => t("Why"),
   

   the other t()

3. +++ b/ajax_example/src/Form/AjaxExampleSimplest.php
   @@ -0,0 +1,78 @@
   +      $form['replace_textfield']['#description'] = t("Say why you chose '@value'", array('@value' => $value));
   

   t()

On another note, there are 23 more hook_menu items which can also be converted, and I could take on some.
@Mile23, do you think it will be better to continue with patches on same path 1:1 scenarios, or we can re-group scenarios into longer form with more examples? The question basically is if any reorganization is planned anyway

OK, so a review of the patch includes:

I can't see the link in the tool menu when I enable the module.

Aside from that, to address #11: The idea is to do a straight port as much as is feasible. We want each example to be as simple to read as possible; putting a lot of them together in a controller might confuse the issue. Remember the point here is to instruct people on how to do these things in a clear way.

I'm a bit confused by this patch, as it doesn't seem to be a straight port of the D7 module.

- The 'Choose something and explain why' form doesn't seem to exist on D7
- The D7 module contains several other AJAX forms.

Not sure what should be done here.

Anyway, in the meantime, here's an update of patch #2 with these issues fixed:

> It's better to use the $this->t(), because global functions will be gone at some point

> I can't see the link in the tool menu when I enable the module.

Agreed to @joachim,

If we look here : http://cgit.drupalcode.org/examples/tree/ajax_example/ajax_example.modul...
There are several ajax examples previously in D7 version of Ajax Example.

@Mile23, What do you think, if want simplest version. I can go ahead and test patch given in #13.

Hi @Mile23,

I somehow faced an issue of
Symfony\Component\Routing\Exception\RouteNotFoundException: Route "ajax_example" does not exist. in Drupal\Core\Routing\RouteProvider->getRouteByName() (line 193 of /core/lib/Drupal/Core/Routing/Route with patch submitted in #13.

So, I have created a new patch which also replaces underscores with hyphens in path. Also, added $this->t() as suggest in #9.

This patch works fine for me.

OK, so we have here a small piece of a port. It does demonstrate some use of AJAX, but doesn't port the rest of the example.

Assuming we're OK with only porting a little piece of it, here's a review. Consult #2209627: [meta] Module Checklist for Examples for some more stuff to consider.

We don't have a link in the tools menu for the AJAX page.

We don't have an assertion that there's a link in the tools menu.

We don't have any tests of the behavior of the page, such as to demonstrate that the page form even displays.

We now have javascript functional tests, which we could use on this example: https://api.drupal.org/api/drupal/core%21tests%21Drupal%21FunctionalJava... However, just a straight port of the D7 ajax_example tests would be good enough for now.

As far as how we split all this up into controller classes, I think just one controller with many methods would be fine for a documentation project such as this. If they could be chunked out into related types, that'd be great, but it's not essential.

+++ b/ajax_example/ajax_example.module
@@ -0,0 +1,23 @@
+ * @file
+ * AJAX Examples module file with basic examples.

+++ b/ajax_example/src/Form/AjaxExampleSimplest.php
@@ -0,0 +1,78 @@
+      // The prefix/suffix provide the div that we're replacing, named by
+      // #ajax['wrapper'] above.
+      '#prefix' => '<div id="replace_textfield_div">',
+      '#suffix' => '</div>',

This is not good practice, it's better to wrap the textfield in a container than directly injecting HTML like this.

See AjaxFormsTestSimpleForm for an example.

I would also not call this element 'replace_textfield_div', but instead give it a semantically correct name.

This is the progress bar Ajax example. Well the example is not completely working, I am having some Ajax errors...

This is patch consist of Generate check boxes example, Generate text field, Submit-driven AJAX, Dependent dropdown, Dependent dropdown (with graceful degradation), Dependent dropdown with javascript off. But I am still stuck with

Progress bar example which I've mentioned in the comment #19

Submit function is not working for the Dependent dropdown (with graceful degradation), Dependent dropdown with javascript off.

I am still working for a perfect patch... https://github.com/abhilal007/AJAX-example , you can find it here

I was able complete few examples... but I am currently facing issues with the wizard and progress bar examples which is not working on the above patch...

This patch consist of AJAX advanced example.. but I am having some problems at two parts (forms) of the
1) ajax_example_advanced_commands_css_callback (the box is not created at the styles)
2) ajax_example_advanced_commands_restripe_num_rows , this function is also not working...
remaining function seems to be work properly...
also the progress bar example is not working properly and the Wizard is working partially

I was able to port the most of the example :-
1) AJAX framework commands
2) Add more button (with graceful degradation) w/JS turned off
3) Ajax Add more button
4) Ajax Wizard Example
5) Ajax Wizard Example w/JS turned off
6) Contextual Links Example
7) Dependent dropdown
8) Dependent dropdown degardes
9) Dependent dropdown degardes w/JS turned off
10) Dynamic Sections (with graceful degradation)
11) Dynamic Sections (with graceful degradation) w/js turned off
12) Generate checkboxes
13) Generate textfields
14) Simplest AJAX Example
15) Submit-driven AJAX

these examples are working correctly (Wizard example have few problem but it runs).
The remaining example I have attached the code inside the patch but they have few errors.

Documentation and fixed few errors but the problems still persist...

The testbot says:

PHP Parse error:  syntax error, unexpected 'public' (T_PUBLIC) in /var/www/html/modules/contrib/examples/ajax_example/src/Form/AjaxExampleAutocompleteAuthor.php on line 137
xargs: php: exited with status 255; aborting

The module still persist with the error mentioned in the #30

Updated patch to add ajax example link to the toolbar & description page to list all the ajax examples. The patch also fixes the route names for the routes being listed on the description page.

Additionally, it would be great if we can outline the list of pending items around the port & update the summary/create child issues.

@piyuesh23
1) Wizard Example
2) Progress bar examples
3) Autocomplete examples
4) NodeFormAlter examples
5) Uniquecomplete examples
These examples are currently facing few errors and some have problems while running. Can you please take a look at the code...

Could you be more specific about the errors, so that @piyuesh23 can zero in on them? Thanks.

A ton of cleanup and a minimal test.

I'll probably be splitting this out into the parts that work, with a follow-up to add the parts that currently don't.

This is the list of the routes from the test, showing which routes are reliable:

    // Click all the submit and cancel buttons.
    $routes = [
      'ajax_example.description' => [],
      'ajax_example.simplest' => [],
      // @todo progress bar example is broken.
      // 'ajax_example.progresssbar' => ['Submit'],
      // @todo not found
      // 'ajax_example.progresssbarProgress' => '',
      // @todo not found.
      // 'ajax_example.autocheckboxes' => '',
      'ajax_example.autotextfields' => ['Click Me'],
      'ajax_example.submit-driven-ajax' => ['Submit'],
      'ajax_example.dependent_dropdown' => ['Submit'],
      'ajax_example.dependent_dropdown_degrades' => ['Choose', 'OK'],
      'ajax_example.dependent_dropdown_degrades_nojava' => ['Choose', 'OK'],
      'ajax_example.dynamic_sections' => ['Choose', 'OK'],
      'ajax_example.dynamic_sections_nojava' => ['Choose'],
      'ajax_example.wizard' => ['Next step'],
      'ajax_example.wizardnojs' => ['Next step'],
      // @todo add-more has trouble with num_names.
      // 'ajax_example.addmore' => ['Submit'],
      // 'ajax_example.addmorenojs' => ['Submit'],
      // @todo advanced-commands does not render.
      // 'ajax_example.advanced' => ['Submit'],
      // @todo ajax-link is broken.
      // 'ajax_example.Ajaxlink' => [],
      'ajax_example.Ajaxlinkrender' => [],
      'ajax_example.Ajaxlinkcall' => [],
      // @todo simple autocomplete is 403.
      // 'ajax_example.AutocompleteSimplest' => [],
      // 'ajax_example.AutocompleteSimplestcallback' => [],
      'ajax_example.Autocompletenode' => [],
      'ajax_example.Autocompletenodecallback' => [],
    ];

Forgot the interdiff.

Hmm. Let's try that again.

Still working on this...

This patch removes quite a number of the examples, and we'll have a follow-up to add them back.

The interdiff is pretty huge. :-)

What is it with me and interdiffs?

Very minor code cleanup for simplest example.

Added two JS functional tests.

Lots of pruning and improvements.

More pruning, rearranging, making links work on pages, managing path parameters.

This is pretty close, and I'll likely commit it if the tests are green on the testbot. Then we'll start on the follow-ups.

Committed and pushed! Thanks, folks.

Follow-ups: #2928719: [meta] Add remaining AJAX examples from conversion #2928720: Add JS functional tests for each untested form in ajax_example

Thanks @Mile23 for cleaning up and committing it.

Ahh... Feels awesome... @Mile23 thank you for your help... @navneet0693 thank you for mentoring me...