AJAX handler not found in found when use plugin in static pages

Question

This is my plugin file system. I add the plugin by creating the snippet of the plugin then add it to the static page in. It add successfully but when i submit the for by using data-request it gives error of AJAX Handler not found. I add the jquery in script and also user {% framework extras %}

{% framework %} but it gives error.

The code in default.htm file is

*<form name="plan-form" data-request="onSendEmail" data-request-validate
    data-request-flash class="row ttm-quote-form clearfix">
        <div class="alert alert-danger" data-validate-error>
            <p data-message></p>
        </div>
        <div class="col-md-12 form-group mt-2">
            <input type="text" class="form-control bg-white" required name="name" placeholder="Name">
            <span data-validate-for="name"></span>
        </div>
        <div class="col-md-12 form-group mt-2">
            <input type="text" class="form-control bg-white" required name="phone" placeholder="Phone">
            <span data-validate-for="phone"></span>
        </div>
        <div class="col-md-12 form-group mt-2">
            <input type="text" class="form-control bg-white" required name="email" placeholder="Email">
            <span data-validate-for="email"></span>
        </div>
        <div class="col-md-12 form-group mt-2">
            <input type="text" class="form-control bg-white" required name="subject" placeholder="Subject">
            <span data-validate-for="subject"></span>
        </div>
        <div class="col-md-12 form-group mt-2">
            <textarea class="form-control bg-white" name="message" required placeholder="Message"></textarea>
            <span data-validate-for="message"></span>
        </div>
        <div class="col-md-12 form-group mt-2">
            <select name="plan" id="" class="form-control bg-white" required>
                <option value="Free">Free</option>
                <option value="Standard">Standard</option>
                <option value="Premium">Premium</option>
            </select>
            <span data-validate-for="plan"></span>
        </div>
        <div class="col-md-12 text-left">
            <button type="submit" data-attach-loading class="oc-loader ttm-btn ttm-btn-size-md ttm-btn-bgcolor-skincolor">Send</button>
        </div>

    </form>*

And the code of **PlanForm.php** file is

*<?php
    namespace Virtuenetz\Plan\Components;
    // use Virtuenetz\Plan\Models\Plan;
    use Cms\Classes\ComponentBase;
    use Input;
    use Mail;
    use Validator;
    use ValidationException;
    use Flash;
    class PlanForm extends ComponentBase{
        public function componentDetails()
        {
            return [
                'name' => 'Plan Form',
                'description' => 'Simple Plan Form'
            ];

        }

        public function onSendEmail(){

            $data = post();

            $name = post('name');
            $phone = post('phone');
            $email = post('email');
            $subject = post('subject');
            $msg = post('message');

            $rules = [
                'name' => 'required',
                'email' => 'required|email',
                'subject' => 'required',
                'message' => 'required',
                'plan' => 'required',
            ];

            $validation = Validator::make($data, $rules);

            if ($validation->fails()) {
                throw new ValidationException($validation);
            }

            print_r($data);die;
            $var  = ['name' => Input::get('name'), 'email' => Input::get('email'),
            'phone' => Input::get('phone'), 'subject' => Input::get('subject'),
            'message' => Input::get('message'), 'plan' => Input::get('plan')];

            Mail::send('virtuenetz.plan::mail.message', $var,function($message){
                $message->to(Input::get('email'),'Admin Person');
                $message->subject(Input::get('subject'));
            });

            Flash::success('Jobs done!');
        }
    }
?>`enter code here`
*

Answer 1

Sadly It's the actual limitation of static pages, you can not use AJAX handlers on them.

So, either try to use the normal page OR make a custom/manual ajax request using JQUERY to the component's handler.

OR better add that component to Layout page

Ref => https://octobercms.com/blog/post/introducing-snippets

if you have any doubt please comment.