intercooler-js/Lobby

intercooler & htmx discussion

Edouard

@inouire_twitter

the traction and visibility htmx got during the last few days has been awesome, and well deserved. Congrats :clap:

Niall O'Brien

@niallobrien

@chg20 Ha, apologies. Just wondering, if you had two different parts of your page displaying the same data, and I do an update to part 2, I'm then wondering how can I force part 1 to update to show the new up to date data like part 2?

Marcus

@marcus-at-localhost

does someone has a working example of the client side templates extension? https://htmx.org/extensions/client-side-templates/

1cg

@1cg

@marcus-at-localhost there was a guy on github who was playing with it: bigskysoftware/htmx#51

@niallobrien you'd need to either do an out of band update or maybe look at the path-deps extension: https://htmx.org/extensions/path-deps/

@marcus-at-localhost if you are having trouble you can post a code snippet here and I'll try to help

Marcus

@marcus-at-localhost

@chg20 I figured it out and I got my example working (https://codepen.io/localhorst/pen/OJyepKG), but I had to modify the extension, to modify my json:

htmx.defineExtension('client-side-templates', {
    transformResponse : function(text, xhr, elt) {
      var nunjucksTemplate = htmx.closest(elt, "[nunjucks-template]");
        if (nunjucksTemplate) {
            var data = {}
            data.gists = JSON.parse(text);
            var templateName = nunjucksTemplate.getAttribute('nunjucks-template');
            var template = htmx.find('#' + templateName);
            //console.log(templateName,data);
            return nunjucks.renderString(template.innerHTML, data);
        }
        return text;
    }
});

What is the right event to modify the json before I use it in the client-side-templates extension? I thought it's afterRequest.htmx but the changes on evt.detail.xhr didn't do anything

1cg

@1cg

he @marcus-at-localhost , the best cut point is probably where the template plugin is doing the manipulation. Maybe just copy the plugin and just the nunjucks part (since that's what you are using) and do the json transformation there?

Marcus

@marcus-at-localhost

Yeah, I can live with that, that sounds like the best place (I just thought I overlooked something) - great!

@chg20 Last thing I was stumbling upon: When I tried to access the gist github api in my example directly, the call got rejected with the message that their CORS rules don't allow X-HX-Current-url Header, so I tried to reset them:

document.body.addEventListener('configRequest.htmx', function(evt) {
  // try to remove x-hx-* headers because gist api compalins about CORS
  evt.detail.headers = [];
});

but the current-url header is sent anyway.
Would it be possible to have full control over that?

1cg

@1cg

yeah, you should have full control over headers

that's a bug

Marcus

@marcus-at-localhost

do you want me to file it at github?

1cg

@1cg

one sec

so you are changing the reference w/ the assignment

OK, if you want to get it working now:

Object.keys(evt.details.headers).forEach(function(key) { delete object[key]; });

I'm on the fence if this is a bug or a feature

Marcus

@marcus-at-localhost

like this?

document.body.addEventListener('configRequest.htmx', function(evt) {
  Object.keys(evt.details.headers).forEach(function(key) { delete object[key]; });
});

Marcus

@marcus-at-localhost

ok got it:

document.body.addEventListener('configRequest.htmx', function(evt) {
  // try to remove x-hx-* headers because gist api complains about CORS
    Object.keys(evt.detail.headers).forEach(function(key) { 
      delete evt.detail.headers[key]; 
    });
});

1cg

@1cg

👍

cscortes

@cscortes

@chg20 I think the pervious code would be a nice little extension. Maybe remove-all-headers extension???

1cg

@1cg

I have something that may be of interest to you

<body script="on configRequest.htmx put [] into detail.headers">
...
</body>

1cg

@1cg

I am working on a scripting language to go along with htmx: https://hyperscript.org/

i want something that takes the place of all the on-* attributes that intercooler had and that makes it easy to catch events and do some stuff directly in HTML, rather than having to drop out to javascript

ic-action too

hyperscript is going to replace all that with a small DSL for event handling and DOM manipulation

i don't know if any of you guys ever programmed in hypertalk, but that was one of my first experiences programming and i had a lot of fun with it

and this will take a huge amount of pressure off me adding features to htmx ;p

cscortes

@cscortes

@chg20 I learned PASCAL in college, let me know where I can help.

cscortes

@cscortes

@chg20 wow, wondering for days what was wrong with my code on my new sse-body extension. Found out it works in with mock objects, but not real ones :0! So I assume that json-enc doesnt work - or only works with mock objects. When I tried to fix, found out that setHeaders... does not overwrite, but it really appends! WHY!!! ok, lets calm down. So the real fix is to move some code around in htmx, change parameters for encodeParameters -- at least thats what I did to get it to work. Just wondering, is this the way to go??

1cg

@1cg

I’ll need to see a pull request

I think the plugin point is right but the mock xhr is giving bad results

cscortes

@cscortes

@chg20 alright, did a pull request. and tested my code with real json -- working with my changes -- but a little drastic on your design. let me know what you think.

Dave Berton

@moseymosey

if hx-get returns content containing a <script>, it does not seem to get executed. Is there some other mechanism to make that happen?

1cg

@1cg

@cscortes I’m traveling this week will review when I’m back

1cg

@1cg

@moseymosey I believe I fixed that in the dev branch

36864

@36864

Hi, I'm trying out htmx for a new laravel-based project. Immediately I've ran into an issue because htmx ajax requests do not include an X-Requested-With header. Is there an easy way to add custom headers to each request?

For context, laravel has a global helper to determine whether a request has been made through ajax, which I use to determine if I should return partial html or a full page.

It's easy enough to also check the X-HX-Requestheader, but I'd like to avoid having to do that on every single request

1cg

@1cg

@36864 Yes you should be able to do so pretty easily.

one sec, let me get an example together for you

would you be willing to contribute a larvel extension to the project when we get it working?

1cg

@1cg

So you want something akin to the rails extension: https://htmx.org/extensions/rails-method/

source is here:

https://unpkg.com/htmx.org@0.0.4/dist/ext/rails-method.js

Where communities thrive

People

Repo info

Activity