Where communities thrive


  • Join over 1.5M+ people
  • Join over 100K+ communities
  • Free without limits
  • Create your own community
People
Activity
    Kyle Ingraham
    @kyleingraham
    I followed the example and all is well. Works like a charm.
    Edouard
    @inouire_twitter
    👍
    Kyle Ingraham
    @kyleingraham
    Thanks for the help. This library is quite the toolbox.
    chg20
    @chg20
    glad you are finding it useful :beers:
    The option issue is probably because of inconsistent handling of the events on option elements between browsers. I'd bet that safari and chrome don't fire click events on options. Glad you found the dependent select example, sounds like that's the right approach for what you are doing.
    Kyle Ingraham
    @kyleingraham
    You're likely right on the money with there.
    For Django users I posted a gist of a template tag that uses ic-global-include to include a Django CSRF token in every form that intercooler.js posts: https://gist.github.com/kyleingraham/b35a4700cfabc79fe75a6f3435032758
    Arvind Nedumaran
    @arvindamirtaa

    Hello everyone! I've just discovered Intercooler and am loving it so far. I see myself using ic-select-from-response a LOT with Django.

    I got thinking on whether a Django complement ic-select-from-response would be feasible. The objective is to avoid fetching the entire page when making the request from intercooler (say, I wanna replace the main content area but want to retain the navigation, etc) but preserving the full template so the copied URL works too.

    My understanding is since there is no way to distinguish between these 2 types of requests, it wouldn't be possible? Any other options I can look into?

    Arvind Nedumaran
    @arvindamirtaa
    After a bit more digging around, looks like a bit of restructuring the templates does this just fine already - https://stackoverflow.com/questions/16110099/how-to-render-only-part-of-html-with-data-using-django
    chg20
    @chg20
    Hi @arvindamirtaa yeah, most web frameworks have a way to decompose views so you can render sub-components easily. You can then check the 'ic-request' parameter to see if a request is coming from intercooler, and 'ic-target-id' to see what the target is if you need to further drill down. My recommendation is to stick with bigger targets and only narrow down once you have settled on a particular UI. Then you can get fancy.
    chg20
    @chg20
    Releasing intercooler v1.2.3 this Friday
    Néstor Díaz Valencia
    @n3storm
    Yeaaah! Thank you so much @chg20
    Jochen Breuer
    @brejoc
    @chg20 Very awesome!
    Btw, will there be an "official" minified version again?
    Eugene Esca
    @scsmash3r
    Good news about new release :)
    chg20
    @chg20
    @brejoc should be
    Eugene Esca
    @scsmash3r
    @chg20 How can I do a customized ic-prompt? I.e. I'm using SweetAlert for dialog boxes. How do I manage to show it before any action? I.e. I have a ic-trigger="click" on a button element and want to show some custom box before that trigger will actually fire.
    I've tried ic-on-beforeTrigger, but it seems I can only instantly return true or false - but what about deferreds?
    chg20
    @chg20
    @scsmash3r sounds kinda like this example: http://intercoolerjs.org/examples/bootstrap_confirm.html
    Eugene Esca
    @scsmash3r
    Yes, I missed ic-confirm out of my sight >.< Thanks again
    Aha, that example is right what I need. Cheers
    Eugene Esca
    @scsmash3r

    Did it, thanks again. Yet I think how it could be done with ic-on-beforeTrigger and is it even possible with such approach, where promises are fired, and false state is returning after some time...

    In template:

    <button
        type="button"
        class="confirm_button"
        ic-post-to="/somePath"
        ic-trigger-on="confirmed-by-user"
        ic-indicator="#someloader">
        Confirm action
    </button>

    In events handler:

    jQuery(".confirm_button").on('click', function() {
        ConfirmActionDialog().then((result) => {
            if (result) {
                jQuery(this).trigger('confirmed-by-user');
            }
        });
    });

    In core or whatever thirdparty module (for me it's SweetAlert2):

    let ConfirmActionDialog = function() {
        // ! --- [Confirm action process] deferred
        let deferred = jQuery.Deferred();
    
        Swal.fire({
            title: 'Are you sure?',
        }).then((result) => {
            if (result.value) {
                deferred.resolve(true);
            }
            deferred.resolve(false);
        });
    
        // ! --- [Confirm action process] resolved
        return deferred.promise();
    
    };
    chg20
    @chg20

    I have released intercooler v1.2.3, available on the main site, as well as through bower and NPM.

    http://intercoolerjs.org/download.html

    Changes in this release are:

    • ic-trigger-on now supports multiple event names, separated by commas
    • The ic-sse-with-credentials attribute enables SSE requests to be made with credentials
    • The ic-push-params attribute allows you to include parameter values in the pushed URL
    • Bug fixes

    Enjoy, and thanks for using intercooler!

    Carson

    cscortes
    @cscortes
    New at intercooler, took a simple example, but I noticed that it is not returning values as content type : json application. Is there a simple way to do this?
    I tried to do this with beforeAjaxSend, but it changes how the data is changed. They become a querystring instead of a dictionary format for some reason.
    Eugene Esca
    @scsmash3r
    @cscortes Can you be more specific? What exactly are you doing and what is expected? I think you're talking about headers, that should be in response. And response is handled by your side (backend, server, api, etc). Just set an appropriate headers I guess
    cscortes
    @cscortes
    I think you are correct. I am sending login information to the server, that expects to see it as json data. It is saying "bad request". But when it try it with CURL and json, it's okay with it.
    curl -i -H "Content-Type:application/json" -X POST -d '{"username":"luis", "password":"xxxx"}' http://localhost:9099/auth
    cscortes
    @cscortes
    I can change the content-type to application/json, but I cant seem to find out how to change the data format from querystring to json dictionary. How do you do that?
    cscortes
    @cscortes
    I think I have tracked it down to the getParametersForElement. It returns data in a querystring format, instead of what the backend really requires which is a json dictionary (see curl "POST"). I am unsure where intercooler allows you to change this.
    Eugene Esca
    @scsmash3r
    @cscortes I doubt that it has something to do with Intercooler itself. Probably this is the function you're looking for (https://www.developerdrive.com/turning-the-querystring-into-a-json-object-using-javascript/ - at the end of this article). You can apply it before sending your query string with beforeAjaxSend.ic I guess
    cscortes
    @cscortes
    @scsmash3r I will try it. I have been looking at the intercooler javascript code, and it seems incapable of generating "data" in anything other than querystring format or file format. I am sure I am using a json standard because for the backend I am using a standard FLASK module for JWT. Maybe I haven't completely wrapped my mind around what intercooler is doing. I will add some code to my version of intercooler 1.2.3 to do what I think it should be for JSON dictionaries, maybe I can donate the code back to the base code? I just think this capability should come with intercooler standard.
    chg20
    @chg20
    Hi @cscortes I'm happy to review a proposed change
    cscortes
    @cscortes
    @chg20 okay, I am still kind of playing around with the code, but I can send you what I got so far tomorrow.
    chg20
    @chg20
    NB: I do something similar for forms when we need to submit a form of type multipart/form-data, look at getParametersForElement(). I could see abstracting that a bit and introducing an ic-data-encoding attribute that would take "urlencoded", "form-data" and "json" and default to "urlencoded" unless the element is a form of type multipart/form-data.
    cscortes
    @cscortes
    @chg20 yep, that is what I was thinking. I implemented the enctype = json for forms in the getParametersforElement.
    @chg20 I am such a noob with gitter, don't really know how to upload a file. Maybe just my diff file to intercooler-1.2.3 ?
    cscortes
    @cscortes
    587a588
    > 
    591a593,610
    >       
    > 
    >       if (data.append !== undefined) {
    >         // remove 'mock' append function
    >         delete data["append"];
    > 
    >         // next 3 lines maybe too specific to my particular use-case
    >         // but needed because flask-jwt doesn't allow additional
    >         // parameters.  
    >         delete data["ic-current-url"];
    >         delete data["ic-id"];
    >         delete data["_method"];
    > 
    >         // json headers
    >         ajaxSetup.data = JSON.stringify(data);
    >         ajaxSetup.dataType = "json";
    >         ajaxSetup.contentType = "application/json";
    >       }
    673a693,707
    >   function combinedicts(arraydict) {
    >     let newdict = {};
    > 
    >     for (let idx in arraydict) {
    >         let d = arraydict[idx];
    >         let k = d.name;
    >         let v = d.value;
    > 
    >         newdict[k] = v;
    >     }
    > 
    >     return newdict;
    > }
    > 
    > 
    675,676c709,710
    <     var target = getTarget(elt);
    <     var data = null;
    ---
    >     let target = getTarget(elt);
    >     let data = null;
    680a715,722
    > 
    >     } else if (elt.is('form') && elt.attr('enctype') == 'json') {
    > 
    >       let closestForm = elt.closest('form');
    >       let x = closestForm.serializeArray();
    >       data = combinedicts(x);
    >       data.append = function( x, y ) { this[x] = y; };
    > 
    681a724
    > 
    743d785
    < 
    745d786
    <
    cscortes
    @cscortes
    @chg20 okay, cleaned up the code a little. Here is my updated diff.
    587a588
    > 
    591a593,611
    > 
    >       if (data.append !== undefined) {
    >         // remove 'mock' append function
    >         delete data["append"];
    > 
    >         // optional, but necessary for my code to work correctly
    >         // if more than exact parameters go to flask-jwt, it fails.
    >         // hence, I created an optional ic-request-params to filter
    >         // just the necessary parameters for the auth to work.
    >         var filterRequestParams = closestAttrValue(elt, 'ic-filter-request-params');
    >         if (filterRequestParams) {
    >           data = processFilterRequestParams(data, filterRequestParams);
    >         }
    > 
    >         // json headers
    >         ajaxSetup.data = JSON.stringify(data);
    >         ajaxSetup.dataType = "json";
    >         ajaxSetup.contentType = "application/json";
    >       }
    602a623,633
    >   // I created an optional ic-request-params to filter
    >   // just the necessary parameters for the auth to work.
    >   function processFilterRequestParams(olddata, str) {
    >     var data = {};
    >     $.each(str.split(","), function(idx, strkey) {
    >       var param = $.trim(strkey);
    >       data[param] = olddata[param];
    >     });
    >     return data;
    >   }
    > 
    673a705,716
    >   // converts an array of dictionary values into just 1 dictionary.  
    >   // Of course, there is a danger that you could "lose" a key, 
    >   // value on a name clash so be careful.
    > 
    >   function combinedicts(arraydict) {
    >     var newdict = {};
    >     $.each(arraydict, function(idx, aryval) {
    >       newdict[aryval.name]= aryval.value;
    >     });
    >     return newdict;
    >   }
    > 
    680a724,734
    > 
    >     // New enctype type, to handle passing parameters in a dictionary
    >     // instead of a query string.
    >     } else if (elt.is('form') && elt.attr('enctype') == 'json') {
    > 
    >       var closestForm = elt.closest('form');
    >       data = combinedicts(closestForm.serializeArray());
    >       // adding append function, so it just 'works' with 
    >       // the rest of the code, later it will be removed
    >       data.append = function( x, y ) { this[x] = y; };
    > 
    681a736
    > 
    743d797
    < 
    745d798
    <
    @chg20 sample usage, include an enctype of json.
    cscortes
    @cscortes
            <div id="loginform">
                <h3>Contact Info</h3>
    
                <form ic-post-to="/auth"  ic-indicator="#demo-spinner" enctype="json" 
                ic-on-success="token_success" ic-on-error="token_fail"
                ic-filter-request-params="username, password">
    
                    <div class="form-group">
                        <label>Username</label>
                        <input type="text" class="form-control" name="username">
                    </div>
    
                    <div class="form-group">
                        <label>Password</label>
                        <input type="password" class="form-control" name="password">
                    </div>
    
                    <button class="btn btn-default">Submit</button>
                    <i id="demo-spinner" class="fa fa-spinner fa-spin" style="display:none"></i>
                </form>         
            </div>
    chg20
    @chg20
    @cscortes can you make a pull request on github for me to comment on? I think it should be re-implemented as a stand-alone attribute, rather than piggy-backing on the existing enctype attribute. The example you have would be considered invalid HTML: https://www.w3schools.com/tags/att_form_enctype.asp
    I suggest a new attribute, ic-data-encoding so we keep things clean
    thank you for the work, btw
    I'm planning on a January release and would love to get this in
    Eugene Esca
    @scsmash3r
    Agree, enctype looks so standalone'y out there ^_^
    cscortes
    @cscortes
    Okay. change done. Still I guess to do a pull request, I need to make a branch, right? Don't think I have the rights to do that. Otherwise, how to i get that done?
    cscortes
    @cscortes
    @chg20 nevermind, I did a fork instead. Pull request created. enjoy -- happy thanksgiving !
    chg20
    @chg20
    Thank you @cscortes I will review it today