Jump to content

Using Inputfield with Ajax POST Request


Milo
 Share

Recommended Posts

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? 

Link to comment
Share on other sites

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

 

Screen Shot 2016-09-28 at 11.03.09.png

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

@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.. :-)

  • Like 1
Link to comment
Share on other sites

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.

 

  • Like 2
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...