Search the Community

I want to implement tables with Dynatable populated via ajax. Here's what I could muster: if($config->ajax) { $results = $pages->find($sanitizer->selector()); foreach($results as $r) $array[] = [ $r->title, $r->modified ]; header("Content-type: application/json"); echo json_encode($array); exit; } $content .= <<<EOT <table id="my-ajax-table"></table> <script> $("#my-ajax-table").dynatable({ dataset: { ajax: true, ajaxUrl: '.', ajaxOnLoad: true, records: [] } }); </script> EOT; But that's really nothing. Pro tips?

Hi I'm using a lightly modified Version of ProcessSlider on my PW page (3.0.42). But I'm having a problem with the file upload. It's using Ajax File upload to upload images, which is working fine at first, but the images are only uploaded temporarily (creation date 01.01.1970) when an image is uploaded and saved. When pressing the "save"-Button, this does not change. I'm guessing it's due to changes from PW 2 to 3? This is the js that is calling the iframe upload, I think I don't know what to do to amke it save correctly. Anybody who can give me a hint? /** * ProcessWire iFrameImagePicker plugin * * Light verision of InputfieldCKEditor/plugins/pwimage/plugin.js * * @return callback(src, width, height) * */ function loadIframeImagePicker(page_id, callback) { var page_id = page_id;//$("#Inputfield_id").val(); var edit_page_id = page_id; var file = ''; var imgWidth = 0; var imgHeight = 0; var imgDescription = ''; var imgLink = ''; var hidpi = false; var modalUri = config.urls.admin + 'page/image/'; var queryString = '?id=' + page_id + '&edit_page_id=' + edit_page_id + '&modal=1'; if(file.length) queryString += "&file=" + file; if(imgWidth) queryString += "&width=" + imgWidth; if(imgHeight) queryString += "&height=" + imgHeight; queryString += '&hidpi=' + (hidpi ? '1' : '0'); if(imgDescription && imgDescription.length) { queryString += "&description=" + encodeURIComponent(imgDescription); } if(imgLink && imgLink.length) queryString += "&link=" + encodeURIComponent(imgLink); queryString += ("&winwidth=" + ($(window).width() - 30)); // create iframe dialog box var modalSettings = { title: "<i class='fa fa-fw fa-folder-open'></i> " + "Select Image", open: function() { } }; var $iframe = pwModalWindow(modalUri + queryString, modalSettings, 'large'); $iframe.load(function() { // when iframe loads, pull the contents into $i var $i = $iframe.contents(); if($i.find("#selected_image").size() > 0) { // if there is a #selected_image element on the page... var buttons = [ { html: "<i class='fa fa-camera'></i> " + "Insert This Image", click: function() { var $i = $iframe.contents(); var $img = $("#selected_image", $i); $iframe.dialog("disable"); $iframe.setTitle("<i class='fa fa-fw fa-spin fa-spinner'></i> " + "Saving Image"); $img.removeClass("resized"); var width = $img.attr('width'); if(!width) width = $img.width(); var height = $img.attr('height'); if(!height) height = $img.height(); var file = $img.attr('src'); var page_id = $("#page_id", $i).val(); var hidpi = $("#selected_image_hidpi", $i).is(":checked") ? 1 : 0; var rotate = parseInt($("#selected_image_rotate", $i).val()); file = file.substring(file.lastIndexOf('/')+1); var resizeURL = modalUri + 'resize?id=' + page_id + '&file=' + file + '&width=' + width + '&height=' + height + '&hidpi=' + hidpi; if(rotate) resizeURL += '&rotate=' + rotate; if($img.hasClass('flip_horizontal')) resizeURL += '&flip=h'; else if($img.hasClass('flip_vertical')) resizeURL += '&flip=v'; $.get(resizeURL, function(data) { var $div = $("<div></div>").html(data); var src = $div.find('#selected_image').attr('src'); callback(src, width, height); $iframe.dialog("close"); }); } }, { html: "<i class='fa fa-folder-open'></i> " + "Select Another Image", 'class': 'ui-priority-secondary', click: function() { var $i = $iframe.contents(); var page_id = $("#page_id", $i).val(); $iframe.attr('src', modalUri + '?id=' + page_id + '&modal=1'); $iframe.setButtons({}); } }, { html: "<i class='fa fa-times-circle'></i> " + "Cancel", 'class': 'ui-priority-secondary', click: function() { $iframe.dialog("close"); } } ]; $iframe.setButtons(buttons); $iframe.setTitle("<i class='fa fa-fw fa-picture-o'></i> " + $i.find('title').html()); } else { var buttons = []; $("button.pw-modal-button, button[type=submit]:visible", $i).each(function() { var $button = $(this); var button = { html: $button.html(), click: function() { $button.click(); } } buttons.push(button); if(!$button.hasClass('pw-modal-button-visible')) $button.hide(); }); var cancelButton = { html: "<i class='fa fa-times-circle'></i> " + "Cancel", 'class': "ui-priority-secondary", click: function() { $iframe.dialog("close"); } }; buttons.push(cancelButton); $iframe.setButtons(buttons); } }); }

I'm in the process of rebuilding a WordPress site over into ProcessWire (Yay!) I'm using Ajax to call a page (ajaxAgenda) from the homepage which includes a PHP file (partialAgenda) which makes the call. This is what I got in the included partial. Notice that the URL has a / at the end to prevent redirection. var page_number = 1; var get_agenda = function(){ $.ajax({ type : "GET", data : {pnum: page_number}, dataType : "html", url : "/components/ajaxAgenda/", beforeSend : function(){ $('#ajax-loader2').show(); }, success : function(data){ $('#ajax-loader2').hide(); $('#agenda').html(data); } }); } And in the Ajax called file I have the following echo $page->url.'<br>'; echo $input->get->pnum.'<br>'; echo $_GET['pnum'].'<br>'; which only outputs "/components/ajaxagenda/". pnum is empty and get is also also empty It seems like the variables are simply being stripped from my Ajax call. Or am I missing something really obvious?

Hi everyone I've started to build a newsfeed for a customer, but I'm stuck... I have a news-repeater field including date, title, text and images. I have the link (showing date and title) to each news on the left (with foreach) and the details on the right (showing date, title, text and images also with foreach). I would love to only show the current news on the right. The latest news should be visible on the right. When I click on the link on the left side, it should change the news content on the right side. Does anyone have a simple solution for this? Here's how it looks like at the moment: http://rolspace.net/hd/energiegossau/uber-uns/news/ Thank you! Roli

Hi folks, On the website I am working on I do have a form which needs to be filled in (duh) and when the user clicks on download, the data is send with ajax and processed in the same file by using the ProcessWire API with $config->ajax; The data which is provided by the user will be checked with data in my database. If the data is correct I want to push a file download. But this is not working at the moment. It seems like the content of the (.exe) file is pasted in the console instead of pushing the file. My code looks like this: if ($config->ajax){ $serial = $input->post('serial'); $DB = DB(); $query = $DB->prepare("/*My query here*/"); $query->bindParam("comparision", $serial, PDO::PARAM_STR); $query->execute(); $reply = ''; $SN_rows = $query->rowCount(); if (!$SN_rows > 0) { $reply = 'error'; } else { $reply = 'success'; $installer = $page->attachments->eq(1); $filename = "Filename"; $filepath = $installer->filename; $options = array( 'forceDownload' => true, 'exit' => true, 'downloadFilename' => $filename ); wireSendFile($filepath, $options); } echo $reply; exit(); } What am I doing wrong here or is it a bug? Is there another way to do this with the processwire API? Thanks in advance, ~Harmen

After this tutorial you'll have learned how to: Build a Process module Make an AJAX request to backend Serve JSON as response Let's say you want to display the latest orders in a dashboard that you can access from admin panel. And you want it to refresh its content with a button click. Most straightforward and proper way (that I know of) is to create a Process module, as they're built for this purpose. First, create a directory under /site/modules/, call it ProcessDashboard, and create a file named ProcessDashboard.module under that directory. Following is about the least amount of code you need to create a Process module. <?php namespace ProcessWire; class ProcessDashboard extends Process { public static function getModuleInfo() { return [ 'title' => 'Orders Dashboard', 'summary' => 'Shows latest orders', 'version' => '0.0.1', 'author' => 'abdus', 'autoload' => true, // to automatically create process page 'page' => [ 'name' => 'order-dashboard', 'title' => 'Orders', 'template' => 'admin' ] ]; } public function ___execute() { return 'hello'; } } Once you refresh module cache from Modules > Refresh, you'll see your module. Install it. It will create an admin page under admin (/processwire/) and will show up as a new item in top menu, and when you click on it, it will show the markup we've built in execute() function. All right, now let's make it do something useful. Let's add create a data list to display latest orders. We'll change execute() function to render a data table. public function ___execute() { /* @var $table MarkupAdminDataTable */ $table = $this->modules->MarkupAdminDataTable; $table->setID($this->className . 'Table'); // "#ProcessDashboardTable" $table->headerRow([ 'Product', 'Date', 'Total' ]); // fill the table foreach ($this->getLatest(10) as $order) { $table->row([ $order['title'], $order['date'], $order['total'] ]); } // to refresh items $refreshButton = $this->modules->InputfieldSubmit; $refreshButton->name = 'refresh'; $refreshButton->id = $this->className . 'Refresh'; // "#ProcessDashboardRefresh" $refreshButton->value = 'Refresh'; // label of the button return $table->render() . $refreshButton->render(); } where getLatest() function finds and returns the latest orders (with only title, date and total fields) protected function getLatest($limit = 5, $start = 0) { // find last $limit orders, starting from $start $orders = $this->pages->find("template=order, sort=-created, limit=$limit, start=$start"); // Only return what's necessary return $orders->explode(function ($order) { return [ 'title' => $order->title, 'date' => date('Y-m-d h:i:s', $order->created), 'total' => $order->total ]; }); } When you refresh the page, you should see a table like this Now we'll make that Refresh button work. When the button is clicked, it will make an AJAX request to ./latest endpoint, which will return a JSON of latest orders. We need some JS to make AJAX request and render new values. Create a JS file ./assets/dashboard.js inside the module directory. window.addEventListener('DOMContentLoaded', function () { let refresh = document.querySelector('#ProcessDashboardRefresh'); let table = document.querySelector('#ProcessDashboardTable'); refresh.addEventListener('click', function (e) { // https://developer.mozilla.org/en/docs/Web/API/Event/preventDefault e.preventDefault(); // Send a GET request to ./latest // http://api.jquery.com/jquery.getjson/ $.getJSON('./latest', { limit: 10 }, function (data) { // check if data is how we want it // if (data.length) {} etc // it's good to go, update the table updateTable(data); }); }); function renderRow(row) { return `<tr> <td>${row.title}</td> <td>${row.date}</td> <td>${row.total}</td> </tr>`; } function updateTable(rows) { table.tBodies[0].innerHTML = rows.map(renderRow).join(''); } }); And we'll add this to list of JS that runs on backend inside init() function public function init() { $scriptUrl = $this->urls->$this . 'assets/dashboard.js'; $this->config->scripts->add($scriptUrl); } Requests to ./latest will be handled by ___executeLatest() function inside the module, just creating the function is enough, PW will do the routing. Here you should notice how we're getting query parameters that are sent with the request. // handles ./latest endpoint public function ___executeLatest() { // get limit from request, if not provided, default to 10 $limit = $this->sanitizer->int($this->input->get->limit) ?? 10; return json_encode($this->getRandom($limit)); } Here getRandom() returns random orders to make it look like there's new orders coming in. protected function getRandom($limit = 5) { $orders = $this->pages->find("template=order, sort=random, limit=$limit"); return $orders->explode(function ($order) { return [ 'title' => $order->title, 'date' => date('Y-m-d h:i:s', $order->created), 'total' => $order->total ]; }); } And we're done. When refresh button is clicked, the table is refreshed with new data. Here it is in action: 2017-04-29_19-01-40.mp4 (227KB MP4, 0m4sec) Here's the source code: https://gist.github.com/abdusco/2bb649cd2fc181734a132b0e660f64a2 [Enhancement] Converting page titles to edit links If we checkout the source of MarkupAdminDataTable module, we can see we actually have several options on how columns are built. /** * Add a row to the table * * @param array $a Array of columns that will each be a `<td>`, where each element may be one of the following: * - `string`: converts to `<td>string</td>` * - `array('label' => 'url')`: converts to `<td><a href='url'>label</a></td>` * - `array('label', 'class')`: converts to `<td class='class'>label</td>` * @param array $options Optionally specify any one of the following: * - separator (bool): specify true to show a stronger visual separator above the column * - class (string): specify one or more class names to apply to the `<tr>` * - attrs (array): array of attr => value for attributes to add to the `<tr>` * @return $this * */ public function row(array $a, array $options = array()) {} This means, we can convert a column to link or add CSS classes to it. // (ProcessDashboard.module, inside ___execute() method) // fill the table foreach ($this->getLatest(10) as $order) { $table->row([ $order['title'] => $order['editUrl'], // associative -> becomes link $order['date'], // simple -> becomes text [$order['total'], 'some-class'] // array -> class is added ]); } Now, we need to get page edit urls. By changing getLatest() and getRandom() methods to return edit links in addition to previous fields protected function getLatest($limit = 5, $start = 0) { // find last $limit orders, starting from $offset $orders = $this->pages->find("template=order, sort=-created, limit=$limit, start=$start"); return $orders->explode(function ($order) { return [ 'title' => $order->title, 'date' => date('Y-m-d h:i:s', $order->created), 'total' => $order->total, 'editUrl' => $order->editUrl ]; }); } protected function getRandom($limit = 5) { $orders = $this->pages->find("template=order, sort=random, limit=$limit"); return $orders->explode(function ($order) { return [ 'title' => $order->title, 'date' => date('Y-m-d h:i:s', $order->created), 'total' => $order->total, 'editUrl' => $order->editUrl ]; }); } and tweaking JS file to render first column as links function renderRow(row) { return `<tr> <td><a href="${row.editUrl}">${row.title}</a></td> <td>${row.date}</td> <td>${row.total}</td> </tr>`; } we get a much more practical dashboard.

I have been wanting to set up a quick "dashboard" for a recent project, and was considering using ajax to get a "real time" update/refresh on the page (some of my output depends on the datetime field). I know how to get the desired output using php with some if statements comparing todays date to the date stored in the field, however, I am a bit at a lose of how to interact with the ProcessWire API using ajax to get the desired effect. I found the following and know that I need to start off with: <?php if($config->ajax) { // page was requested from ajax } Unfortunately, as I mentioned earlier, how would one actual find pages using a template and get the field contents from them using AJAX? I apologize if this seems bit broad, but I am stil getting a grasp of using AJAX to deliver content to get a real time update on a page without refresh.

Hi, I am building a site containing around 50000 products which will be updated on a regular basis. We are far from putting this site into production. I am actually devising the future functionalities. The actual update script uses an AJAX process so to avoid timeout. However, the update process will have to be fired automatically, something with either curl or phantom.js. What I have coded at the moment isn't probably not the best solution, albeit it works pretty well. There is a PW template called from an address : http://example.com/start-ajax which starts on load a simple jQuery Ajax process. The 50000 products are listed in a CSV file that is previoulsy broken down into small pieces (200 lines per file). The process is smooth and takes 40 minutes to read the data and update/or create Processwire pages accordingly. I would like to know your advices, your experience in that matter. What would you do to create an automated batch file?

I'm trying to call an ajax function for an inputfield using Soma's method below by intercepting the call in the module init function but for some reason $this->input is always NULL. public function init() { parent::init(); $dir = dirname(__FILE__); require_once("$dir/Location.php"); require_once("$dir/LocationArray.php"); $this->wire('config')->js('InputfieldLocations', array( 'url' => "/admin/locationmodule/ajax" )); if ($this->config->ajax && $this->input->ajaxfunction == 'getcities') { header('Content-Type: application/json'); echo $this->get_cities(); exit; } }

Hey, I've been trying to implement some progressive enhancements to take advantage of modern browsers, modern JS and CSS capabilities etc. One thing I've got stuck is to CSRF protection using $session->CSRF. I'm echoing hidden token using <?= session()->CSRF->renderInput('contact') ?> inside the form, and I can validate the token with plain POST request (without AJAX) just fine using session()->CSRF->hasValidToken('contact'). For AJAX, I'm setting headers x-<tokenname>:<tokenvalue>. It shows up in both Chrome DevTools correctly, and on backend lke HTTP_X_<TOKENNAME> => <TOKEN_VALUE> as expected, so there's no miscommunication. But, when I try to validate it, it fails no matter what. After some debugging I realized at each request, a new token is created, which invalidates the one I'm sending. Here are the relevant parts from the core. Inside /wire/core/SessionCSRF.php, where validation occurs <?php public function hasValidToken($id = '') { $tokenName = $this->getTokenName($id); $tokenValue = $this->getTokenValue($id); // ... if($this->config->ajax && isset($_SERVER["HTTP_X_$tokenName"]) && $_SERVER["HTTP_X_$tokenName"] === $tokenValue) return true; if($this->input->post($tokenName) === $tokenValue) return true; // if this point is reached, token was invalid return false; } it gets token name from here where it checks inside $_SESSION variable <?php public function getTokenName($id = '') { $tokenName = $this->session->get($this, "name$id"); // Why can't it find token inside $_SESSION global? if(!$tokenName) { $tokenName = 'TOKEN' . mt_rand() . "X" . time(); // token name always ends with timestamp $this->session->set($this, "name$id", $tokenName); } return $tokenName; } I dont understand why it cannot find correct token and regenerates? Does session not last until browser closes? I can save other data to $session, and get it just fine, am I missing something?

Hi, I am using pagination with ajax. When i click on any page number url not changing because of ajax call So when i click on page 3 and then click on page 7 i hit the back button it returns to page 1 because url never changing Here is my site: www.sediremlak.com For real estate sites if visitor find a property on page 4 and click on that property page. After click on back button site jumps to first page or home page not page 4 How can i fix this problem?

I had situations come up that just seemed like AJAX was the right way to handle interactions with the ProcessWire server - pages with an element like a button or link that should cause an action to occur but shouldn't require a form or actually following a link - it should just take the action and only update the toggle (a checkbox in this case) when the interaction is completed. Another use case is with a large page on which there are multiple possible interactions. When the page is heavy enough that redrawing results in a less than optimal user experience then it's nice to be able to submit a form without having to redraw the page in order to update the relevant parts. So with that preamble, here's what I put together. I was going to try to clean it up a bit but that has prevented me from posting this so I figured it's better to post it and clean it up if there is any interest. You'll see references to the namespace whale - the name of our project - that would ultimately be removed. There are two major components - the PHP side and the client-side. On the PHP side there are two functional areas: 1. "wrapping" an entity to be inserted into the HTML on a page Wrapping (the function 'makeContainer()' puts a predefined wrapper around one of three types of objects: FormBuilderForm, InputfieldForm, or Template). The wrapper provides context and attaches classes that allows the client JavaScript code to find the wrapper and figure out what to do with it. // // define a function that makes a "form" of a single button. // function makeButton ($label) { // get the form $form = wire('modules')->get("InputfieldForm"); $form->attr('action', './'); $form->attr('method', 'post'); $submit = wire('modules')->get("InputfieldSubmit"); $submit->attr('id+name', 'submit'); $submit->attr('value', $label); $form->add($submit); return $form; } // wrapper function to set label on submit button function requestUserDeleteList() { return makeButton('Do it!'); } // // makeContainer wraps the rendered InputfieldForm in HTML so the client JavaScript can recognize it and handle // AJAX interactions with the server. // It returns the InputfieldForm object and the HTML to be inserted into the page. Note that makeContainer // is in a different namespace so it requires the function name must be qualified with the \ProcessWire prefix. // list ($form, $deleteUsersHTML) = ajax\Request::makeContainer('do-something', '\ProcessWire\requestUserDeleteList'); 2. helping with the processing of an AJAX request that is submitted to the page. Helping with the AJAX request - the code is invoked on page load and determines where there is a valid AJAX request from something it wrapped. It also allows messages to be returned, classes to be added or removed from specific elements, redirects to be executed, or even wholesale replacement of DOM elements (with plenty of caveats). It will even update a submit key so it is possible for the client to execute a single transaction multiple times. // get a new request object for the AJAX transaction $request = new ajax\Request(); // if it isn't formatted correctly handle the error if (!$request->isValidCall()) { return $request->echoError(); } // get the data and function-specific contents (Whale Ajax Context) $data = $request->data(); $wac = wireDecodeJSON($data['wac']); // if ($request->id('wants-newsletter')) { if (!ajax\Request::hasCorrectProperties($data, ['wac', 'value'])) { return $request->echoError(__('invalid call')); } // implement function here } else if ($request->id('another-function')) { // implement function here } // it didn't match any of the AJAX IDs implemented return $request->echoError('not implemented'); The client code requires jQuery and is packaged as three separate functions because both the form and template processing share a common core set of functions. My original intent was to only load the form or non-form code as needed but they're small enough that it really doesn't matter. See attachments for the Request class and the client code. There are many helper functions. Here is a kind of an unfocused extract that illustrates using the code with more context (from an internal sandbox page): <?php namespace ProcessWire; using whale\ajax; // include server-side code for making forms and processing them require_once './utility/ajaxform.inc'; // custom version of ProcessWire/wire/core/WireFileTools.php render() that returns the // template object, not the rendered HTML require_once './utility/get-file-template.inc'; // START AJAX submitted form processing - decodes the request and stores results in $aaform. $aaform = new ajax\Request(); // // this page handles multiple ajax calls so I check to see if it is valid once and then check IDs. // It's also possible to use $aaform->isValidCall('get-user-delete-list') to check specifically // for a specific AJAX ID. The ID is the name provided to Request::makeContainer() when the object // is wrapped. It's also possible to make calls to $aaform->id('get-user-delete-list') to check // for a specific ID. // // to create the forms/input elements that are submitted via AJAX start with: // Request::makeContainer('unique-name-on-page', object) // unique-name-on-page will become the ID of the element that wraps your object. // object - one of ProcessWire\InputfieldForm, \FormBuilderForm, ProcessWire\Template. // if ($aaform->isValidCall()) { if ($aaform->id() === 'get-user-delete-list') { $form = requestUserDeleteList(); // process using the form. the Request object will check to make sure it's the right type. if (!$aaform->process($form)) { return $aaform->echoError(); } // build new form with usernames for selections to delete. the function getUsersToDelete() // returns a user count and a function that will make the form that includes the users in // a list of checkboxes. list($usercount, $formmaker) = getUsersToDelete(); // this returns a replacement to part of the existing DOM. There are limitations but it // handles adding a form or replacing an existing form. if ($usercount === 0) { $replacement = '<div id="ajax-place">No users to delete</div>'; } else { // we pass the $formmaker function to makeContainer(). It returns the form and the // rendered wrapper and form. list($xform, $xhtml) = ajax\Request::makeContainer('do-delete', $formmaker); $replacement = '<div id="ajax-place">' . $xhtml . '</div>'; } // this makes sure the return is formatted so the client can handle it correctly. in // this case a replacement in the DOM is being returned. The first argument is the // selector, the second is the HTML to replace the selected element with. return $aaform->echoReplacement('#ajax-place', $replacement); } else if ($aaform->id() === 'do-delete') { list($usercount, $formmaker) = getUsersToDelete(); // process using the form returned by $formmaker. this will check to make sure it's // the right type of form. This abstracts FormBuilder forms and InputfieldForms. if (!$aaform->process($formmaker())) { return $aaform->echoError(); } // a bunch of logic where the checked users are deleted $deleted = []; $failed = []; $data = $aaform->data(); foreach($data as $name => $value) { if ($name === $value) { $user = wire('users')->get("name=$name"); $email = $user->email; // delete the user and try to get it again to see if the delete worked wire('users')->delete($user); $u = wire('users')->get("name=$name"); if (!count($u)) { $deleted[] = $email . " ($name)"; } else { $failed[] = $email . " ($name)"; } } } $deleted_users = $failed_deletions = ''; if ($deleted) { $deleted_users = 'deleted:<br/>' . join($deleted, '<br/>') . '<br/>'; } if ($failed) { $failed_deletions = 'failed to delete:<br/>' . join($failed, '<br/>') . '<br/>'; } $replacement = '<div id="ajax-place">' . $deleted_users . $failed_deletions . '</div>'; return $aaform->echoReplacement('#ajax-place', $replacement); } else if ($aaform->id() === 'contact') { // here a FormBuilderForm is being loaded if (!$aaform->process($forms->load('contact'))) { return $aaform->echoError(); } // this sends a notice back. the client will place it in a predefined notice area. // Request::makeContainer() will create an area for notices (or you can supply one). // It is also possible to return errors; notices and errors get different classes. $msg = ajax\Request::makeNotice('bruce says hi'); return $aaform->echoSuccess($msg); } else { // it was a valid form but it doesn't match any ID that this page knows about. return $aaform->echoError('what is this?'); } } // normal processing to render the initial page follows as it was not a valid AJAX post // that is handled by Request(). That's a lot of code, so I won't post anymore. If people have interest I'm happy to explain or provide other bits of code, like the extracted get-file-template.inc function. Wrapping a template is similar to wrapping a form except that only certain HTML elements are tracked and each are sent to the server when they are clicked on (technically it varies). It handles radio buttons, checkboxes, links, and buttons (radios and checkboxes on "change" and links and buttons on "click"). So when a checkbox is checked an AJAX call will be made so it can be acted upon by the server. @microcipcip, @ryan, @valan (sorry to any if this isn't interesting to you - I did a quick scan of what looked like semi-related AJAX posts). ajaxform.inc ajaxclient.js

Trying to deploy a PW site to a client's hosting provider. Everything works as expected in development, but on the production host, certain AJAX requests fail. Here's what I'm seeing: 1) I have form on every page which is submitted via AJAX POST to the current page. No matter which page you POST to, it always returns a PW 404 page. 2) AJAX image uploads on the back end return a 200 or 302 for the original request, then spawn a GET request for the homepage. In trying to troubleshoot this, I have found that the host has both suhosin and mod_security installed. They've provided me with a local php.ini to test configuration changes. I've added the following to .htaccess (temporarily): # account-specific php.ini file <IfModule mod_suphp.c> suPHP_ConfigPath /home/[username] <Files php.ini> order allow,deny deny from all </Files> </IfModule> # disable mod_security <IfModule mod_security.c> SecFilterEngine Off SecFilterScanPOST Off </IfModule> In the php.ini file, I've set the following directives: suhosin.simulation = On always_populate_raw_post_data = -1 I've also set a specific directory for uploads: upload_tmp_dir = /home/[username]/tmp GD support is included. PW doesn't log any errors, even with $config->debug set to true. This is PW 2.7.3 on PHP 5.6.28. What else should I check?

Hello, since hours i am struggeling to get an ajax call to an page field working. i think im doing something fundamentally wrong. The Idea is to load some html markup for larger screen sizes. If i put a .php file with the markup outside the 'site' folder it works fine with a basic XMLHttpRequest. But if i want to have the markup stored in a textfield on my 'settings page' within the template folder i have no success. I tried to follow some tips from this thread as well: my settings.php looks like this: <?php if($config->ajax) { $json = array( 'id' => $page->id, 'title' => $page->title, 'markup' => $page->markup ); echo json_encode($json); return; } and my inline javascript like this ( wrapped in enquire.js): <script type="text/javascript"> enquire.register('screen and (min-width: 700px)', { match: function() { var xhr = new XMLHttpRequest(); xhr.onload = function(){ if(xhr.status === 200){ data = JSON.parse(xhr.responseText); document.getElementById('hero').innerHTML = data.markup; } } xhr.open('GET', 'settings.php', true); xhr.send(null); }, unmatch: function() { } }); </script> <section id="hero"> </section> Like this, i am just getting a 404 , and if i try with a path i get a 403 forbidden. Im entirely confused, maybe someone can help. Thanks a lot.

hey everyone, I use delayed output and a basic ajax structure, see below. My page has four containers: content, shows, header & footer. Any show that is clicked is now being loaded in the content area. Works great! Now I would like to have certain links to load in the show container, instead of the content container. Could anyone give me a hint how i could achieve that? I think i need two different ajax calls..? I need this to implement a sort function for the shows. I want to use $pages->get("/shows/")->children('sort=$sortvar'); thank you for your time! fira <?php $cajax = $config->ajax; if(!$cajax): include("_head.inc"); ?> <!-- content --> <div id="content"> <?php endif; // end if ajax ?> <?=$content?> <?php if(!$cajax): ?> </div> <!-- //content --> <div id="shows"> <a href="sortshows=location">sort by location</a> <a href="">show link</a> </div><!-- end shows --> <div id="footer"> </div> <?php endif; // end if ajax ?>

Hi there, I have a globally declared variable where I want to store a mapping table. var _Pagelist=new Map(); The following Ajax call doesn't seem to set _Pagelist above. I think I have set the context parameter correctly to 'this'. I've scoured through Stackoverflow and JQuery documentation but I can't figure out what is wrong. Any pointers would be much appreciated. Thanks if (!pagelist){ SearchWaitDisplay(true); $.ajax({ url: '/site/pagelist.php', context : this , success: function(result) { //here this._Pagelist is null, can't refer to This._Pagelist for (var x=0;x<result.length;x++) { this._Pagelist.set(result[x].id, result[x].url); //This will throw an error as _Pagelist is NULL. }; window.localStorage.setItem('pagelist', JSON.stringify(_Pagelist)); //The following will not update _Pagelist. Next 2 lines are just test code. this._Pagelist = result; window._Pagelist = result; SearchWaitDisplay(false); }, error: function (xhr, ajaxOptions, thrownError) { alert(xhr.status + ' ' + thrownError); } }); } else { //InitialiseSearchField(autocompletelist); }

Trying to do some ajax calls to an api named somedomain.com/xapi/index.php using intercoolerjs in my home page. I'm trying to make calls like this in intercoolerjs. somedomain.com/xapi/controller/method. Looked through a bunch of the posts but nothing seems to match what I am trying to do. Is there a change I can make to the htaccess file to get this to work? Anyone have a suggestion on this or is there a better way to handle the api?

I am implementing the ability to handle form submission using AJAX. The problem I have is that even though, as far as I can tell, I convert the AJAX-submitted JSON input into the equivalent of $input->post. When I call $form->processInput() it always throws that it appears to be forged. if ($config->ajax && $_SERVER['REQUEST_METHOD'] === 'POST') { // get the file body and decode the JSON. try { $body = file_get_contents('php://input'); $json = wireDecodeJSON($body); //wire('log')->save('info', 'ajax-json:' . print_r($json, true)); wire('log')->save('info', 'json-data:' . print_r($json['data'], true) . ' sid: ' . session_id()); $fakeinput = new WireInputData($json['data']); $form = deleteRequest('xyzzy'); $form->processInput($fakeinput); } catch (Exception $e) { http_response_code(404); echo json_encode(array('reason' => $e->getMessage())); } return; The log shows that the TOKEN and the TOKEN value are the same as when a normal form is submitted (I have both on the page for testing and can submit via normal POST as well as via AJAX). The session_id() value is the same. What am I missing? Log entries ("dumb" is the normal submit button name, "fake-text" is an empty text field, "submit" is the AJAX submit button name.) (using form-post): post Array ( [dumb] => dumb-button [TOKEN1649939534X1479234443] => f4VLZ17RlXfp9KVCQr/GIhoZ3krbuWK5 ) (using ajax-post): json-data: Array ( [fake-text] => [submit] => DELETE ENDUSERS [TOKEN1649939534X1479234443] => f4VLZ17RlXfp9KVCQr/GIhoZ3krbuWK5 )

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?

Module: http://modules.processwire.com/modules/ajax-intercooler-js/ Repo: https://bitbucket.org/pwFoo/ajaxintercoolerjs AjaxIntercoolerJS module features integrates IntercoolerJS async CCS ("loadCSS") and JavaScript load / update optional disable async css / js handling for blocks, sidebar, ... Intercooler X-IC response header support support / hook $session->redirect multiple X-IC-Trigger handling multiple X-IC-Script handling Usage Basics It's a autoload module, but you need to enable it inside of your templates, because scripts and dependencies ("JqueryCore") have to be loaded too. You can enable / load it global inside of the TemplateFileHelper controller "_layout.php" $ic->enable(); Some changes are needed to your main template "_layout.tpl". <!-- IntercoolerJS needs a target with ID "pageContent" for (async) page content --> <div id="pageContent"><?=$pageContent?></div> And your navigation links need some IntercoolerJS attributes like that. <a href="..." ic-get-from='/url-to-load' ic-target='#sidebar'>...</a> Your just use and hook MarkupSimpleNavigation. $nav = $modules->get('MarkupSimpleNavigation'); $opts = array( 'show_root' => true, 'item_tpl' => "<a href='{url}' ic-get-from='{url}' ic-target='#pageContent' ic-push-url=true>{title}</a>", 'item_current_tpl' => "<a href='{url}' ic-get-from='{url}' ic-target='#pageContent' ic-push-url=true>{title}</a>", ); // optional modify a specific link to use another target. For example "#sidebar" $nav->addHookAfter('getTagsString', null, function($event) { $link = $event->arguments[1]; if ($link->title == 'sidebar') { $event->return = "<a href='{$link->url}' ic-get-from='{$link->url}' ic-target='#sidebar'>{$link->title} (sidebar)</a>"; } }); // render and set as _layout.tpl template var $layout->set('navigation', $nav->render($opts)); Disable CSS refresh (remove "current" styles and load the new one) The current loaded page css shouldn't removed if the sidebar is updated. So it's possible to disable the asyncHandler inside of the "sidebar" template. $ic->asyncHandler(false); Quick and dirty FrontendUser integration You just need a PW template file like that. $fu = $modules->get('FrontendUser'); $fu->login(); $button = $fu->form->fhSubmitBtn; $button->attr('ic-post-to', $page->url); $button->attr('ic-target', '#pageContent'); if (!empty($_GET['logout'])) { $fu->logout($page->url); } // Workaround until IntercoolerJS 1.0.1 release if ($input->post['ic-trigger-name']) { $input->post[$fu->form->fhSubmitBtn->name] = $input->post['ic-trigger-name']; } $processed = $fu->process($page->url); if ($processed && !$user->isGuest()) { // $processed == false if login failed (not submitted / login successful == true) echo "Hello $user->name!"; echo "<a href='$page->url?logout=1'>Logout</a>"; } else { echo $fu->render(); } X-IC Response Headers /** * Set x-ic-trigger response header * @param array $array One or more events with related data arrays */ public function trigger($array) { $json = json_encode($array); header('x-ic-trigger: ' . $json); } /** * Set x-ic-script response header * @param string $js Valid javaScript code */ public function script($js) { header('X-IC-Script: ' . $js); } /** * Stop current / parent element Intercooler polling */ public function cancelPolling() { header ('x-ic-cancelPolling: true'); } /** * Resume current / parent element Intercooler polling */ public function resumePolling() { header ('x-ic-resumePolling: true'); } /** * Set current / parent element Intercooler polling interval * @param string $interval */ public function setPollInterval($interval) { header ('x-ic-setPollInterval: ' . $interval); } /** * Set x-ic-refresh response header * @param string $pathCsv Comma separated paths to refresh. */ public function refresh($pathCsv) { header('x-ic-refresh: ' . $pathCsv); } /** * Set x-ic-open response header * @param string $url New window / tab address */ public function open($url) { header('x-ic-open: ' . $url); } /** * Set x-ic-redirect response header * @param string $url Redirect destination address */ public function redirect($url) { header('x-ic-redirect: ' .$url); } Wrapper for X-IC-Trigger Add a event trigger with event name ($event) and parameters array ($array). "addTrigger()" method is a wrapper for usage with multiple event triggers. Native method for a single execution is method "trigger()" $ic->addTrigger($event, $array); Wrapper for X-IC-Script String of javascript code for client side execution. "addScript()" method is a wrapper for multiple usage of "script()" method. $ic->addScript($javascript); $session->redirect is hooked! The module hooks $session->redirect() method for ajax calls. It's needed to execute redirects by IntercoolerJS X-IC-Redirect for ajax calls. Used for the FrontendUser integration.

I have a single-page website with a contact form: <div id="wrap_form"> <form id="inquire" action="" class="uk-form"> <div class="uk-grid uk-grid-collapse"> <input type="text" id="i_name" name="name" class="uk-width" placeholder="Your Name" maxlength="250" required /> <input type="text" id="i_phone" name="phone" class="uk-width" placeholder="###-###-####" pattern="^[2-9]\d{2}-\d{3}-\d{4}$" required /> <input type="text" id="i_email" name="email" class="uk-width" placeholder="Email" pattern="/^[a-zA-Z0-9.!#$%&’*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*$/" maxlength="250" /> <input type="text" id="i_zipcode" name="zipcode" class="uk-width" placeholder="Zip Code" pattern="\d{5}-?(\d{4})?" /> <select name="scope" id="i_scope" class="uk-width" multiple required> <option value="" disabled>Representing...</option> <option value="residential">Residence</option> <option value="commercial">Business</option> </select> <textarea name="message" id="i_message" class="uk-width" placeholder="Message" rows="4" required></textarea> <input type="submit" name="submit" id="submit" class="uk-button uk-width" value="Send" /> <!--button type="submit" name="submit" id="submit" class="uk-button uk-width">Send <i class="fa fa-send"></i></button--> </div> </form> </div> Above is from contact.php template partial included in my _main.php output, which includes this script in the body closing: $(function() { $('.error').hide(); $("#inquire").submit(function(e) { e.preventDefault(); // validate and process form here $('.error').hide(); //var name = $("input[name='name']").val(); var name = $("input#i_name").val(); if (name == "") { $("label#name_error").show(); $("input[name='name']").focus(); return false; } //var phone = $("input[name='phone']").val(); var phone = $("input#i_phone").val(); if (phone == "") { $("label#phone_error").show(); $("input[name='phone']").focus(); //return false; } //var email = $("input[name='email']").val(); var email = $("input#i_email").val(); //var zipcode = $("input[name='zipcode']").val(); var zipcode = $("input#i_zipcode").val(); //var scope = $("select[name='scope']").val(); var scope = $("select#i_scope").val(); if (scope == "") { $("label#scope_error").show(); $("select[name='scope']").focus(); //return false; } //var message = $("textarea[name='message']").val(); var message = $("textarea#i_message").val(); if (phone == "") { $("label#message_error").show(); $("textarea[name='message']").focus(); //return false; } var dataString = 'name=' + name + '&phone=' + phone + '&email=' + email + 'zipcode=' + zipcode + 'scope=' + scope + 'message=' + message; //alert (dataString); return false; $.ajax({ type: "POST", url: "./inquiries/", data: dataString, success: function() { $('#wrap_form').html("<div id='inquired'></div>"); $('#inquired').html("<h3>Inquiry submitted!</h3>") .append("<p>Thanks, " + name + "! We will be in touch soon.</p>") .hide() .fadeIn(1500, function() { $('#inquired p').append(" <i class='fa fa-check' style='color:green'></i>"); }); } }); //return false; }); }); I tried submitting directly to a php file in templates which is forbidden so I saw that this worked for someone and no longer get an error; the form seems to submit from the frontend, however nothing results from it in the admin. Here's my inquiries.php template file: <?php $mailTo = $pages->get('/contact/')->contact_email; // sanitize form values or create empty $data = array( 'name' => $sanitizer->text($input->post->name), 'phone' => $sanitizer->text($input->post->phone), 'email' => $sanitizer->email($input->post->email), 'zipcode' => $sanitizer->text($input->post->zipcode), 'scope' => $sanitizer->text($input->post->scope), 'message' => $sanitizer->textarea($input->post->message), ); $error = ''; if($input->post->submit) { $up = $pages->get('/inquiries/'); $up->title .= "+"; $up->save(); $msg = "Name: $data[name]\n" . "Phone: $data[phone]\n" . "Email: $data[email]\n" . "Zip Code: $data[zipcode]\n" . "Job Type: $data[scope]\n" . "Message: $data[message]"; $p = new Page(); $p->title = date('Y/m/d H:i:s'); $p->parent = $pages->get('/inquiries/'); $p->template = 'inquiry'; $p->message = $msg; $p->save(); } I added the inquiries title appendage bit just for testing, but it just doesn't happen. How can I make this work/better test?

I pushed an initial (testing) version of TemplateFileHelper to bitbucket. https://bitbucket.org/pwFoo/templatefilehelper/src/ The autoload module extends TemplateFile instances with API vars $layout and $view $layout -> global layout instance of TemplateFile to set layout placeholders ($layout->set(...) or global scripts / styles. $view -> current page instance of TemplateFile to set the current page placeholders and current page scripts / styles. load() method Load a template / view with additional controller (php) file as subTemplate. Returns a TemplateFile object to render / output Each sub-template controller have access to API Vars and $subTemplate (current TemplateFile instance, $subTemplate->set('placeholder', 'My value...')). Load site/templates/chunks/test1.php controller and site/templates/chunks/test1.tpl view: $part = $view->load('chunks/test1'); echo $part->render(); chunks/test1 example <?php // chunks/test1.php - controller $subTemplate->set('var1', "Subtemplate variable output..."); <!-- chunks/test1.tpl - view --> <div><?=$var1?></div> scripts / styles properties FilenameArray like $config->styles | scripts. It should help to organize scripts / styles with ajax in mind (global / current page only). // current page script $view->scripts->add('js-file.js'); // global / layout script $layout->scripts->add('js-file.js'); You have to handle the output yourself by two foreach loops inside your _layout.php / _layout.tpl files (non ajax calls scripts and styles should be in layout head section). foreach ($layout->scripts as $globalScript) { ... } foreach ($view->scripts as $currentPageScript) { ... } IntercoolerJS module will take care about async / ajax handling of (custom page) scripts and styles. hook Page::render hook after page render to load and add the global layout. The current page template (PW template file == controller) just handle the currents page code / view. Global layout / controller / view is moved to separate files (default: _layout.php controller and _layout.tpl view). Just use $layout->set(...) to fill the _layout.tpl placeholder variables inside the _layout.php controller file. configurable module Some settings are available... Global layout (view + controller) file name (default: "_layout") Current page content variable (used inside of the _layout.tpl view to output current page content, default: "currentPageContent") View file extension (default: ".tpl") Controller file extension (default: ".php") It will be a dependency of the planned IntercoolerJS module which adds ajax page calls, async scripts / styles handling (current page scripts and styles...) and need a defined template handling to work...

I have a parent page containing a list of it's children. When you click on one of the children the page opens up in a modal box trough ajax. So far so good. But if i directly load the page through the url (parent/child) i get the child page. Is there a way of loading the parent page instead with the child page opened inside the modal box? I was first thinking of using URLSegments so it would load the parent page with the child name as segment however since the segment is an actual page it will load the page instead. Any ideas?

I'm looking to do a specific type of module. I want to use the field-typemulti fieldtype. So what I want to accomplish is the first field part stores a category (movies, books, etc.). The Second input field would need to be an AJAX lookup that would let me choose the ID of that book so I can take it and save it into my post. So let's just say the thing I'm pulling from is IMDB, I'll choose the movie category, then On the lookup get a list of movies based on a search. IF you can point me and help me out with this i'd greatly appreciate it!

Hello all, I'm pretty new to Process module development and couldn't find much related to my scenario. In my custom process module I have an execute function that returns data for AJAX requests. I would like to output pure JSON. Thus I need to alter the header to be 'Content-Type: application/json' and also not render all the admin theme output. How would I achieve that from within a process module? Or do I need to take care of that on the admin theme level? I have a custom admin theme running. Thank you.