Search the Community

Hello, I'm trying to submit a form through AngularJs $http object, but I can't get any response. My post values are a json object: {"user":"johndoe", "email":"jd@..."} But in the receiving page, I'm using this code [at no avail]: var_dump($input->post) // WireInputData (size=0) echo $_SERVER['HTTP_X_REQUESTED_WITH'] // returns void echo 'hi' // works var_dump(json_decode($input->post, true)); // returns null echo $config->ajax; // no response Thanks for any help

As part of the Agile user story system that I'm in the process of building, each story has a list of acceptance tests that go with it. I have this list put together with a repeater, and I've added a checkbox to each test so that developers can mark it off as complete. What I really want to do, however, is not require developers to edit the page to check things off. They aren't writing the stories, only reading them, so I really want to find a way to give them a checkbox on the rendered page itself that can update the state of the checkbox field when they click it. The users viewing the page are already logged in (I'm using Adrian's Protected Mode module to lock down the whole site), so It seems like then first step will be to find the right Process API call to save a change to the page. The second step is probably harder, though, making all this happen from Javascript.

Hi guys, i've been trying to fix an issue all day and can't figure it out! i have a php page that calls another php page through AJAX. The problem is that the session variables i set in the page i call through AJAX don't stick when i go back to the calling page. I believe it may be because of the way i'm calling the page url with AJAX, which could be what makes another session once it gets to the AJAX page url:"<?php echo $config->urls->templates?>logincode.php/", the session ID's are completely different on both pages and the name of the session from the calling page is 'wire'. The name of the session on the AJAX page is called 'PHPSESSID'. So the sessions are not the same, which is why the session variables set in the AJAX page aren't available in the calling page when the AJAX page is returned to the calling page. i've tried renaming the ProcessWire session name in the config file to 'PHPSESSID', although that didn't work. When i go to the page 'logincode/' as a regular post from a form it works perfectly and has the same session ID and variables, although through AJAX the sessions on both pages are completely different. Does anyone know how to do this properly and make the session the same? Please help, it's driving me mad! see the AJAX calling code below: $.ajax({ type : 'POST', xhrFields: {withCredentials: true}, data : {'username':username, 'password':password}, url:"<?php echo $config->urls->templates?>logincode.php/", success:function(result){ if(result == "1"){ alert('Please input username and password'); } }, error:function(xhr, status, error) { alert('error'); } });

Hello, I've been using ProcessWire for over a year now. It's wonderful to work with ProcessWire and enjoy the freedom it provides. I've used PW for tons of projects and now I've started using it for much complex projects such as invoicing applications and PM tools. The only problem I've faced so far is creating public side forms with tons of fields that need validation and processing. I've been doing it manually, writing jQuery validations, form processors and then using PW's API to store information coming from client side. It works but takes a lot of time. A friend of mine uses Drupal, he seems to be able to create client side application of same sort without having to manually process any form, with AJAX support too. I'm not complaining in anyway. I'm well aware that PW has a very strong backend that works just like(for me, even better than) Drupal. But it can't be given to public/client to use for doing form related works. I'm interested in knowing how others are handling this and what I'm doing wrong exactly? Have I missed something? I'm just looking to find a way to make forms processing less and less manual. Like I'll just create a template with set of fields, and some way to have a form of those fields created. Just like it happens at admin side. Thanks.

HELLO! My new portfolio website is nearly finished and I would love some feedback and bugs if anyone has a moment. Built with PW using mixup.js, ajax, loaded.js, tons of css transitions and some custom slideshow and canvas bits. currently here http://benbyford.com/dev/new/ but will be moving it soon to replace http://benbyford.com Thank you!

I'm hoping that someone can help me out with an ajax problem. I'm trying to build a front-end signup form, using jquery.validate for client-side validation, and then sending the form details via a jquery ajax post. The $.ajax submission reaches the target page OK, but the data that should have been sent with the post seems to get lost along the way. $_POST is always empty. The submitHandler for jquery.validate has the following code; $.ajax({ type: "POST", url: "/processMaths/admin/adduser", data: "name=fred&age=27", // data simplified for testing - I've also used {name:"fred",age:27} success: function(rtndata) { $('#debug').html(rtndata); } }); The page handling the ajax request has the following code added to try to work out what is going wrong. print "CONTENT_TYPE: " . $_SERVER['CONTENT_TYPE'] . "<BR />"; $data = file_get_contents('php://input'); print "DATA: <pre>"; var_dump($data); var_dump($_POST); print "</pre>"; echo "here at adding users<br/>"; which updates my #debug div with the following message which suggests that no data reached the page. CONTENT_TYPE: DATA:string(0) "" array(0) { } here at adding users Does anyone have any ideas why the $_POST is empty. The same code outside of PW works OK, and I've previously used ajax inside PW without any problems. I'm stumped on this one - even tried rebooting in desperation, and I've run out of ideas for what else to try. There's obviously something different between my other working ajax calls (including other processwire sites) and this one, but I can't spot the difference. All use apache running on localhost, same version of jquery. The master plan is to set up a mathhelp site using processwire, where teachers can signup (and be assigned a role as "teacher"), and join up their students (role "student" ) - teachers get to set tasks for students to do, and monitor their results, so teachers will have access to more pages than the students (and ideally neither student or teacher will ever need to see the back-end admin pages ). Students, classes and teachers will all be pages. Is there an alternative front-end way of collecting user data that I should know? A more elegant way of using ajax perhaps? I've done so much head scratching my head is getting sore.

Hi, I'm experimenting with using AJAX to deliver just a portion of the page, as described here by Ryan. I've got it working on using this javascript: $(document).ready(function () { $("#topnav a").click(function() { $("#topnav a.alert").removeClass('alert'); // unhighlight selected nav item... $(this).addClass('alert'); // ...and highlight new nav item $("#bodycopy").html(""); $.get($(this).attr('href'), function(data) { $("#bodycopy").hide().html(data).fadeIn(500); }); return false; }); }); However I've also got a 'load more' button powered by Infinite AJAX Scroll which works fine when you first load the page. This is the javascript I'm using for the 'load more' button: var ias = $.ias({ container: "#container", item: ".item", pagination: "#pagination", next: ".next a" }); ias.extension(new IASTriggerExtension({ html: '<div class="ias-trigger" style="text-align: center; cursor: pointer;"><a class="button round large alert">{text}</a></div>', })); ias.extension(new IASSpinnerExtension({ })); The 'load more' button works on the first load of the page, however if you click 'all' (or any of the filter buttons, the back to 'all') it doesn't load the Infinite Ajax Scroll script and just shows the plain ol' text link to /page2/ Could anyone point me at how I might be able to make the Infinite Ajax Scroll 'load more' work when the AJAX controlled buttons are used? Any help is greatly appreciated!

I need your advice! I recently launched my fathers site http://www.skulptour.eu which has a booking form on this page http://www.skulptour.eu/will-kommen/buchung/ The form is validated with the jQuery Validation Plugin and fires an ajax call for the booking-form-process.php (which sends the an notification e-mail to my dad) inside the submit handler of the plugin. Here is the code to demonstrate the structure /* * * contact-form.js * */ $(document).ready(function(){ //form var booking_form = $('#booking-form'); var booking_form_success = $("#booking-form-success"); //add workshop validation rule jQuery.validator.addMethod( "isworkshop", function(value, element) { return /^(W(O|E)|S)\s?\-?14\s?\-?\d{2}\s*?$/i.test(value); }, "Geben Sie eine Workshop-Kennnung ein. Beispiel: WO-1420 oder S-1421" ); //validate form booking_form.validate( { rules: { / .... / }, messages: { / .... / } }, highlight: function(element) { $(element).closest('.control-group').removeClass('has-success').addClass('has-error'); }, success: function(element) { $(element).closest('.control-group').removeClass('has-error').addClass('has-success'); $(element).closest('.error').remove(); }, submitHandler: function() { console.log("submitHandler: call ajax"); $.ajax({ url:'/site/mail/booking-form-process.php', data: booking_form.serialize(), type:'POST', success:function(booking_form) { console.log("submit Handler: ajax: sucess"); $("#booking-form").hide(); $("#booking-form-success").fadeIn(500,1); }, error:function(data) { $("#error").show().fadeOut(5000); } }); // ajax } // submitHandler }); // validate (jQuery Plugin) }); //doc ready Now i'd like to add a custom google analytics event tracker, which fires only if the ajax call is successfully executed. i already tried to add the following lines right after submitHandler: function () { //google analytics event console.log("submitHandler: google analytics call event"); ga('send', 'event', 'buchung', 'click', 'workshoptyp', 1); but it won't work. unfortunately i've no experience with the google analytics events yet and i updated my Analytics Account to use the new Universal.js, which itself is implemented properly. Do you guys have any ideas, how to solve this? Pseudocode: Booking Form > Validation w/ Errors > Ajax Call (Some php) > Ajax Call Successful > Fire Google Analytics Tracker Thanks in advance! - topada

Hi everyone, I'm working on a project where users can upload images, using a jquery uploader (no $_FILES input in the form) : - User select images - Images are uploaded in a specific folder After that, how can i attach the images to a page ? I took a look to wireupload() but it seems to need a $_FILES input. Thanks for you help

Pretty new to processwire and really enjoying it so far. I'm trying to build a pretty simple Ajax driven website (pretty new to me so excuse my general ignorance regarding ajax) which inserts content from child pages into a parent page. I've read through Ryan's thread here which was super helpful, but still can't quite figure out the best practices for what I'm trying to achieve. For now, all I'm trying to do is have the parent page load content from a child page with an ajax request, BUT these child pages also need to be inaccessible via the URL processwire creates for them. So the child pages are hidden via their template's access options. The /parent/ page successfully loads some initial content from these child pages using the "include=all" selector ( $pages->get("/parent/")->children('include=all'); ) as recommended in this thread. However as the child pages are hidden any ajax request to pull data from them results in a 404. If anyone can suggest the best practices for using processwire to create a site like this it would be a huge help. I assume that later I may have issues with linking/indexing by using this approach, but am happy to figure those out later.

Hi ! I trying to send a "Participant form" that should be a bit dynamic. Very simplified the form looks like this Club info Participant NAME etc [ + add one more ] Photo of receipt [submit] My problem is how to use wireupload with data sent by JavaScript. I get as far as the upload path... but at $u = new WireUpload(XXX); I'm totally in the dark which info the xxx should bee when sent as JavaScript. ? My goal is to populate the field $item->f_receipt with the photo. (Right now im working locally... hope that don't cause problem) var_dump($_FILES); looks like this so im sending something to my process page: array(1) { ["f_receipt"]=> array(5) { ["name"]=> string(22) "121010-111847AM_m7.jpg" ["type"]=> string(10) "image/jpeg" ["tmp_name"]=> string(36) "/Applications/MAMP/tmp/php/phppJGcSh" ["error"]=> int(0) ["size"]=> int(50846) }} I have been reading around at the forum for two nights but im to novice to get it. Copying code from http://processwire.com/talk/topic/1809-image-upload-via-wireupload/ http://processwire.com/talk/topic/3105-create-pages-with-file-upload-field-via-api/page-3 this is my code: All tips in the right direction will very welcome. function addPage($ordernumber, $name, $enamn, $gender, $weight, $cardnumber, $club, $trainer, $epost, $telefon, $message, $receipt,$_parent ){ $item = new Page(); // create new page object $item -> template = 'competition_form_person'; // set template $item -> parent = $_parent; $p -> name = uniqid($name . '_' . $enamn); $item -> title = $_REQUEST['f_ordernumber'] .'_' . $name . '_' . $enamn . '_' . $weight; $item -> save(); $item -> f_ordernumber = $ordernumber; $item -> f_name = $name; $item -> f_ename = $enamn; $item -> f_gender = $gender; $item -> f_weight = $weight; $item -> f_kampsportskort = $cardnumber; $item -> f_club = $club; $item -> f_trainer = $trainer; $item -> f_epost = $epost; $item -> f_telefon = $telefon; $item -> f_message = $message; $item -> save(); $upload_path = $page->config->paths->root . 'tmp_uploads/'; echo '$upload_path---------------------------->' . $upload_path; // RC: create temp path if it isn't there already if(!is_dir($upload_path)) { if(!wireMkdir($upload_path)) throw new WireException("No upload path"); } if(empty($_FILES[$req]['name'][0])){ $errors[$req] = "Select files to upload."; } // setup new wire upload $u = new WireUpload($receipt);/// $receipt['name'] $_FILES $u->setMaxFiles(1); $u->setOverwrite(false); $u->setDestinationPath($upload_path); $u->setValidExtensions(array('jpg', 'jpeg', 'png', 'gif')); foreach($u->execute() as $filename) $item->f_receipt -> add($filename); $item -> save(); } The JS sending info oData = new FormData(document.forms.namedItem("form_competition")); var receipt = document.getElementById('f_receipt'); var file = receipt.files[0]; oData.append('f_ordernumber', postJSON.f_ordernumber); oData.append('f_trainer', postJSON.f_trainer); oData.append('f_epost', postJSON.f_epost); oData.append('f_telefon', postJSON.f_telefon); oData.append('f_receipt', file); oData.append('f_message', postJSON.f_message); oData.append('fighters', JSON.stringify(postJSON.fighters)); /*make the ajax call*/ $.ajax({ url: "/slagskeppet_test/ProcessWire-master/call_competition_form/", type: "POST", data: oData, contentType: false, processData: false, success: function(msg){ alert(msg); }, error: function() { alert("failure"); } }); /Erik

Hello everyone, I was just asking myself whether any has already created some kind of ajax file upload in Processwire for a page that is not yet created. As a simple example, think of a user registration form with the usual fields including an avatar image. I'd like to use something like Plupload, Dropzone.js or a similiar Ajax file uploader to upload the file asynchronously already before the rest of the form is processed. That would make it possible to i.e. directly show the user a resized preview of his avatar image, build forms with a lot of file uploads that would otherwise break the file upload limit, and probably a lot more neat features. It would be essential, that it is usable like a standard backend file upload/image field afterwards, it would be even better if files are also located in the id-named folder in assets/ after submitting the leftover form. The way I thought about how to do this would pack the following functionality in a plugin: Use some existing Ajax file uploader to get the file from client to server. There, a module takes care of the request, saves the file to some temporary folder and answers with an (id) reference to the image to work with it later. Ideally - if it's an image - it would already be possible to get a resized version of the image to provide a live preview. When the form finally get's submitted, the request includes the reference to the file. On the server, the image field is constructed as usual and the file itself get's moved to the "default" location. The temporary reference is deleted. One problem I see with this approach, is that after a while you will have a lot of unused files and references but that's no problem that a cron job with some code to get rid of old stuff couldn't solve. Having written all that down: Is there anything that already solves more or less what I described? And if not: do you see any problems with my outline or do you have a more elegant idea to implement this? Any feedback on this is appreciated, for sure. Marc

Hello forum, I'm here to get a help again. This time, I'm having a trouble with ajax data. Sending a data into the same page seems okay. However, Sending a data into the different page seems not working. I don't know why. Here is the jquery code. $.ajax({ url: url, type: 'POST', data: { from: 'thispage' }, success: function(data){ alert(data); } }); If url is './' I can get this value from $input->post->from This value returns 'thispage' as expected. If url is '/different/page' I won't get this value from the above $input->post->from It seems url has to be a file, Processwire template and page created somehow. Otherwise, it won't be processed because of permission issue. So, I created template and a hidden page just for the processing ajax. Any idea what would be wrong? Thanks.

Hi all, I'm actually try to handle some mixed sort of adaptive and responsive image display in a gallery. That means I want to serve one out of three or four image-length that best fit to the current client-device-viewport, (to avoid sending 1600x1200 images to smartphones). The plan is as follows: The first page displays only thumbnails, so with them there is only one length. When the thumbnail page is loaded, it should send the actual viewport dimensions to PW. Dimensions get stored in session. Image-src is linked to /img/ID/, /img/ is a PW php script that compare last stored viewport dimensions against the width-height of desired image and send that one that fits best. As I have half of that already running long time on my old website (but with prototype and scriptaculous) I think I can solve that with jquery too. But with browser compatibility and all that stuff I'm feeling pretty much uncomfortable, so I want to ask if the following JS-code is bullet proof and also up to date for my needs or if I should use something different these days: function sendViewportDimensions() { // some jquery-ajax code } document.observe('dom:loaded', function() { sendViewportDimensions(); Event.observe(document.onresize ? document : window, "resize", function() { sendViewportDimensions(); }); }); And second question is if I have to add some kind of session-id to the ajax-request or if that is send automatically with it, or if it is send only sometimes automatically and sometimes not? (and I better have to add it to be save) ??

Has anyone implemented the jQuery version of Paul Irish's Infinite Scroll script on a site built with ProcessWire? If so, I'm interested in reading about your experience and tips on how you implemented it. https://github.com/paulirish/infinite-scroll

SOLVED Hello people! This is my first post at the processwire forum. There is something i can't figure out. The best way to explain my problem is to go to the following website: followmylegends.com. When you try to register a small pop-up is coming. Now my question is how can I fill the pop-up with content with jquery? ($.get, or AJAX) When i try something like this it wont work. $('#register, #forgot').click(function(e){ var div = $(this); e.preventDefault(); $.get($(this).attr('href'), function(data) { $('#'+$(div).attr('data-reveal-id')).html(data); }); }); Then I get an error: GET http://www.followmylegends.com/site/templates/register/register.php 404 (Page Not Found) But the file is in templates/register/register.php. Can somebody help me? Thx, John Update Sorry for this topic.. This was a bit timewasting like 3 hours. I have to learn more about processwire. What I did was create a new template. Use it for a page and called it with url.com/register/ Sorry again..

Hi, Is there a build in way in Processwire to load pages through with ajax-requests? I would like to load a homepage with header and footer included and after that only the body of the next pages. Then, only with the first load, jquery, other javascript and css has to be loaded. Thanks

Hi, I'm gonna try and build an ajax powered comments system and was planning to build the whole thing on a one comment == one page basis. The comment page having a textfield for the actual comment, a page field with the user page of the commenter (it will require registration) and a page field for the page that was commented on. Since Ryan's comments module uses simple DB entries I was wondering if this is a good plan and what the benefits of not having one page per comment are? Will I experience problems if a million people comment stuff on my site? Thanks for hints an ideas! thomas

Hello, since I almost finished my first processwire project I am somewhat tempted to rebuild other sites that need a relaunch anyway. One of which is a video site where selected people can upload videos which are transcoded on the server into different formats (m4v,webm). This site is build in symfony 1.4 and since every little change always takes me ages to commit, I would very much like to rebuild in PW. One of my first questions for this project is if the inputfieldFile Ajax upload would be suitable for large video uploads up to 1GB or if I should rather use SWFUpload like the old site does ...? Does anyone here have any experience with those kind of uploads? Thanks, thomas