MarkE

Ooh that looks useful. I’m away from my Desktop at the moment, but that looks like it might be handy to make my FieldtypeMeasurement module (even ?) slicker. I.e no need to save the first config field before choosing the dependent one.

Thanks @kongondo. Just enhanced and fixed a few bugs in the new 'in field' conversion feature in v0.0.10. I tried to use hyperscript to do this, given its purported 'compatibility' with htmx, but I came across the same problem with lazy-loaded fields as we had with htmx - i.e. it didn't trigger when used in a field inside a repeater matrix item. However, there didn't seem to be a similar ready fix for this, so I resorted to good old fashioned jQuery which seems to work OK ?

New version 0.0.10 at https://github.com/MetaTunes/FieldtypeMeasurement Bug fixes and improved operation for the 'in-field' conversion feature. EDIT: Version 0.0.10 is now published to the modules library at https://processwire.com/modules/fieldtype-measurement/

New version 0.0.9 at https://github.com/MetaTunes/FieldtypeMeasurement This has lots of bug fixes, plus a much neater way of doing conversions 'in field' : You can choose to enable the magnitude value to be automatically updated when you change the unit selection in a field - the options are to 'Always' convert, to 'Never' convert or to 'Ask' whether or not to convert each time the unit selection is changed (note that, if conversion is chosen and the unit is changed to 'no selection' then the magnitude value will be blanked). Many thanks to @kongondoin getting this working via HTMX (and also to @Robin Sfor modifying SelectizeAll). This version has been tested quite extensively, but only in one environment. Different PW versions, modules and your own code may affect it differently. It is therefore not recommended for use in production sites unless you have fully tested it in context first.

All working fine now. Many thanks for your help @kongondo (and @Robin S). New version 0.0.9 of FieldtypeMeasurement is now on GitHub https://github.com/MetaTunes/FieldtypeMeasurement Do you think this is worth adding to the modules library?

I think this works @kongondo $(document).on('reloaded', '.InputfieldRepeater', function (event) { htmx.process(this); }) Now I have the (non-trivial) task of working out how to target the right repeater item and swap in the converted measurement ?

That looks like the case. How do you suggest re-triggering the hx- attributes?

Correct Ta. I'll look at it again this evening and post more info then if I can't fix it.

I tested htmx on a measurement field in a repeater and it worked OK. I then changed the repeater to a repeater matrix and it failed. So it looks like there is some js in RepeaterMatrix that is hijacking the event. Unfortunately the app which is acting as a test bed for the Measurement module relies heavily on repeater matrix fields ?

Hi @Robin S - I have run into a problem with this module as it seems to intefere with htmx (presumably by taking the change event hostage). See

I can do, but I don't think that is the issue as I installed the latest version of the module on my 3.0.184 site and htmx worked OK. So it must be another module or something else in my site that is causing the problem. As I mentioned earlier, htmx is working OK in the front-end. Plus I tested without all the hooks in ready.php (i.e. site-specific hooks) and that didn't fix anything. I also tried it with auto-save uninstalled without any luck. Aha - I think I've found it (at least partly). I disabled the SelectizeAll module by @Robin S. Now the change trigger works, although not inside a repeater matrix item (it did work inside a repeater [not repeater matrix] item on the 3.0.184 site, so I will try a dummy repeater on this site too). I really like SelectizeAll, so it would be great to get it working without interfering with htmx. EDIT: I have posted an item over on the SelectizeAll support thread.

I created a bare page with just title and measurement fields and the effect was exactly the same (except in this case, no GETs for data:image/svg+xml) - i.e. working with 'mouseover' and no errors or network activity with 'change'

Me too! Slightly curiously, when I tried it this morning, there was network activity, but just a whole load of GETs for data:image/svg+xml from pw.min.css - which appears to be the chevrons in the dropdown box. But no ajax activity and no errors. The console shows that HTMX is loaded OK. Mouseover (outside repeater) works. I disabled all hooks, but still no luck!

Could be something to do with auto save / live preview, but I haven't got auto save turned on for the page in question. EDIT .. but disabling the auto-save module does not fix it

Hmm. That's really odd. I implemented your code as described @kongondo, but the effect was as before. With hx-trigger="mouseover", all your tracy and console logging displays as expected. But with no hx-trigger or hx-trigger="change" there is no network activity and nothing is logged. Obviously there is something different between our setups. I am on a later version of the Measurement module (which I doubt is the reason) and on PW3.0.190. I therefore tried it in a site on PW3.0.184 and the exact same Measurement module and the change trigger works (although I haven't tested in a repeater yet). So, either it is something in 3.0.190 or something else in the setup of the site I am using it on. Which version of PW are you using? EDIT: It works inside a repeater on PW3.0.184 (haven't tried a repeater matrix), although only for the first such repeater item, which is not a surprise as there is a multiple element id issue with the demo code in a repeater (it fires on all repeater items, just doesn't update the demo target).

Thanks @kongondo. That's enormously helpful. I'll go through it in detail in my usual late-night coding session. My idea is to replace the present, rather clunky, method of doing conversion (checking a box then saving) with a prompt when the user changes units saying "Do you want to convert the measurement" (but which can be turned off in the config). I could, of course, have done this with straight Ajax, but was keen to try htmx as it looks like a really neat approach. BTW the current version of the module on Github still has some bugs. I have a much-debugged version that I have been using extensively and am really pleased with, but planned to incorporate this change before releasing it.

Moving on.. I managed to get htmx loading. I can now get @kongondo's simple <a> example working (modified to be a <button> as per my previous post). But I can't get InputfieldSelect fields to fire with hx-trigger="change" although they will fire with hx-trigger="mouseover" (or 'focus', 'mouseout' etc., but not 'change' or 'click'). Of course, 'change' is what I want. Nothing works inside a repeater.

Thanks for your helpful suggestions @kongondo. However, my problem is that the hx-... attributes do not seem to be recognised at all - whether or not I have constructed them correctly. I used your example: modified as follows: $adminEditURL = $this->wire('config')->urls->admin . "page/edit/"; $adminEdit = "{$adminEditURL}?id={$this->page->id}&field={$name}"; $button = "<a href='#' hx-get='{$adminEdit}' hx-trigger='click' hx-swap='outerHTML' hx-confirm='OK'>Click Me!</a>"; but still nothing happens (except that the href takes the browser to the top of the page) - the chrome dev tools show all the attributes present but no network activity. Your comment is spot on. If I do it in the front end, then the network monitor shows a 403 error which is what you would expect. However, in the back-end there is no network activity and therefore no error. At this stage, I am just trying to get htmx to fire - once I do then your suggestions will be very useful ? I short, the problem seems to be that the htmx script is not active, so I am wondering if it is something to do with the sequence in which scripts are being loaded. As an example, the complete set of loaded scripts in the <head> per the html source is (excluding pw config) <script type="text/javascript" src="/wire/modules/Jquery/JqueryCore/jquery.cookie.js?v=1638562531"></script> <script type="text/javascript" src="/wire/modules/Jquery/JqueryWireTabs/JqueryWireTabs.js?v=1638562531"></script> <script type="text/javascript" src="/wire/modules/Jquery/JqueryUI/JqueryUI.js?v=1638562531"></script> <script type="text/javascript" src="/wire/modules/Jquery/JqueryUI/panel.js?v=1638562531"></script> <script type="text/javascript" src="/wire/modules/Jquery/JqueryUI/selectize/js/standalone/selectize.js"></script> <script type="text/javascript" src="/site/modules/SelectizeAll/SelectizeCustomChange.js?v=0.1.1"></script> <script type="text/javascript" src="/site/modules/SelectizeAll/SelectizeAll.js?v=0.1.1"></script> <script type="text/javascript" src="/site/templates/scripts/admin.js?v=2"></script> <script type="text/javascript" src="/site/modules/PageAutosave/PageAutosave.js?v=6"></script> <script type="text/javascript" src="/wire/modules/Process/ProcessPageEdit/ProcessPageEdit.js?v=111-1638562531"></script> <script type="text/javascript" src="/wire/modules/Jquery/JqueryUI/modal.js?v=1641685970"></script> <script type="text/javascript" src="https://unpkg.com/htmx.org@1.7.0"></script> <script type="text/javascript" src="/wire/modules/Jquery/JqueryTableSorter/JqueryTableSorter.js?v=1638562531"></script> <script type="text/javascript" src="/wire/modules/Markup/MarkupAdminDataTable/MarkupAdminDataTable.js?v=1638562531"></script> <script type="text/javascript" src="/wire/modules/Inputfield/InputfieldDatetime/InputfieldDatetime.js?v=107-1638562531"></script> <script type="text/javascript" src="/wire/modules/Jquery/JqueryUI/vex/scripts/vex.combined.min.js"></script> <script type="text/javascript" src="/wire/modules/Fieldtype/FieldtypeRepeater/InputfieldRepeater.js?v=111-1638562531"></script> <script type="text/javascript" src="/site/modules/FieldtypeRepeaterMatrix/InputfieldRepeaterMatrix.js?v=8-1640343319"></script> <script type="text/javascript" src="/wire/modules/Inputfield/InputfieldPageTitle/InputfieldPageTitle.js?v=102-1638562531"></script> <script type="text/javascript" src="/wire/modules/Inputfield/InputfieldPage/InputfieldPage.js?v=107-1638562531"></script> <script type="text/javascript" src="/wire/modules/Inputfield/InputfieldPageName/InputfieldPageName.js?v=106-1638562531"></script> <script type="text/javascript" src="/wire/modules/Process/ProcessPageList/ProcessPageList.js?v=123-1638562531"></script> <script type="text/javascript" src="/wire/modules/Jquery/JqueryCore/jquery.longclick.min.js?v=1638562531"></script> <script type="text/javascript" src="/wire/modules/Inputfield/InputfieldPageListSelect/InputfieldPageListSelect.js?v=101-1638562531"></script> <script type="text/javascript" src="/wire/modules/Inputfield/InputfieldCheckboxes/InputfieldCheckboxes.js?v=108-1638562531"></script> <script type="text/javascript" src="/wire/modules/Inputfield/InputfieldAsmSelect/asmselect/jquery.asmselect.js?v=202"></script> <script type="text/javascript" src="/wire/modules/Inputfield/InputfieldAsmSelect/InputfieldAsmSelect.js?v=202-1638562531"></script> <script type="text/javascript" src="/wire/modules/Inputfield/InputfieldSubmit/dropdown.js"></script> <script type="text/javascript" src="/wire/templates-admin/scripts/inputfields.js?v=33g"></script> <script type="text/javascript" src="/wire/templates-admin/scripts/main.js?v=33g"></script> <script type="text/javascript" src="/wire/modules/AdminTheme/AdminThemeUikit/uikit/dist/js/uikit.min.js?v=33g"></script> <script type="text/javascript" src="/wire/modules/AdminTheme/AdminThemeUikit/uikit/dist/js/uikit-icons.min.js?v=33g"></script> <script type="text/javascript" src="/wire/modules/AdminTheme/AdminThemeUikit/scripts/main.js?v=33g"></script><script>vex.defaultOptions.className='vex-theme-default';vex.dialog.buttons.YES.text='Ok';vex.dialog.buttons.NO.text='Cancel';</script> So we can see that htmx.org is loaded (and it is shown as a source in the dev tools also). Any observations or suggestions for further debugging actions? EDIT: I tested whether the htmx global variable is available, to which the answer is 'yes' in the front end, but 'no' in the back-end, underlining that it seems to be a problem with loading....

Thanks @kongondo. Exactly, yes. Also I can see nothing happening in the 'Network' monitor in the dev tools. This, in my InputfieldMeasurement::render() $f = $this->modules->get("InputfieldSelect"); $f->label = $this->_("Unit"); $f->attr('name', "{$name}_unit"); $f->attr('value', $value->get('unit')); ...... ...... $moduleName = basename(__DIR__); $f->attr('hx-get', $this->config->paths->$moduleName . 'test.php'); $f->attr('hx-target', ".InputfieldMeasurement_magnitude" ); $f->attr('hx-swap', 'outerHtml'); $f->attr('hx-trigger', 'change'); $f->attr('hx-confirm', 'Do you want to convert the magnitude?'); $inputfields->add($f); Nothing gets triggered, but the dev tools show that the attributes are there. The htmx script is added in init() as per my OP. I can see in the dev tools that it is loaded (and the html source shows the relevant <script> tag). I used the exact same script in the front end and it works fine.

... I hope! I can get htmx working fine in the front end but I would like to use it in the back-end also. In particular, I want to incorporate it into my FieldtypeMeasurement module. I am loading it using wire()->config->scripts->append("https://unpkg.com/htmx.org@1.7.0"); in the init() and the Chrome dev tools show that it is loaded OK. I have then added the 'hx-...' attributes in the inputfields and again the dev tools show that they are present. But no 'hx-...' triggers work. I'm probably just being a bit dim, but does anyone have any suggestions?

Thanks @Robin S. That seems to do the trick - I can do away with the extra save().

I seem to have encountered another problem with repeaters. I am creating repeater matrix items in the API. Different types of such items have different fields which are linked using ConnectPageFields to fields other templates. On creating some matrix types, I am encountering the error "Call to a member function find() on null" for line 132 of ConnectPageFields (v0.3.3), which is $added = $new_value->find("id!=$old_value"); This error seems to be triggered by $new_value being null. $new_value is set on line 127 as $new_value = $page->getUnformatted($this_fname); With a bit of debugging, it is clear that the module is trying to establish a link for a $this_fname which does not exist for the particular matrix type being added in the API. I think I have resolved this by saving the new matrix item before setting its type (so that all fields are present) and then saving again after setting its type. However, I wonder if it would be better to fix it by a module update. I think that changing line 130 to if($this_is_multi && $new_value && $old_value) { has the desired effect, but have not completely tested it. Thoughts?

v0.1.4 is now on GitHub. As well as bug fixes, this includes a 'hook suppression' option (not yet documented in the help) to enable superuser use without the module operating fully (for performance reasons) - i.e. if you need superuser but are not using the module.

@formulate: per @ryan (see https://github.com/processwire/processwire-issues/issues/1502), "It's okay to change it to a double directly in the DB schema if you want to. I have done this on the rare occasion when it was helpful and it works just fine." i.e. you can copy and hack the float fieldtype and make it type 'double' - if decimal doesn't fit your need . I'm still not sure why 'double' isn't provided out of the box.

Thanks @Robin S. I guess I mis-read 'allows selectize' - meaning 'stops selectize messing with'. Anyway, I can confirm that the module works nicely with my hook. (Maybe I also thought, given what a clever person you are, that you had bundled server-side select options, via AJAX, but clearly I was over-reading it).