Search the Community

I know this is not exactly ProcessWire related, but it's still an issue I'm facing while trying to implement in a PW site. I'm trying to get Fullcalendar to work, first I included it via CDN, which worked OK, but then I wanted to implement the rrule plugin which always threw an error that I just never managed to resolve. Then I switched to installing it via npm, not least because in the long run I would like to have Fullcalendar be served locally anyway, which is the best practice (?). I followed the instructions on www.fullcalendar.io concerning the implementation via npm: import { Calendar } from '@fullcalendar/core/'; import dayGridPlugin from '@fullcalendar/daygrid'; import timeGridPlugin from '@fullcalendar/timegrid'; import interactionPlugin from '@fullcalendar/interaction'; document.addEventListener('DOMContentLoaded', function() { const calendarEl = document.getElementById('calendar') const calendar = new Calendar(calendarEl, { initialView: 'dayGridMonth' }) calendar.render() }) But the calendar does not render and I keep getting this error: Uncaught TypeError: Failed to resolve module specifier "@fullcalendar/core/". Relative references must start with either "/", "./", or "../". FYI I'm using webpack to bundle it and entry and output points seem to work fine. All node_modules are visible in the file system. I don't use any framework like react, just vanilla js. Error occurs on Chrome, FF and Safari Help is very much appreciated, I already lost a couple of days over this 🙈

JavaScript Tag Loading Visualized by Wes Bos See here for more/discussion:

Hi, I decided to put a dynamic background to some pages of my site. The background is controlled by a js script. I also decided to create a template and a field to choose from time to time which background to put. Unfortunately, the processwire condice to dynamically link scripts seems not to work as well as for images and simple links. Where am I going wrong? DON'T WORK: <script src="<?=$page->texturl_background?>"></script> DON'T WORK: <script src="<?php echo $config->urls->templates?><?=$page->texturl_background?>"></script> Instead, it works well: <link rel="icon" href="<?php echo $config->urls->templates?><?=$page->texturl_favicon?>" type="image/png">

Reminder to myself to occasionally step back and think about what I am trying to do. Background: Working on an autocomplete function using google places. Allows clients or me to fill out boring address block and accurately geocode all at once from single input. No repetition, no fuss, for single business or multiple branches using repeaters. Not at all necessary, but figured why not, feels kinda nice and will not be costing me anything tucked away in the backend. "Problem" and ridiculously easy solution: Was working nicely, except when using enter/return to choose location, as save was getting fired on original input, throwing off the auto-filling. Stupidly, I spent too much time trying to chase down php and api solutions, using many hooks without success attempting to prevent the page and field from saving. Finally, feeling like a dumbarse, I took a step back and cursed my silliness. Yep. If the thing you want to work around is javascript, maybe try javascript to work around it. In the end, much to my embarrassment, the solution I sought was adding a few simple lines of js. Define the form, and preventDefault on the form's submit once. I cringe at how I missed the very simple solution while looking for the complicated workaround. Won't be the last mistake I make, by a long shot, but hopefully the last time I make this particular one :) window.addEventListener('focusin', function (event) { const input = event.target; if (input.classList.contains('autoComplete')) { // Below, the 4 very simple lines I should have thought of much, much sooner const form = document.getElementById('ProcessPageEdit'); form.addEventListener('submit', function(e) { e.preventDefault(); }, { once: true });

Hey i have a problem with the code: $('a').click(function(link) { link.preventDefault(); location = this.href; $('body').fadeOut('slow', open); }); function more() { window.location = location; } It's writen in Jquery but i will convert it to vanilla js. Can somone help me with it?

So I have been hard at work creating url segments for a template (api) and everything is working swimmingly in creating a simple end point for svelte.js. I have however, run into a few questions that I can wrap my head around. In my api template I have: if($input->urlSegment1 === 'clients') { header('Content-Type: application/json'); $clients = $pages->find("template=clients"); $client_array = array(); foreach ($clients as $client) { $id = $client->id; $title = $client->title; $url = $client->url; $clientName = $client->client_name; $clientColor = $client->client_color->value; $assigned = $client->assigned_to->user_full_name; $client_array[] = array( 'id' => $id, 'code' => $title, 'name' => $clientName, 'associated_users' => $assigned, 'url' => $url ); } $client_json = json_encode($client_array, true); echo $client_json; } The output json from this is: [ { "id":1644, "code":"abc", "name":"Test Name", "associated_users":null, "url":"\/pw\/clients\/abc\/" }, { "id": 1645, "code": "xyz", "name": "Test Name", "associated_users": null, "url": "\/pw\/clients\/xyz\/" }, ] I was curious is it possible to add in "clients" before this output json so it would appear as clients: [ { "id":1644, "code":"abc", "name":"Test Name", "associated_users":null, "url":"\/pw\/clients\/abc\/" }, { "id": 1645, "code": "xyz", "name": "Test Name", "associated_users": null, "url": "\/pw\/clients\/xyz\/" }, ] I was not really sure of how to tackle this in my php code, and have spent more time than I care to admit trying to figure it out. Another question I have is that "associated_users" is returning null, which in this instance is correct. It is a multi page field that is set to pull a custom name field from the users template, ie "Louis Stephens" would be associated with the first page. I understand that I need to use a foreach to get the correct data, but I was really unsure of how to place this inside an array, or update the array with the new data. Any help with any of this would greatly be appreciated.

What the f*ck JavaScript? A list of funny and tricky JavaScript examples Some really odd stuff there... worth scanning through. I chuckled more than once... "b" + "a" + +"a" + "a"; // -> 'baNaNa' NaN === NaN; // -> false (![] + [])[+[]] + (![] + [])[+!+[]] + ([![]] + [][[]])[+!+[] + [+[]]] + (![] + [])[!+[] + !+[]]; // -> 'fail' typeof NaN; // -> 'number' (It ain't new, so sorry if this has been posted previously here)

Hi, based on the work of @microcipcip and @gebeer (see their posts here and here), I put together a Processwire + React boilerplate (profile). Github repo: https://github.com/lapico/process-react Cheers, K

Hello forum! Our customer wants to choose only 15 minute intervals in the inputfield Datetime. So the dropdown values would be: 0, 15, 30 and 45. Is there an easy way to achieve this? Any help is appreciated ?

I would like every new Site Profile like new REGULAR Profile to have modern support for quick creation like browser sync, minify css, js . Something on the style below: https://foundationpress.olefredrik.com/ https://understrap.com/ One profile that does not have any CSS frontend attached but has the features needed to quickly add eg pagination, comment form, or site menu something like: https://roots.io/sage/ OR https://laravel.com/docs/5.5/mix I'm not very godd with js but webpack.js meybe is good for this solution ... I would like to know what advanced users in the front end think about this combination and what would be the best ...

Does anyone here use a LINQ derivative / port for their projects? Coming from the .NET World, this is one of the things I miss the most when developing in PHP. Then I came across these 2 projects. For PHP : https://github.com/Athari/YaLinqo For JS: https://github.com/mihaifm/linq Why I chose those 2 over others : https://stackoverflow.com/questions/5792388/is-there-something-in-php-equivalent-to-linq-in-c I was wondering if anyone had experience using either one of them AND LINQ in .NET and could share their experiences? You might wonder why you would use LINQ ? The main benefits are better code readability (doing away with if -> then statements), a unified way of querying data in front and backend (Syntax is SQL derived) and applying paradigms from functional programming (See doing away with if->thens) // linq.js - anonymous function Enumerable.Range(1, 10) .where(function(i) { return i % 3 == 0; }) .select(function(i) { return i * 10; }); // Alternative shorter syntax using default variable names $result2 = from($categories) ->orderBy('$v["name"]') ->groupJoin( from($products) ->where('$v["quantity"] > 0') ->orderByDescending('$v["quantity"]') ->thenBy('$v["name"]'), '$v["id"]', '$v["catId"]', 'array( "name" => $v["name"], "products" => $e )' );

Hello, I just want to point out this framework for making html apps https://onsen.io/ it's compatible with jquery, angular, vue, react or any other js framework. So far I made an app using this and bootstrap with https://propeller.in/ for the desing and some libs like jquery and lodash for the app logic I prefer this to other alternatives like ionic since it does not bound you to angular or react. Cheers

Hi, I read this and I would like add it to my site. https://www.gavick.com/blog/scrollreveal-js-the-easiest-way-to-create-on-scroll-animations Excuse me if it's off topic! My probem is: I add the new js file in folder of the site (...assets/js/scrollReveal.js), then I add the code in the html page : <!--SCROLL ANIMATION SCRIPTS--> <script src="assets/js/scrollReveal.js"></script> Then I add: data-scroll-reveal="enter from the bottom after 0.9s" near the css class But the js effect don't start. I read this: https://www.gavick.com/blog/scrollreveal-js-the-easiest-way-to-create-on-scroll-animations where the chef say: Then, to include library, please open the template/layout/blocks/head.php file and use this code: 1 $this->API->addJS($this->API->URLtemplate() .'/js/scrollreveal.js'); That’s all you need to do, and the library is now good to go. Now, it's necessary in processwire add that api code in the head.php file?

Hi, I see this tutorial (but not listen it because I'm italian and don't understand english speaking). I choose this CSS Framework for my homepage, but in my homepage don't appear any image. It's as it not exist, and it is as don't exist any css or js. But in my pc on my browser all work very well. As I see in the video tutorial of Philip Reiner, I create a new Template File, new page, new folders by ftp with css, jss, images... Then, in my Template File I copy the index file of CSS Framework Package and replace the old url with this: ... <script src="<?=$config->urls->templates;?>js/skel.min.js"></script> <script src="<?=$config->urls->templates;?>js/init.js"></script> <noscript> <link rel="stylesheet" href="<?=$config->urls->templates;?>css/skel.css" /> <link rel="stylesheet" href="<?=$config->urls->templates;?>css/style.css" /> <link rel="stylesheet" href="<?=$config->urls->templates;?>css/style-wide.css" /> <link rel="stylesheet" href="<?=$config->urls->templates;?>css/style-noscript.css" /> </noscript> ... My page is http://www.casbook.org The words there are, but there aren't any css-js! To Philip happen this too, but then in an istant he risolution all and appear menù and colours and css. When he change href! I changed href but all is remain as before: white and black, less images. Anyone can help me?? I can pay too for this problem, but only a little quantity of money!

Hello, I went in this tutorial where Joss Sanglier says to put the new folders of CSS-JS directly inside the folder templates of PW. With ftp. I did it. The guide also says to add: <link rel="stylesheet" type="text/css" href="<?php echo $config->urls->templates; ?>css/bootstrap.min.css" /> for the css. and for the js: <script type="text/javascript" src="<?php echo $config->urls->templates; ?>js/bootstrap.min.js"></script> but I did not understand exactly WHERE I must add it. Perhaps in the Processwire's index.php file? Perhaps within the file of the template that I am using? Perhaps inside the new folders CSS-JS? If so, WHAT I must substitute? I would like to understand if the replacement of CSS/JS standard processwire by a plane CSS-JS that I choose by internet, is an operation that I can do well, or I must pay a professionist. Thanks Francesco

Hi, I red this: http://processwire.com/docs/tutorials/installing-a-css-framework/page2 and Perahps I don't understand anything. Excuse me! But, I gone here: http://www.free-css.com/free-css-templates/page198/istria-1 and I downloaded the package. In this package there is 4 directory: "css", "js", "img", "images" and out it some html files. Then, I gone bye ftp filezille in to my site, and I charge those 4 directory on .../site/templates. But my site is as before. The aspect is the same. How I wrong? Question two. I seen the new forum with personal homepage for all members, that seem as facebook! There'is a modules "forum" for do same wonderfull thing in any site PW, or I must write all code by my hand? Thank you for any replace!

Hello again, while I evaluated possabilities around reusing the image dialog outside of CKE (https://processwire.com/talk/topic/10009-image-field-select-image-from-another-page/) I did a introspektion of CKE's pwimage plugin (indeed I reused a lot of the given logic). Because I don't like the way, the plugin grabs its image information in a big bulk of code, I started to refactor the code and ended in something like this (excerpt): [..] this.config = { uri : ProcessWire.config.urls.admin + 'page/image/' , selectors : { image : '#selected_image' , captionWrapper : '#wrap_caption' , cbLink : '#selected_image_link' , cbHiDpi : '#selected_image_hidpi' , cbCaption : '#selected_image_caption' , inDescription : '#selected_image_description' , inRotation : '#selected_image_rotate' , inPageId : '#page_id' } [..] }; [..] , getImageProperties : function (jImage , jIframeContent) { var that = this; var jImage = jQuery (that.config.selectors.image , jIframeContent); var jCheckboxLinkToLarger = jQuery (that.config.selectors.cbLink , jIframeContent); var jCheckboxHiDpi = jQuery (that.config.selectors.cbHiDpi , jIframeContent); var jCheckboxCaption = jQuery (that.config.selectors.cbCaption , jIframeContent); var jInputDescription = jQuery (that.config.selectors.inDescription , jIframeContent); var jInputRotation = jQuery (that.config.selectors.inRotation , jIframeContent); var jInputPageId = jQuery (that.config.selectors.inPageId , jIframeContent); var flipHorizontal = jImage.hasClass ('flip_horizontal'); var flipVertical = jImage.hasClass ('flip_vertical'); var src = jImage.attr ('src'); var cls = jImage .removeClass ('ui-resizable No Alignment resizable_setup') .removeClass ('rotate90 rotate180 rotate270 rotate-90 rotate-180 rotate-270') .removeClass ('flip_vertical flip_horizontal') .attr ('class') ; var imageProperties = { 'identifier' : jImage.data ('idname') , 'pageId' : jInputPageId.val () , 'src' : src , 'file' : src.substring (src.lastIndexOf ('/') + 1) , 'origin' : jCheckboxLinkToLarger.val () , 'width' : jImage.attr ('width') , 'height' : jImage.attr ('height') , 'widthAuto' : jImage.attr ('width') == 0 , 'linkOrigin' : jCheckboxLinkToLarger.is (":checked") , 'alt' : jInputDescription.val () , 'caption' : jCheckboxCaption.is (":checked") , 'hidpi' : jCheckboxHiDpi.is (":checked") , 'editing' : { 'rotate' : parseInt (jInputRotation.val ()) , 'flip-h' : flipHorizontal , 'flip-v' : flipVertical , 'crop-x' : 0 , 'crop-y' : 0 } , 'class' : cls }; if (! imageProperties.width) { imageProperties.width = jImage.width (); } if (! imageProperties.height) { imageProperties.height = jImage.height (); } return imageProperties; } As you can see, I started to put selectors into configurations und tried to build a literal of the significant image data (which was the goal). I thought it would be nice, if the Image modal page itself could implement an interface like this. So that every derived operation (including CKE) could simply ask for image properties instead of scratching data from markup and input element status all by itself. In result there would exist a future proof approach for times when UI elements, possible image modifications etc. change.

I know that the Topic title is probably confusing(sry for that ). Let me explain my Question: I have two Filters(Main Filter & Detail Filter) like you can see below. When I click on a main filter it gets bold and will be added to the "Meine Auswahl(my selection)" container below the Filters. When I click on the "X" span inside the "My Selection" Container, the selected Filter gets resetted. Now, what I want to achieve is a ajax Filter which changes the php Selector for the for the $pages->find(). For Example: When I come to that page, the selector for the main and detailfilter should look like this: $branches = $pages->find("template=branch"); // Main Filters <?php $genres = $pages->find("template=genre, select_sparte=''"); ?> //Detailfilters (Returns a NullPage so dont show the Detailfilters when none main filter is selected) When I select for e.g Example Filter 1 it should change to this without a page refresh: <?php $genres = $pages->find("template=genre, select_sparte.title='Example Filter 1'"); ?> So that I get the Detail Filters of Example Filter 1 without a page refresh. Is this even possible? When yes how, can you guys show me a direction?

wanna share that new shiny star on the autocomplete horizon... http://leaverou.github.io/awesomplete/ looks very very interesting i think!

I made an image field name slider1 with max of 3 images. uploaded the 3 images for my slider to use on my slider in my homepage. but how do i call it one by one? for ex. ignore the code for my first item it doesnt work but how do i make my slider work? have 3 images uploded on a single image field called slider1 how do i call each of them , what is the code to be put on img src for each item

Hello again! I use external libraries in my sites (in the backend and frontend) almost all traffic to my website was in those files. I changed the modules jquery, jqueryui, fancybox, etc ... $this>config>scripts->add("https://raw.githubusercontent.com/ryancramerdesign/ProcessWire/dev/wire/modules/Jquery/JqueryUI/JqueryUI.js"); Will I have any problems doing this?

Hello all, I haven't been around for quite a while, but I'm still trying developing stuff for my classrooms (I'm an English teacher) and this time I'm a little stuck even before starting... Let me explain : I've used ProcessWire for my English site (FLEnglish : http://flenglish.tuxfamily.org - if you're curious) and I just loved it (not my site, ProcessWire ;-), and I appreciated the community help a lot) So here I am again with a 'new' project and my questions : I'd like to implement some kind of RPG Game (in the style of HabitRPG) for the language classroom. Actually, it's a lot easier than HabitRPG since I'm interested mainly in managing the score part of the game. I'd like the kids to have a character (no images for the moment, just a name), and scores for Health Points, Experience, Level, Gold Coins) and according to their achievements in class, the scores improve and so on. The idea is that I'd need a tool quite handy to manage because I have many pupils in classes and no time in class to manage all this. Let's see an example : All kids did their homework. They all get +3 experience and 5 gold coins. I don't want to spend 10 minutes going over each pupil's name and adding their numbers... I thought of the Skyscrapers demo site for a start : yes, I could manage students this way, having field for XP, HP, GC and so on (this is what I started doing actually). But then,I can't manage pupils' results 1 by 1 going through the Admin page in PW. So I thought of using Javascript to avoid having to validate a page on which I would have 120 fields to update according to the task succeeded. That's when I started thinking trying to continue learning AngularJS, but I was unable to make it work along with PW... (I get a 403 error when routing to the view template_ I put everything in /site directory, maybe that's not a good way). Anyway, this is quite a mess in my head at this time even though I would like to try and do something this way. If anyone here could give me a possible thought about this to give it a start : could PW be useful for such a task? To be honest, I would love to use PW for this since I would like to be able to merge this score thing with my site already using PW (and why not imagine 'users' being able to log in to see their scores and so on...?) I'm afraid I'm being extremely complicated on that. Let me rephrase it : - Could I have such a system for scores management using PW ? - Could I have a user interface quite handy to update scores easily using PW? In brief, what do you think? I hope reading this was not too much of a burden. Thanks for your help! Celfred.

anyone know why im getting this error TypeError: $(...).live is not a function $("li.PageListActiondelete a").live("click", function(el){ deleted all the js from the page but its still doing it

Can ProcessWire work without Javascript? I'm rebuilding the admin theme from the bottom up and I want to remove all (or as much as I can) of the jQuery UI and use my own. However I noticed that this breaks the homepage where all the templates are loaded. Can someone help me get this working without Javascript? Thanks.

Hi, I'm struggling with the syntax... multiple galleries, created as repeaters, need an ID to export to JS - to call a gallery script. Everything works so far except the repeater Id, which I don't know how to concatenate to form the #galleryId. This is my hopeless attempt: $repeaterId = $pages->get($repeaterPageID); $galleryId = gallery.$repeaterId; echo "<div id='$galleryId'>"; foreach ... ...