Problems with Data Handler API / JavaScript API

Need Help
#1

Untill now, I used this as a component within my plugin:

{% set searchTerm = __SELF__.searchTerm %}

<form data-request="onSend">
    <input type="text" name="searchTerm" value="{{ searchTerm }}">
    <button type="submit">Search</button>
</form>

Everything worked perfectly fine. Now I try to install the User Plugin. Therefor, I added this to the default Layout in order to make the Logout Links from the Documentation work.

        <script src="{{ 'assets/javascript/jquery.js'|theme }}"></script>
        {% framework %}

However, when I now try to run the form above, this message is shown in an alert window: “AJAX handler ‘onSend’ was not found.”

In order to make everything work again, I followed the documentation and changed the first approach of the component to the following one:

{% set searchTerm = __SELF__.searchTerm %}

<form onsubmit=\"oc.request(this, 'onSend'); return false;\">
    <input type="text" name="searchTerm" value="{{ searchTerm }}">
    <button type="submit">Search</button>
</form>

But I somehow wonder if this is the correct way. I doubt the only way to fix this is changing the component since this might include external components, too.

Did I miss something here in order to use the data handler API for my form (within the component) and the Ajax Framework / API for the User Plugin?

Sorry in case I use some terms wrong, didnt work a lot with the Ajax Framework in the Frontend yet.

#2

Hi @LordRazen

Can you check to ensure you’ve not loaded the {% framework %} twice? This might cause this problem.

#3

I could finally find the mistake: As the user in Discord mentioned, the error was within the Component / Ajax Handler which was not properly created.

Now it is and the Handler is found.

But I wonder: Before I included the framework, the parameters were send to the URL. Now, they’re not send at all. I’m not that versed with forms yet and have read through many October Tutorials on this topic, but cannot find my mistake.

A point in the right direction would be very helpful here :wink: Thank you ^^

#4

Ok I went more into the topic and I think I found all my mistakes. But since I would like to be save, please let me know if I still got some mistakes. I might have been a bit unclear in the last post, kinda having a hard time here…

As a first approach, I had such a form in my component, but the handler was not reachable due to a typo.

<form data-request="onSave">

However, since I called and stored all the properties from the URL in the onRun() method of my component, the component still showed the right result in the end.

Then I included the framework in the frontend and the problems finding the Ajax handler started.

Now I found this page which is kinda what I was looking for:

If I got it right, I have to decide between an Ajax form (with a Ajax handler) and a “regular” form.

Since I want the parameters from the form to go to the url as url parameter (or url query), I need a regular form and the get method. I also used the twig markup, so now I have this form:

{{ form_open({'url': this.page.id | page, 'method': 'get'}) }}

It redirects to the same page with all the fields as url parameters.

Since I’m not calling a handler, I now read all the Url parameters with Input::get() in the onRun() method of my component (or in a method linked from the onRun() method) and display the content corresponding to all the component parameters and url input parameters.

Is this the right way or did I miss something? Any suggestions for improvement?

Thanks for your answer already. ^^

#5

Yes, for a traditional form, this is a good way to do it.

1 Like