by

Where communities thrive


  • Join over 1.5M+ people
  • Join over 100K+ communities
  • Free without limits
  • Create your own community
People
Activity
    Marcus
    @marcus-at-localhost

    I have a question regarding client-side templates.

    I want to request json data from a server I can't control.

    1. Problem: request gets rejected because of X-HX-Current-URL header (Some CORS error) - I can work around that with a proxy - I tried to remove the header in requestCOnfig, but had no luck
    2. the JSON just gets dumped into the target. Not sure if the mustache template works and how to check that
    3. Is there a way to transform the JSON before it's being used ? (it looks like mustache expects something like this:
    {
      gists: [{},{}]
    }

    and the api just returns

    [
      {},
      {}
    ]

    Could someone please take a look into it if I setup the htmx part right? https://codepen.io/localhorst/pen/OJyepKG

    Thank you!

    Or would you say that is the wrong approach and it's better to do everything on the server? (In this case a standalone codepen example wouldn't work, right?

    Marcus
    @marcus-at-localhost
    What I try to recreate is this https://codepen.io/localhorst/pen/vYNVxyX
    cscortes
    @cscortes
    @marcus-at-localhost you might want to take a look at the json-enc extension. It is in src/extension which manipulates a header and converts the parameters to json.
    Marcus
    @marcus-at-localhost
    @cscortes that seems to only stringify params for posting data.
    cscortes
    @cscortes
    changes a header too, thought you wanted to remove a header?
    At the point of the extension, your ajax message is being prepared, but not sent. At this point it would be advisable to manipulate your json parameters and change your headers. or maybe I don't understand a part of your question.
    Keyur Shah
    @keyurshah
    another 600 stars! glad this project is getting mainstream recognition
    chg20
    @chg20
    @keyurshah yeah crazy!
    @marcus-at-localhost it sounds like you want the client side templates extension to take the returned Json and convert it to html. https://htmx.org/extensions/client-side-templates/
    Marcus
    @marcus-at-localhost
    @chg20 I did include the extension. here is my stripped down setting from the codepen
    <div hx-ext="client-side-template">
        <button
          type="button"
          hx-get="https://cors-anywhere.herokuapp.com/https://api.github.com/users/marcus-at-localhost/gists" 
          mustache-template="gistlist"
          hx-target="#list"
        >
         Reload
        </button>
    
      <ul id="list">
        <script id="gistlist" type="x-tmpl-mustache">
             {{#gists}}
              <li>
                <a href="{{html_url}}">{{ description" }}</a><br>
                <small>{{description}}</small>
              </li>
            {{/gists}}
        </script>
      </ul>
    </div>
    Tareso LLC
    @tareso_gitlab
    Hi all, noob question here. I'm experimenting with htmx and am wondering if I can use it on a static site? In other words can I have two html files in a folder where a link in one opens a portion of the other within it?
    Marcus
    @marcus-at-localhost
    @tareso_gitlab yep, as long as the request is made via http.
    chg20
    @chg20
    @niallobrien i have to admit Iā€™m lost on this idea. Iā€™m just a simple caveman: http up/html down. šŸ˜€
    1000 stars guys
    Thanks to all the early adopters here
    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/
    chg20
    @chg20
    @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

    chg20
    @chg20
    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?

    chg20
    @chg20
    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?
    chg20
    @chg20
    :/
    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]; 
        });
    });
    chg20
    @chg20
    šŸ‘
    cscortes
    @cscortes
    @chg20 I think the pervious code would be a nice little extension. Maybe remove-all-headers extension???
    chg20
    @chg20
    :)
    I have something that may be of interest to you
    <body script="on configRequest.htmx put [] into detail.headers">
    ...
    </body>
    chg20
    @chg20
    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.