Using Inputfield with Ajax POST Request

[Milo]

I'm new to processwire and i'm looking for a solution to handle post requests with inputfields. At the moment my code looks like this:

 

class InputfieldTest extends Inputfield {

...

public function init() {
  if($this->config->ajax && $this->input->InputfieldTest){
    header('Content-Type: application/json');
    echo "{'test':'test'}";
    exit;
  }
}

...

}

And then there is a JS file with:

var testdata = {
			InputfieldTest: 'InputfieldTest'
		};

testdata[$('#testa-tokenname').text()] = $('#testa-tokenvalue').text();

$.ajax({
	url: "http://bla.at/processwire/page/edit/?id=1816&InputfieldTest=1",
	data: testdata,
	type: 'POST',
	success: function(json) {
		alert(json);
	}
});

Everything works fine with a GET request, but with the POST i just get the message {"error":false,"message":"AJAX Page not saved (no changes)"}

Any ideas? Or is it all wrong and i should use a different approach? 

[kongondo]

Hi @Milo,

Welcome to PW and the forums.

Where is the post request coming from? If from the frontend it will be rejected if you try to post to an /admin/page......What exactly are you trying to do? Maybe if we get some clarity we can help you better...

[Milo]

Hello, 

if my post was confusing. I'm implementing a new inputfield to upload images to a cloudservice. When you edit a page in the backend with this inputfield, lets call it InputfieldCloud, you can upload multible images and they are displayed. Now i want to add a remove button, in case i upload a false image or whatever.. When the user clicks on the remove button i want to trigger an AJAX call to the InputfieldCloud class. This works with a GET request, but fails with a POST request. I can do everything with the GET request.. i'm just curios how to implement POST communication between:

 InputfieldCloud Class <-> InputfieldCloud "view" of my Module

 

[kongondo]

OK..

These two threads should help:

I prefer the method outlined in the second thread (hidden admin page)...first thread solution (this one) never really worked for me...

[Milo]

okay, thx, i know those threads and both say in some posts that you can get the request in the module init function, so i thought i just forgot something .. but as it dont works for you either i will move to the solution with the hidden admin page.

[Robin S]

1 hour ago, kongondo said:

first thread solution (this one) never really worked for me...

Looks like Soma's code and the code in this thread's first post (which I guess is based on Soma's example) aren't using $input correctly.

I think...

$this->input->InputfieldMyAjaxBomb

...should be...

$this->input->get('InputfieldMyAjaxBomb');

...or...

$this->input->post('InputfieldMyAjaxBomb');

...depending on if you are using GET or POST.

[kongondo]

@Robin S Actually, although considered bad practice, ProcessWire will still be able to retrieve that input.

 

Quote

Lastly, if you don't care where the variable came from (whether get, post or cookie), and the variable name adheres to PHP conventions, you can retrieve it as an object property directly from $input. This would be like using the $_REQUEST superglobal in PHP.

$value = $input->name; 

This is a convenience, but not a best practice. You should care about where your variable came from, and your code will be more secure, and more readable, if you stick to specifying $input->get, $input->post or $input->cookie.

But even with $input->post it still didn't work for me. I should have been clearer..

[Robin S]

Besides the hidden admin page approach, you could use a module config page to return the AJAX data. You would need to have an additional module because an inputfield module doesn't autoload.

So your module folder consists of:
TestAjax.module
InputfieldTestAjax.module
InputfieldTestAjax.js

TestAjax.module

<?php
class TestAjax extends WireData implements Module {

    public static function getModuleInfo() {
        return array(
            'title' => 'TestAjax',
            'version' => '1',
            'summary' => 'Installs and is used by InputfieldTestAjax.',
            'installs' => 'InputfieldTestAjax',
            'autoload' => "template=admin",
        );
    }

    public function init() {
        $this->config->js('admin_url', $this->config->urls->admin);
        $this->config->js('module_name', $this->className());
        $this->addHookBefore('ProcessModule::executeEdit', $this, 'ajaxResponse');
    }

    public function ajaxResponse($event) {
        if(!$this->config->ajax || $this->input->get->name !== $this->className()) return;
        $event->replace = true;
        $data = '{}';
        if($this->input->post->test_ajax) {
            $test_ajax = $this->input->post->test_ajax;
            // populate $data
        }
        $event->return = $data;
    }

}

InputfieldTestAjax.js

$(function() {
    var test_data = { test_ajax: 'my string' };
    var url = config.admin_url + 'module/edit?name=' + config.module_name;
    $.ajax({
        url: url,
        data: test_data,
        type: 'post',
        success: function(data) {
            alert(data);
        },
        error: function(jqXHR, textStatus, errorThrown) {
            console.log(textStatus, errorThrown);
        }
    });
});

InputfieldTestAjax.module

...whatever you need for the inputfield.