jQuery.when not waiting for get to complete

Question

I feel like I'm not getting the concept promises here. I'm trying to get external css used in a file and append it to the html. Then I'd like to do something with that content. What all am I doing wrong here? This is where I'm at after flailing and reading the docs for longer than I'd like to admit.

<script type="text/javascript">

        $(function() {
            $.when(convertPageCssToInlineStyle()).then(
                alert(document.documentElement.outerHTML)
            );


        });

        var convertPageCssToInlineStyle = function() {
            var links = $("html").find("link[rel=stylesheet]");

            links.attr("href", function(i, value) {
                if (!window.location.origin)
                    window.location.origin = window.location.protocol + "//" + window.location.host + value;

                $.when(
                    $.get(window.location.origin, function(response) {
                        $('<style />').text(response).appendTo($('head'));
                    })
                );

            });
        };
    </script>

score 3 · Answer 1 · edited May 23 '17 at 12:06

I was able to fix this issue by mapping my promises to an array, and then handling them all at once using code from This question's answer

<script type="text/javascript">
    $(function() {

        var links = $("html").find("link[rel=stylesheet]");
        var newLinks = [];

        if (!window.location.origin)
            window.location.origin = window.location.protocol + "//" + window.location.host;

        links.attr("href", function(i, value) {
            newLinks.push(window.location.origin + value);
        });

        var promises = $.map(newLinks, function(value) {
            return $.get(value, function(response) {
                $('<style />').text(response).appendTo($('head'));
            });
        });

        $.when.apply($, promises).then(function() {
            console.log(document.documentElement.outerHTML);
        });
    });

</script>

Andrew Shepherd · Accepted Answer · 2015-02-08T00:59:47.290

1

Your convertPageCssToInlineStyle function must return a promise. Right now it isn't returning anything.

Something like this....

    $(function() {
        $.when(convertPageCssToInlineStyle()).then(
            alert(document.documentElement.outerHTML)
        );


    });

    var convertPageCssToInlineStyle = function() {
        var links = $("html").find("link[rel=stylesheet]");
        var deferred = $.Deferred();
        links.attr("href", function(i, value) {
            if (!window.location.origin)
                window.location.origin = window.location.protocol + "//" + window.location.host + value;

            $.when(
                $.get(window.location.origin, function(response) {
                    $('<style />').text(response).appendTo($('head'));
                    deferred.resolve();
                })
            );
        });
        return deferred.promise();
    };
</script>

edited Feb 08 '15 at 00:59

answered Feb 08 '15 at 00:54

Andrew Shepherd

44,254
30
139
205

Definitely makes sense, could you explain how to do that possibly? – Chazt3n Feb 08 '15 at 00:56
@Chazt3n - OK, I've provided a coding example. (Haven't testing it, and it probably has a defect, but it gives you an idea of the approach). – Andrew Shepherd Feb 08 '15 at 01:01
So I'm still getting the same behavior. Could it be something to do with me using the attr function to loop through the result set? – Chazt3n Feb 08 '15 at 01:16
Hi, it's great that you're helping with the promise tag! I'd like you to reconsider how you create those deferreds in your question - see if you think [this applies to your solution](http://stackoverflow.com/questions/23803743/what-is-the-deferred-antipattern-and-how-do-i-avoid-it) for example. – Benjamin Gruenbaum Feb 08 '15 at 12:27

jQuery.when not waiting for get to complete

2 Answers2