kongondo

Yeah, you are right. Good catch. This is why I suggested to strip the page bare - to rule out things one by one. Does this mean SelectizeAll module autoloads? Edit: I've checked. Yes, it autoloads.

I've just checked and actually the version I tested on is 3.0.190. So, there must be something else going on in your install, unless we have different 3.0.190s. Maybe send me a copy of your latest measurement module so I can test on my 3.0.190. I don't have live preview though.

What baffles me is that there is no error and no network activity. I expected at least one of these. Are you able to strip that page bare and leave only title and measurement fields then test?

That was a different machine from this one but I think it was 3.0.184. Hmm..

Jumplinks module? Not sure about its status though https://processwire.com/modules/process-jumplinks/

Code for the above demo JavaScript Here we need to tell htmx that ProcessWire expects Ajax calls to send "X-Requested-With" // InputfieldMeasurement.js const InputfieldMeasurement = { initHTMXXRequestedWithXMLHttpRequest: function () { console.log("initHTMXXRequestedWithXMLHttpRequest - configRequest") document.body.addEventListener("htmx:configRequest", (event) => { event.detail.headers["X-Requested-With"] = "XMLHttpRequest" }) }, listenToHTMXRequests: function () { // before send - Just an example to show you where to hook BEFORE SEND htmx request htmx.on("htmx:beforeSend", function (event) { console.log("InputfieldMeasurement - listenToHTMXRequests - event", event) }) }, } /** * DOM ready * */ document.addEventListener("DOMContentLoaded", function (event) { if (typeof htmx !== "undefined") { // CHECK THAT htmx is available console.log("HTMX!") // init htmx with X-Requested-With InputfieldMeasurement.initHTMXXRequestedWithXMLHttpRequest() // just for testing InputfieldMeasurement.listenToHTMXRequests() } else { console.log("NO HTMX!") } }) PHP We are in InputfieldMeasurement.module We load htmx in init() We listen to htmx calls in render() We pass this to a handler testHTMX() Insider render() we listen to change on InputfieldSelect. Notice we don't add a trigger. htmx knows the type of event that a Select outputs <?php namespace ProcessWire; // BELOW, SNIPPETS OF THE RELEVANT CODE public function init() { parent::init(); // wire()->config->scripts->append("https://unpkg.com/htmx.org@1.7.0"); // LOAD htmx // I just prefer this syntax :-) $this->wire('config')->scripts->append("https://unpkg.com/htmx.org@1.7.0"); } public function ___render() { $name = $this->attr('name'); $field = $this->field; $page = $this->page; $value = $this->attr('value'); if (!$value || !$value->quantity) { $value = new Measurement($field->quantity); //bd($value, 'value'); } ##################### HTMX AJAX LISTENER $input = $this->wire('input'); $ajax = $this->wire('config')->ajax; // bd($ajax, __METHOD__ . ': $ajax at line #' . __LINE__); // bd($input->get('field'), __METHOD__ . ': $input->get(field) at line #' . __LINE__); if ($ajax && $input->get('field') == $this->attr('name')) { bd($ajax, __METHOD__ . ': $ajax at line #' . __LINE__); bd($input->get('field'), __METHOD__ . ': $input->get(field) at line #' . __LINE__); bd($input->get('id'), __METHOD__ . ': $input->get(id) at line #' . __LINE__); $out = $this->testHTMX(); echo $out; die(); } else { // @debug bd($ajax, __METHOD__ . ': $ajax - NO AJAX AND/OR WRONG INPUTFIELD - at line #' . __LINE__); } // >>>> MORE CODE HERE ... // ADD HTMX LISTENER TO 'measurement input Select' // unit $f = $this->modules->get("InputfieldSelect"); $f->label = $this->_("Unit"); $f->attr('name', "{$name}_unit"); $f->attr('value', $value->get('unit')); //bd($value, 'value'); bd($field->units, __METHOD__ . ': $field->units at line #' . __LINE__); foreach ($field->units as $unit) { $shortLabel = (isset($units[$unit]) && isset($units[$unit]['shortLabel'])) ? $units[$unit]['shortLabel'] : null; $alias = (isset($units[$unit]) && isset($units[$unit]['alias'])) ? $units[$unit]['alias'] : $unit; if ($shortLabel) $shortLabel = "($shortLabel)"; $f->addOption($unit, "$alias $shortLabel"); } $f->notes = $units[$value->get('unit')]->notes; $f->columnWidth = $colWidth; // ======== #### add HTMX #### $adminEditURL = $this->wire('config')->urls->admin . "page/edit/"; $adminEdit = "{$adminEditURL}?id={$this->page->id}&field={$name}"; bd($adminEditURL, __METHOD__ . ': $adminEditURL at line #' . __LINE__); bd($adminEdit, __METHOD__ . ': $adminEdit at line #' . __LINE__); // ------ $f->attr([ 'hx-get' => $adminEdit, // send get to to InputfieldMeasurement 'hx-target' => '#InputfieldMeasurementTestHTMXTarget', // our element to target with swap 'hx-swap' => 'innerHTML' // we'll swap the innerHTML (this is the default but it has never worked for me if not specified) ]); $inputfields->add($f); // ========= ### FOR HTMX DEMO ONLY ### $f = $this->modules->get("InputfieldMarkup"); $f->label = "InputfieldMeasurement Test HTMX"; $f->attr('id', "InputfieldMeasurementTestHTMX"); // we will swap the innerHTML of the div#InputfieldMeasurementTextHTMXTarget $out = "<div id='InputfieldMeasurementTestHTMXTarget'><h3>HTMX TARGET (will change when Unit changes)</h3></div>"; // $f->collapsed = Inputfield::collapsedYes; $f->value = $out; $f->columnWidth = 100; $inputfields->add($f); // >>>> MORE CODE ..... return $inputfields->render(); } private function testHTMX() { $dateAndTime = date("Y-F-d H:i:s"); $out = "<h3>We got that HTMX Call at {$dateAndTime}!</h3>"; return $out; }

@MarkE It is working for me, in your module. I haven't tested in repeaters. I'll add the relevant code in a later post. Meanwhile, attached, the demo of it working. htmx_inputfield_measurement_22-03-18_16-26-08.mp4

Yes. I am quite aware of this ?. It is your previous statement below that confused me: It seemed to suggest that your code was non-blocking. Just curious about this. Was your goal to give the current editor feedback or all editors who use the system? I mean, did you want the progress to show on different machines simultaneously on any ProcessWire backend page or just the current editor? I have a feeling this won't make sense so will just add. If I am Editor A and I am currently making edits. Across me sits Editor B. Editor B is not making edits. Maybe she is looking at the page tree. If Editor A makes changes and SSE kicks in, Editor B will see the progress on her machine. Was this your use case?

Not foolproof https://stackoverflow.com/questions/56301138/how-to-check-whether-server-supports-http-2-in-javascript-on-browser

Thanks. I have seen that article before (as well as similar posts in SO). It is very helpful. I didn't try the suggested fix since I suspected it might interfere with ProcessWire $session. I wanted to ask in the forums but forgot. Anyone knows if this would happen? I'll have a go and maybe also check if $session is affected.

Here's the demo video showing the system lock. Let me know if you cannot watch it. Note, the system will lock even if the count is 10.

Just tested. And I take back what I said. Your module also locks system resources. Admin and frontend don't load while the countdown is on. Locking happens on both front and backend pages, pages tree, fields, templates, etc. I have tested with both the 10 countdown and a 50 countdown. I'll see if I can get a video demo. So, back to my questions (not just directed at @bernhard) but the community. Are we able to to have SSE work without a module? Some people might just want this to work in ready.php without having to install a module. Are we able to have SSE that is totally event driven? I.e., a page is saved and the frontend gets notified. Are we able to have SSE that doesn't lock system resources? Maybe we should start a new topic?

I am sure your module works just fine but I'll test it anyway ?...doing it right now. Having said that, I am not entirely convinced that your module represents a real world scenario since we have to click on a button to init the SSE.

Not the module itself but the code. If you put that in ready.php, i.e., the hook, serve() and sse() everything hangs. For me, this is also a learning opportunity. It could be that sse is better handled in a module, maybe an autoload one. That it might not work with ready.php. This is one of the things I am trying to establish as well.

Interesting that you mention this. @bernhard, I have been testing in ready.php and that makes everything (all pages backend and frontend on the site) hang even with the break and $i++ present.

This might work (am not sure) but did you want to be more specific by using an ID? You probably know this already but wanted to point out that you can pass all those attrs in one go like this: <?php namespace ProcessWire; $field->attr([ 'hx-post' => $ajaxURL, 'hx-swap' => 'beforebegin', // etc... ]);

This will never work. It should be a URL not a path ?. Either way, ProcessWire will block access to test.php. You have various options for this in the backend, e.g. point it to ProcessModule or a virtual URL that you handle using url hooks or to an Inputfield as shown below: <?php namespace ProcessWire; $adminEditURL = $this->wire('config')->urls->admin . "page/edit/"; $adminEdit = "{$adminEditURL}?id={$this->page->id}&field={$name}"; $out = "<a href='#' hx-get='{$adminEdit}'>"; Which will produce something like this: hx-get="/processwire/page/edit/?id=1234&amp;field=name_of_inputfield"

By this you mean there are no htmx JS errors in the console but htmx does not send an ajax request? Maybe show as an example + the types of inputfields (just in case).

OK. I'll delete the other thread then, unless you want me to merge it here.

Thanks for the info @bernhard. The remaining confusing bit for me is this: Your comment suggests that the break was only for testing ?. What are you using in production? Thanks. I feel like we are still missing something with respect to SSE or it is just the way SSE works. I'd like a situation where, for example, an event would only be pushed to the client after a saveReady fires in ProcessWire. Currently, it looks like SSE is just a glorified long polling, in some respects .

@opalepatrick. What's the difference between this thread and the one you recently marked as solved?

Same here. The while loop is locking up everything. @bernhard, could you please provide more info regarding the endpoint of your url? I.e. ☝️ That url is pointing to some url in ProcessWire. Is it a page URL or a virtual URL that you handle using URL Hooks? Either way could you please show us how you handle requests to that URL in ProcessWire/PHP? I realise you have the thread below as well, but it doesn't show us how you handle 'pings' to your backend either. I am guessing this is where you have your while loop but it would be good to see the whole picture. Thanks.

Great explanation! Thanks.

That's how I got wind of it but on reddit: https://www.reddit.com/r/htmx/ ? 6K+ more views since I posted it here. Some of those are mine ?. I've watched it 5 times already and counting...?

Thanks for sharing. Could you please show us your JavaScript in this case then? For me, it seems the JavaScript is the main issue as it keeps 'polling' as you also noticed. Thanks.