Where communities thrive


  • Join over 1.5M+ people
  • Join over 100K+ communities
  • Free without limits
  • Create your own community
People
Activity
    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:
    htmx.defineExtension('rails-method', {
        onEvent: function (name, evt) {
            if (name === "configRequest.htmx") {
                var methodOverride = evt.detail.headers['X-HTTP-Method-Override'];
                if (methodOverride) {
                    evt.detail.parameters['_method'] = methodOverride;
                }
            }
        }
    });
    except you don't want to add a parameter, you want to add a header
    something like:
    htmx.defineExtension('larvel-support', {
        onEvent: function (name, evt) {
            if (name === "configRequest.htmx") {
                  evt.detail.headers['X-Requested-With'] = "ajax";
            }
        }
    });
    Or whatever the value of the header is supposed to be
    you could then use the extension like this:
    <body hx-ext="larvel-support>
       ...
    </body>
    If that works you can contribute it back as an official extension for HTMX
    1cg
    @1cg
    along with any other larvel-friendly features that might help you guys out
    36864
    @36864
    Thanks, this works perfectly. I'm trying to find a different name for this, as it's not a laravel-specific thing, lots of javascript frameworks use the X-Requested-With header.
    36864
    @36864
    Submitted a PR for this, called it "ajax-header". Took me a while to figure out the testing mechanisms, I am not a javascript developer at all.
    1cg
    @1cg
    Me either. ;)
    36864
    @36864
    Next step is figuring out how to get triggers to work with select2 controls
    Specifically, loading data into the subtype dropdown when the primary type dropdown value changes. I've tried setting the trigger to the select2 events, the select element's change event, few other things, but it's as if the events are never fired.
    cscortes
    @cscortes
    There is an example called ValueSelect on the htmx webpage. Pretty easy stuff.
    Eugene Esca
    @scsmash3r
    @cscortes Nice explanation, thanks for video :) And for the rooster, lol xD
    36864
    @36864
    @cscortes My issue is in using select2 controls, everything works just fine with regular controls.
    oko-x
    @oko-x
    hi @chg20 on the script load there is pretty expensive traversal of full DOM which results in decreased Lighthouse scoring because of the longer main thread work, is it possible to separate this logic for projects not using extends and other features that might require initialization? standard listeners might work well when bound to document root so it wouldn't be necessary to find and bind them in the DOM
    cscortes
    @cscortes
    @scsmash3r np, hope it helps someone, but now I have a fear that I will get a nickname like - the roster programmer. :)
    1cg
    @1cg
    @oko-x yeah we should look the attributes in question up via a query. It's a little more complicated, but not too bad. I also see a pretty bad bug where I'll double execute script tags. Hope to have it cleaned up this week.
    1cg
    @1cg
    ok, script bug is fixed
    I don't want to change the init code @oko-x but I will :/
    oko-x
    @oko-x
    @chg20 will you create an Issue for that (or should I), so I can keep track :)
    1cg
    @1cg
    @oko-x please do create an issue for it. Is there a way I can test if it performs well enough?
    cscortes
    @cscortes

    @chg20 been thinking about the extension mechanism which a great idea. It seems to have some issues with the ajaxrequest call though.

    I have written some psuedo code to start the discussion. I hope to start a dialog

    // psuedo code approach 
    function revisedajax() {
    
        // figure out what the "make 80% happy case is"  
        // or the "just works out of the box" case
    
    
        var ks;  // kitchensick
    
        // implement the 80% here, for example this is the "normal" case now
    
            // NORMALLY, we change verb to either "GET", "POST"
            xhrverb = "GET" or "POST" depending on verb 
            // so add both to kitchensink
            ks.verb = verb;
            ks.xhrverb = xhrverb;
    
            // NORMALLY, we change the url if GET
            xhrurl = url + urlencodedparameters
            // so add the original url and xhrurl
            ks.url = url 
            ks.xhrurl = xhrurl 
    
            // NORMALLY, we add parameters to the body if POST
            ks.xhrbody = create body with parameters if POST-like
            ks.parameters = parameters 
    
            // NORMALLY, we set the mimetype to texthtml
            ks.xhrMimeType = text/html
    
            // NORMALLY, we set the header content type 
            // like urlencode 
            ks.xhrHeaders = set content type to ... 
    
        // give extension writer change to deviate from NORM
        // the writer will know that changing variables that 
        // have xhr prefix will change 
        xhrchangeup( ks )
    
        var xhr =new XMLHttpRequest();
    
        // set xhr events (non changeable)
    
        setheaders( xhr, ks.xhrHeaders);
        if (ks.xhrMimeType) xhr.overrideMimeType( ks.xhrMimeType );
        xhr.open( ks.xhrVerb, ks.xhrUrl, true);
        xhr.send( ks.xhrBody);
    }
    
    define extension xhrchangeup( "json-enc", ks ) {
    
        ks.xhrHeaders = change content type to ...
        ks.xhrMimeType = ... 
        ks.xhrbody = encode parameters 
    
        // use original url 
        ks.xhrurl = ks.url 
    
    }
    
    // maybe 
    
    define extension xhrchangeup( "actual-verb", ks ) {
    
        ks.xhrHeaders = change content type to ...
    
        // use the actual verb 
        ks.xhrverb = ks.verb 
    
    }