AJAX im Frontend?

[pgerundt]

Hallo zusammen,

ich habe ziemlich lange Google bemüht und ein paar erfolglose Versuche unternommen. Daher die kurze Frage:

Wie setzt man AJAX-Calls im Frontend unter C4 um?

- die ajax.php gibt es nicht mehr
- [contao-legacy/simple_ajax] wird nicht mehr maintained
- [richardhj/contao-simple-ajax] und [leounglaub/contao-simple-ajax] sind nicht C4-kompatibel

Hat jemand einen Gedankenanstoß für mich? Muss ich eine eigene Route definieren?


Vielen Dank im Voraus

[Spooky]

Ja, du könntest es über ein AppBundle mit einem eigenen Controller plus eigene Routes lösen.

[miniA4kuser]

Hey Spooky , gibt es dafür ordentliches Lesefutter?

[Spooky]

Natürlich

• http://symfony.com/doc/current/routing.html
• http://symfony.com/doc/current/controller.html

[BugBuster]

Thema Routing + Controller habe ich mir vom contao/installation-bundle abgeschaut (conto/install Route) , speziell in der Managed Edition von Contao musste ich etwas mehr machen als in der Symfony Doku stand.
Bei mir ging es aber nicht um Ajax, sonder ich wollte meine eigenen Entry-Points eleminieren.

[Spooky]

Hm, ja ich habe auch gerade Schwierigkeiten das umzusetzen. Momentan hätte ich (in der Managed Edition) folgendes:

[…]

Theoretisch müsste ich ja eigentlich nicht mehr machen, da das AppBundle (und dessen Resources) ja automatisch geladen werden. Funktionieren tut das aber nicht.

[Spooky]

Structure:

contao4/
|- src/
    |- ContaoManager/
    |---- Plugin.php
    |- Controller/
    |---- DefaultController.php
    |- Resources/
    |---- config/
          |- routing.yml

<?php

// src/ContaoManager/Plugin.php

use Contao\ManagerPlugin\Routing\RoutingPluginInterface;
use Symfony\Component\Config\Loader\LoaderResolverInterface;
use Symfony\Component\HttpKernel\KernelInterface;

class Plugin implements RoutingPluginInterface
{
    /**
     * {@inheritdoc}
     */
    public function getRouteCollection(LoaderResolverInterface $resolver, KernelInterface $kernel)
    {
        return $resolver
            ->resolve(__DIR__.'/../src/Resources/config/routing.yml')
            ->load(__DIR__.'/../src/Resources/config/routing.yml')
        ;
    }
}

<?php

// src/Controller/DefaultController.php

namespace App\Controller;

use Symfony\Component\Routing\Annotation\Route;
use Symfony\Component\HttpFoundation\JsonResponse;

class DefaultController
{
    /**
     * @Route("/ajax")
     *
     * @return JsonResponse
     */
    public function ajaxAction()
    {
        return new JsonResponse(['Hello World!']);
    }
}

# src/Resources/config/routing.yml

app:
    resource: "@AppBundle/Controller"
    type: annotation

composer.json:

{
    …,
    "autoload": {
        "psr-4": { "App\\": "src/" },
    }
}

vendor/bin/contao-console cache:clear --no-warmup
vendor/bin/contao-console cache:warmup
composer dump-autoload

[BugBuster]

So habe ich es im Prinzip auch, nur halt in meiner Erweiterung enthalten.
Der Trick bei mir dann auch auch die routing.yml. Die Annotation sollte ja eigendlich auch so funktionieren, aber mit der routing.yml muss man wohl doch noch mal drauf hinweisen.

Und bei mir lädt der Symfony Controller (src/Controller/VisitorsController.php) dann den Contao Controller (src/Resources/contao/controllers/BackendVisitors.php) :-)

[Spooky]

Hm, brauchst du den Umweg überhaupt? Sollte ja mit dem einen Controller alleine ja auch reichen, oder?

// Custom backend routes: https://github.com/contao/core-bundle/pull/512

[BugBuster]

Denkbar, so habe ich mir das halt abgeschaut. Da man ja irgendwann das Resources/contao/ Verzeichnis leer machen sollte, wird es dann wohl drauf hinauslaufen.
So konnte ich meine alte Klasse laden und die weiter verwenden.

Das Ticket/Pull wollte ich mir eh mal anschauen, das sind ja speziell Backend Routen um die im Main Bereich nutzen zu können. Das mache ich derzeit nicht.
Mal sehen ob es da noch einen kleinen aber feinen Unterschied gibt, zumal es das ja erst ab 4.4 geben soll.

[Spooky]

Ah stimmt, ist mir nicht aufgefallen, dass das noch im develop branch für 4.4 ist.

[BugBuster]

Das ist neu in den Annotations:

*     "_custom_backend_view" = true,  
*     "_backend_module" = "test"

Mal sehen ob ich dafür ne Anwendung finde. Aber dann sollte man sich wohl auch langsam mal mit Twig vertraut machen.

[Fehrmann]

Ich hänge mich hier mal dran.

Gibt es irgendwo auch ein Contao-Bundle als Beispiel, das einen eigenen Custom-RouteLoader implementiert? (bitte nicht das manager-bundle) :-)

[w3scout]

Ich hänge mich hier mal dran.

Gibt es irgendwo auch ein Contao-Bundle als Beispiel, das einen eigenen Custom-RouteLoader implementiert? (bitte nicht das manager-bundle) :-)

Custom-RouteLoader nicht. Aber vielleicht kannst Du damit ja als Basis was anfangen:
https://github.com/w3scout/contao-ajax-bundle
https://packagist.org/packages/w3sco...dle#dev-master

Das ist die in Code gegossene bisherige Essenz dieses Threads. Weiter kam ich bisher leider noch nicht.

VG

[Spooky]

Gibt es irgendwo auch ein Contao-Bundle als Beispiel, das einen eigenen Custom-RouteLoader implementiert? (bitte nicht das manager-bundle) :-)

Was genau meinst du damit? In einer Standard Symfony App musst du deine Routes sowieso manuell in deiner app/config/routing.yml einfügen. In der Contao Managed Edition musst du die Routes statt dessen über ein Contao Manager Plugin laden lassen.

[Glumanda]

Das ist neu in den Annotations:

*     "_custom_backend_view" = true,  
*     "_backend_module" = "test"

Mal sehen ob ich dafür ne Anwendung finde. Aber dann sollte man sich wohl auch langsam mal mit Twig vertraut machen.

Was genau will man mit den Unterstrichen davor ausdrücken? Dass es noch keinen "offiziellen" Status hat, ein Hack ist oder ist das eine Konvention die besagt "das nicht anfassen"?

[webstar]

Was genau will man mit den Unterstrichen davor ausdrücken? Dass es noch keinen "offiziellen" Status hat, ein Hack ist oder ist das eine Konvention die besagt "das nicht anfassen"?

Das ist eine convention von symfony. Da man über den Weg auch Parameter definieren kann, die an den Controller übergeben werden, wird der underscore genutzt die alle anderen Konfigurationen.

[webstar]

Das ist neu in den Annotations:

*     "_custom_backend_view" = true,  
*     "_backend_module" = "test"

Mal sehen ob ich dafür ne Anwendung finde. Aber dann sollte man sich wohl auch langsam mal mit Twig vertraut machen.

Es ist inzwischen möglich im Container Backend eigene Symfony Routen zu nutzen, die als backend Modul gerendert werden. Dafür sind die Konfigurationen da.

Mehr Infos im entsprechenden PR:
https://github.com/contao/core-bundle/pull/512

[Tastaturberuf]

Danke für die hilfreichen Beiträge, ich bin jetzt schon viel weiter, aber leider noch nicht am Ziel.

Da es mit dem W3Scout\AjaxBundle reproduzierbar ist nehme ich das mal als Beispiel, mit meinem Bundle ist es quasi das selbe Problem.

Contao 4.4.7 & PHP 7.1.9

Die Route ist domain.local/ajax.

In der CLI ist alles korrekt:

# vendor\bin\contao-console route:match "/ajax"


 [OK] Route "ajax_frontend" matches

+--------------+----------------------------------------------------------+
| Property     | Value                                                    |
+--------------+----------------------------------------------------------+
| Route Name   | ajax_frontend                                            |
| Path         | /ajax                                                    |
| Path Regex   | #^/ajax$#s                                               |
| Host         | ANY                                                      |
| Host Regex   |                                                          |
| Scheme       | ANY                                                      |
| Method       | ANY                                                      |
| Requirements | NO CUSTOM                                                |
| Class        | Symfony\Component\Routing\Route                          |
| Defaults     | _controller: W3ScoutAjaxBundle:Ajax:ajax                 |
|              | _scope: frontend                                         |
|              | _token_check: false                                      |
| Options      | compiler_class: Symfony\Component\Routing\RouteCompiler  |
| Callable     | W3Scout\AjaxBundle\Controller\AjaxController::ajaxAction |
+--------------+----------------------------------------------------------+

Im Profiler auch:

#   Route name                  Path                                Log
1   _wdt                        /_wdt/{token}                       Path does not match
2   _profiler_home              /_profiler/                         Path does not match
3   _profiler_search            /_profiler/search                   Path does not match
4   _profiler_search_bar        /_profiler/search_bar               Path does not match
5   _profiler_phpinfo           /_profiler/phpinfo                  Path does not match
6   _profiler_search_results    /_profiler/{token}/search/results   Path does not match
7   _profiler_open_file         /_profiler/open                     Path does not match
8   _profiler                   /_profiler/{token}                  Path does not match
9   _profiler_router            /_profiler/{token}/router           Path does not match
10  _profiler_exception         /_profiler/{token}/exception        Path does not match
11  _profiler_exception_css     /_profiler/{token}/exception.css    Path does not match
12  contao_install_redirect     /install.php                        Path does not match
13  ajax_frontend               /ajax                               Route matches!

Aber im Profiler im Log steht dann plötzlich

INFO
00:34:39
request	Matched route "contao_catch_all".

[?
  "route" => "contao_catch_all"
  "route_parameters" => [?
    "_scope" => "frontend"
    "_token_check" => true
    "_controller" => "Contao\CoreBundle\Controller\FrontendController::indexAction"
    "_url_fragment" => "ajax"
    "_route" => "contao_catch_all"
  ]
  "request_uri" => "http://contao-demonwright.local/app_dev.php/ajax"
  "method" => "GET"
]

und es wird natürlich ein 404 geworfen:

Symfony\Component\HttpKernel\Exception\
NotFoundHttpException
in vendor\contao\core-bundle\src\EventListener\ExceptionConverterListener.php (line 112)

Hat jemand eine Idee woran das liegen kann?

[Spooky]

Hast du deinen dev cache gelöscht?

[Tastaturberuf]

Hast du deinen dev cache gelöscht?

Danke Spooky, das war das Problem.

# vendor\bin\contao-console cache:clear -e dev --no-warmup

 // Clearing the cache for the dev environment with debug true

 [OK] Cache for the "dev" environment (debug=true) was successfully cleared.

War die Lösung. Gibts ne Möglichkeit den Cache in der app_dev.php direkt zu löschen oder zu deaktivieren?

[Spooky]

Der Cache ist über app_dev.php prinzipiell nicht in Verwendung. Teilweise aber doch. Ich verstehe es auch nicht ganz

[Tastaturberuf]

Naja, der Aufruf über app_dev.php legt halt trotzdem diverse Dateien in /var/cache/dev ab. Bin auch davon ausgegangen de es nicht passiert.

[marebe]

ganz schön kompliziert für ein bisschen Ajax... findet ihr nicht?

[Spooky]

ganz schön kompliziert für ein bisschen Ajax... findet ihr nicht?

Nein, derartige Custom Routes zu erzeugen ist in Contao 4 (bzw. Symfony) viel bequemer.

[marebe]

Custom-RouteLoader nicht. Aber vielleicht kannst Du damit ja als Basis was anfangen:
https://github.com/w3scout/contao-ajax-bundle
https://packagist.org/packages/w3sco...dle#dev-master

Das ist die in Code gegossene bisherige Essenz dieses Threads. Weiter kam ich bisher leider noch nicht.

VG

danke, das hilft schonmal weiter!
Machst Du da noch weiter?

[w3scout]

ja, definitiv. Sobald ich zeitlich wieder etwas Luft habe. Im Moment bin ich leider etwas im Projektstress.

[marebe]

routing.yml:

app:
    resource: "@AppBundle/Controller"
    type: annotation

da fehlt doch noch die Pfadangabe unter der der Controller aufgerufen werden soll, oder?
Ich hab das alles bei mir mal so nachgebaut und noch "path: /ajax/" unten in der routing.yml hinzugefügt, aber passieren tut nichts, wenn ich "/ajax" über den Browser aufrufe außer einem 404.

[Spooky]

da fehlt doch noch die Pfadangabe unter der der Controller aufgerufen werden soll, oder?

Nicht unbedingt. Du kannst für die Annotations eines ganzen Controllers einen Prefix angeben - den kannst du aber auch direkt in der Annotation des Controllers machen.

Ich hab das alles bei mir mal so nachgebaut und noch "path: /ajax/" unten in der routing.yml hinzugefügt, aber passieren tut nichts, wenn ich "/ajax" über den Browser aufrufe außer einem 404.

Halte dich einfach genau an das was ich geschrieben habe . Ohne deinen Code zu sehen und zu wissen was du nun genau gemacht hast, kann man nicht sagen, was nun falsch ist.

[vini]

Sorry, I didn't want to start a new thread in the English forum. Spooky, I know you can help me
I set up my routing exactly as described here (only changed route name - I want "/api"). I always get 404 error.

The problem is: URL gets rewritten to "/en/api" BEFORE matching routes. And then of course contao_catch_all route matches, there's no front-end page with alias "api", thus 404 error. I guess the question is – why? and how to avoid URL rewriting before routing?

If I add annotation with _locale, it works of course:

/**
 * @Route("/api", name="api")
 * @Route("/{_locale}/api", name="api_locale")
 */
public function apiAction()
{
    return new Response('WORKS');
} 

And if I access the app through app_dev.php, everything works fine. Which means I can't debug the issue

Antworten auf Deutsch sind OK

[Spooky]

Hm... since it works in the dev environment: try to delete var/cache manually.

[vini]

Ok, here is something new: I'm developing on localhost using SymfonyWebserverBundle – server:run. Just now I was developing other project, and didn't bother to stop the server there, so I started new server from another Terminal window, it runs on different port and everything suddenly works... What does it mean?

[Spooky]

No idea - I usually work with XAMPP . Are you using the Managed Edition?

[vini]

Are you using the Managed Edition?

Yes, 4.4.18 at the moment. Looks like I did nothing wrong in the end I guess I should try the code on the server now and report back.

[mucona-media]

Hi,
vielen Dank für die tollen Erklärungen. Damit habe ich geschafft die Route zu definieren, die den Controller anspricht.
Ein \Database::getInstance()
liefert leider

Uncaught PHP Exception Symfony\Component\Debug\Exception\ClassNotFoundExc eption: "Attempted to load class "Database" from the global namespace. Did you forget a "use" statement?"

Folgende Uses klappen leider nicht:
use Contao\CoreBundle\Exception\PageNotFoundException;
use Contao\CoreBundle\Framework\ContaoFramework;
use Contao\FilesModel;
use Contao\StringUtil;
use Contao\Validator;
use Contao\Database;
use Contao\Database\Result;

Muss man nochmal wie früher ein system->initialize() machen, oder ähnliches?

Vielen Dank für die Antworten!

[Spooky]

Du schreibst

use Contao\Database; 

und dann

Database::getInstance() 

Oder du nimmst den FQCN:

\Contao\Database::getInstance() 

Oder bessern noch: du injectest dir die Datenbank Verbindung:

namespace App\Action;

use Doctrine\Dbal\Connection;
use Symfony\Component\HttpFoundation\Response;

class MyAction
{
    private $db;

    public function __construct(Connection $db)
    {
        $this->db = $db;
    }

    public function __invoke(): Response
    {
        $this->db->…
    }
} 

[mucona-media]

Wow, danke für die schnelle Nachricht.
Die beiden ersten Lösungsansätze führen leider zum diesem Error:
"Call to a member function get() on null"

Den dritten Ansatz verfolge ich grad noch parallel, bekomme da aber auch einen Fehler:
Controller has required constructor arguments and does not exist in the container. Did you forget to define such a service?"


Prinzipiell sollten ja aber beide Lösungen funktionieren, oder? Ich steh da grad ziemlich auf dem Schlauch.

[Spooky]

Bzgl. erste Lösungsansätze: poste deinen Code.

Bzgl. letzter Lösungsansatz: hast du deinen Controller bzw
deine Action als Service registriert?

[mucona-media]

Hi,
ich habe mich nun an der services.yml aus der Simpleajax Extention orientiert, und gesehen, dass ich den setContainer Call vergessen habe
https://github.com/richardhj/contao-...g/services.yml
Zur Vollständigkeit, falls es noch jemand benötigt, die db wird so übergeben:
arguments:
- "@database_connection"
Vielen Dank Spooky, dein Input hat sehr geholfen.

[mucona-media]

Der Syntax ändert sich bei den Statements wie folgt:
$objRes = $this->db->prepare("UPDATE tl_member SET ... WHERE id = :id")->execute([':id' => '30']);
Quelle hierfür:
https://github.com/contao/installation-bundle/blob/master/src/InstallTool.php