Where communities thrive


  • Join over 1.5M+ people
  • Join over 100K+ communities
  • Free without limits
  • Create your own community
People
Activity
    Bo
    @BoPeng
    However, the problem is that when I am entering the code and the form is replaced in the middle, the input box will lose focus if the entire form is replaced. Updating only part of the form (leave the input out) is also awkward because the error message belongs to the input formgroup and the submit button does not.
    chg20
    @chg20
    Hello @BoPeng You might handle that with the following approach: target the entire area as if you are doing a form submission. On the submission, check the value of the input in question and, if it is bad, fire an event via X-IC-Trigger, and use that to display the error message, while leaving the body blank. This will tell intercooler "do nothing" so no DOM update will be made. If the value is good, go ahead with the submission and trigger an event to clear the error message.
    This brings to mind a feature that would be useful here: an X-IC-Target response header, so you could conditionally select your target depending on the status of the input.
    I will investigate that possibility.
    Bo
    @BoPeng
    Thanks @chg20 I am trying to figure out how to use X-IC-Trigger, which is not a piece of JS code such $("#submit").prop("disabled", false);, but should be the "event" handler, of which target? So if my ic-target was the error message, then I will need to pass the message with X-IC-Trigger, so some event needs to be set up beforehand?
    I am digging into the doc for an example.
    Bo
    @BoPeng

    This brings to mind a feature that would be useful here: an X-IC-Target response header, so you could conditionally select your target depending on the status of the input.

    Yes, I know you are saying now. Yes, it would be good to be able to target different targets, even multiple targets. But right now something like $("#message").innerHTML="message");$("#submit").enable() passed to the client would be good.

    Bo
    @BoPeng
    Actually, this could be useful for another case that I am working right now. I have a button in a checkout page that removes the items through ic-delete-from and X-IC-Remove response, then I will need to update the order total, which could be achieved from X-IC-Trigger. Basically, it would be really helpfrul for intercooler.js to allow two actions on two different targets.
    chg20
    @chg20
    On the remove button, I recommend a full refresh of the div enclosing the entire cart, since there isn't a focus issue to worry about.
    Another thought: for the input above could you split the verification of the input and the submission up by introducing a submit button?
    That would simplify things quite a bit: the input could just target a status div, and then the submit button could submit the form.
    Bo
    @BoPeng
    Yes, I am working towards these solutions. I am converting all hand-written JS code in my Django project to intercooler.js, while 90% of the transition was painless and with added benefits (e.g. transition etc), the other 10% was a bit challenging, mostly because they involve more than 1 targets.
    chg20
    @chg20
    Yep, sounds right. I typically will try to simplify by splitting behaviors up a bit in cases like that and going with the grain of intercooler. For example, I tend to use multi-step wizards rather than bootstrap popups now, because it fits better with the intercooler (and, by extension, general web) model.
    Bo
    @BoPeng
    Agreed on the popup thing. I had trouble with bootstrap modal as well (https://github.com/intercoolerjs/intercooler-js/issues/235#issuecomment-601667660) because I could load the modal with ic-get-from but could not properly show and hide them because the JS part of the modal interferes with intercooler.js.
    etrokal
    @etrokal

    Hello all. I started learning about Intercooler last week. I have a few doubts that I didn't find an answer to elsewhere. I'm trying to convert a pure HTML datatable to Intercooler and even though it appears to be working, I'm experiencing an odd behavior. Every time a click on the table header, which contains link to order the data by the column names, the URL of the page gets bigger.

    The view code is big, so I'll try to show only the relevant parts. This is my header code:

    <tr>
        @foreach ($header as $key => $value)
        <td>
            @if($params['orderBy'] === $key)
            @php
            $url = request()->fullUrlWithQuery(['orderAsc' => (int) !$params['orderAsc']]);
            @endphp
            <a href="{{$url}}" ic-target="div.datatable" ic-select-from-response="div.datatable">
                {{$value}}
                @if($params['orderAsc'])
                <i class="fas fa-angle-up"></i>
                @else
                <i class="fas fa-angle-down"></i>
                @endif
            </a>
            @else
            @php
            $url = request()->fullUrlWithQuery(['orderBy' => $key, 'orderAsc' => 1]);
            @endphp
            <a href="{{$url}}" ic-target="div.datatable" ic-select-from-response="div.datatable">{{$value}}</a>
            @endif
        </td>
        @endforeach
    
        @if($addActionColumn)
        <td>{{$actionColumnCaption ?? ''}}</td>
        @endif
    </tr>

    It is a Laravel component. In my main component I have this tag:

    <div ic-global-include="#limit,#filter" class="datatable" ic-enhance="true">
    ...

    And this is my request URL after a few clicks on the links from my table header.

    chg20
    @chg20
    Hey @etrokal it looks like the fullURLWithQuery() function is piling on more and more intercooler-related parameters. Is there a method in PHP to pick specific parameters you want to include in the query string, rather than taking all of them? If so, I think that would solve your problem.
    etrokal
    @etrokal
    @chg20 Thank you for your answer. I actually solved that by creating a function to generate the url for me. I have another question now: How do I cleanup attached events and objects from the elements being swapped out of the page? Let's say I have a inputmask class or some custom event done in pure javascript. When the DOM element is removed to be replaced by the content received from the server, if it has attached events it will remain in memory. Which could lead to a leak. I understand that Intercooler.ready(function(elt)) passes the new element being received, but how do I access the old one for cleanup?
    chg20
    @chg20
    @etrokal you can listen for the "beforeSwap.ic" event on elements and use that to clean up anything you need in the DOM
    etrokal
    @etrokal
    @chg20 Thanks again. Just as a heads up, this event is not on the reference page. I'll make some tests and maybe submit a pull request on the reference, if that's ok?
    chg20
    @chg20
    Yeah, sorry about that!
    Alexander Solovyov
    @piranha
    Hey there! Here is my story: I got fed up with startup of our React app and weirdly enough discovered intercooler few weeks ago for a first time. I did some experiments and it seems that I’ll be able to save (for transition) our SSR for react, and drop react on a client (page by page) to switch to intercooler. :) First version seems okayish, but I understood few hours ago that we have some nice analytics and I don’t really want to lose it. So what would be the best approach to say call some js function on a click or when an element is seen? Ideally I want it to gather some context up the dom tree and don’t want to write actual JS. :) is there something ready for me to use or maybe it’s going to be easier to just extend intercooler?
    It’s a bit too late here, so I’m heading to sleep, but I’ll be back tomorrow! :)
    chg20
    @chg20
    Hello @piranha there isn't anything in intercooler really specific to that functionality. If it were me I would add an event handler on the body to collect those statistics.
    sometimes a bit of javascript is OK :)
    Alexander Solovyov
    @piranha
    Yeah I’m thinking that I’ll write an intercooler-like thingie just for my analytics and that’s it. :) what we’re doing seems to be a little bit on a custom side, so yeah.
    Alexander Solovyov
    @piranha
    I'm marking up my page for intercooler right now and there is a weird thing going on: on one of my "links" (the one with ic-get-from/ic-target) intercooler goes to server twice
    So one link works okay (single request to server) and another is misbehaving
    What's the best way to debug this?
    Alexander Solovyov
    @piranha
    also, is it possible to ic-switch-class without going to a server? :)
    Alexander Solovyov
    @piranha
    last question is irrelevant now, I did tabs with just css, haha
    Alexander Solovyov
    @piranha
    do I understand correctly that ic-trigger-on=scrolled-into-view will be triggered even for hidden (display: none) elements?
    Alexander Solovyov
    @piranha

    @chg20 I have a wishlist functionality, which I don't really want to fetch on a server (for caching purposes, current frontend results can be cached for all users), so my idea is to fetch when it's displayed (on hover) by issuing GET request and then on click send POST which toggles state of wishlist.
    But it doesn't seem like I can do that, because with code like this:

    [:div {:title         title
         :ic-src        (str vars/api-url "/wishlist/items")
         :ic-trigger-on "scrolled-into-view"
         :ic-get-from   (str vars/api-url "/wishlist/items")
         :ic-post-to    (str vars/api-url "/wishlist/items")
         :ic-include    (json/generate-string {:product-key (:product/key product)})}]

    intercooler still does POST request to server to get state :-)

    Alexander Solovyov
    @piranha
    I think I know what to do. :) Initially I should render only ic-src/ic-trigger-on for an anonymous user, and then in response I can render only ic-post-to, yeaaah! Okay, the question is then if it's possible to connect intercooler with JS state so it'll know if user is logged in (so I can skip issuing this request for really anonymous users).
    Alexander Solovyov
    @piranha
    hmmm... this almost works, but I need to replace that div with ic-src, and instead of this it puts returned content inside of itself
    is it possible to replace the div which makes query without returning surrounding html (sibling divs)?
    chg20
    @chg20
    Hi @piranha maybe you are looking for http://intercoolerjs.org/attributes/ic-replace-target.html ?
    Alexander Solovyov
    @piranha
    wow, thanks! that's it :-)
    any pointers on how to debug two sequential requests to server?
    Alexander Solovyov
    @piranha
    huh, I got it working! :-) coooool
    it seems to me right now that we're going to switch whole project to intercooler :-)
    Alexander Solovyov
    @piranha
    argh, I need to invent some way to only trigger (some) actions when user is logged in, and I really don't want to know on a server...
    Eugene Esca
    @scsmash3r
    @piranha Сформулируй на русском языке. А то сложновато понять, что значит фраза "I really don't want to know on a server" (можно лично, чтобы тут чат не забивать).
    Alexander Solovyov
    @piranha
    Ого, ок) у меня сейчас сервер не знает ничего про юзера, и так и хочется оставить - чтоб основная нагрузка попадала в кэш. Но тогда мне надо некоторые действия (хедер, иконки вишлиста) обновлять, только если установлена кука.
    chg20
    @chg20
    :laughing:
    Eugene Esca
    @scsmash3r
    @chg20 Is it ok if I will try to explain to Alex, using his native language? :P
    Eugene Esca
    @scsmash3r

    @piranha Ну, проверка куков - это отдельная операция, к которой IC наверняка отношения не имеет. Наверное тут тебе будет виднее, как логику приложения оформить в код, используя IC.

    Думаю, ты можешь использовать https://intercoolerjs.org/attributes/ic-on-beforeTrigger.html чтобы определять перед событием, триггерить его или нет (например, вызывать функцию, которая будет проверять куку). При возвращении false триггер не сработает.

    chg20
    @chg20
    @scsmash3r of course, I'm just laughing that I can't understand what's going on here! :)
    Alexander Solovyov
    @piranha
    @scsmash3r that’s exactly what I need. :) It seems it’ll take some time to learn all API surface and get used to intercooler way of doing things
    Alexander Solovyov
    @piranha
    I wonder if it's possible to somehow extend intercooler to update few places at the time? My use case is this: the product listing page is rendered for an unauthorized user, and I want to make a separate request to server to get state if those products are wishlisted (so I can render red heart icon instead of an empty one). I did that, but it makes 24 requests, which is really suboptimal. So i'm thinking what would be the best course of action to batch that stuff?..
    Eugene Esca
    @scsmash3r
    I think IC has nothing to do with your server endpoints and response data. You can make an endpoint, which will take only 1 request and will return the states of a products, sending an array of product ID's. Suitable?
    In example, you can use ic-includein a form of CSS selector, sending checked/selected product IDs to your server endpoint.
    Assign wishlisted class to wishlisted products (your logic goes here, it's up to you how you make it clientside).
    And then just use :ic-include ".wishlisted" to send all those elements to your server.
    Alexander Solovyov
    @piranha
    Well... my endpoint can take an array of product ida, I just don’t want to render whole product there. It seems like I’ll need a bit of custom JS to support my usecase there, right? So when I get a response from a server I’ll need to add a class to all products (without replacing them) - that’s where my question lies, if I can get by without custom JS. :)
    chg20
    @chg20
    You would probably need a small amount of custom JS to make that work. You might trigger it via a response event header: X-IC-Trigger
    something like X-IC-Trigger: {"updateFavorites" : [1, 2, 3, etc.]}