Flask app and JQuery not being loaded properly

Question

UPDATE: Tried everything in the answer below and it hasn't helped.

I've got a Flask app and in the templates I'm running some JQuery. The JQuery pulls in the Aviary editor..or it's supposed to, on page load. For some reason the JQuery isn't running in the proper sequence or something, because the editor only works if I add an artificial delay to the JQuery function. For example, this does not work:

<script type='text/javascript'>
    id = "image";

   var featherEditor = new Aviary.Feather({
       apiKey: 'my_api_key',
       apiVersion: 3,
       theme: 'minimum', // Check out our new 'light' and 'dark' themes!
       tools: 'all',
       noCloseButton: true,
       appendTo: 'result-image',
       onSave: function(imageID, newURL) {
            //this code was removed for brevity
       },
       onError: function(errorObj) {
           alert(errorObj.message);
       }
   });
       function launchEditor(id) {
           featherEditor.launch({
               image: id
           });
          return false;
        }
    $(document).ready(function() {
           launchEditor(id);
    });
</script>

But this code below works fine. After the delay runs out, the editor launches:

<script type='text/javascript'>
    id = "image";

   var featherEditor = new Aviary.Feather({
       apiKey: 'my_api_key',
       apiVersion: 3,
       theme: 'minimum', // Check out our new 'light' and 'dark' themes!
       tools: 'all',
       noCloseButton: true,
       appendTo: 'result-image',
       onSave: function(imageID, newURL) {
            //this code was removed for brevity
       },
       onError: function(errorObj) {
           alert(errorObj.message);
       }
   });
       function launchEditor(id) {
           featherEditor.launch({
               image: id
           });
          return false;
        }
  $(document).ready(function() {
            setTimeout(
                           function() 
                           { 
                                    launchEditor(id);
                           }, 3500);

   });
</script>

I tried using (window).load() instead, moving the javascript from the header to the footer and a bunch of other things. The only thing that got the editor to load properly was adding a delay of a few seconds to the function call.

Now, while this was fine for testing, this isn't very conducive to a happy user experience. I'd like to figure out why the function isn't working until a few seconds after the page finishes loading.

Any advice is appreciated! Thank you

@Bibhas these are in a Flask application using Jinja2 templates. I didn't want to leave any detail out in case Jinja2 does anything funny during render or something like that — Jmichelsen, Jan 25 '14 at 08:03

score 0 · Answer 1 · edited May 23 '17 at 12:21

0

I'm guessing your image isn't loaded yet, and that's why it won't work immediately on page load. Try checking if the image is loaded before you open the editor, maybe with something like this:

$(document).ready(function () {
    $(id).one('load', function () {
        launchEditor($(this).attr('id'));
    }).each(function () {
        if (this.complete) $(this).load();
    });
});

Image loaded check borrowed from here

edited May 23 '17 at 12:21

Community

1
1

answered Jan 25 '14 at 08:07

Magnus Engdal

4,606
2
29
44

Hmm, this never fires even though I know the image is loaded in the DOM, I can see it in Firebug and if I call launchEditor(id) from js console, it brings the editor up in the page – Jmichelsen Jan 25 '14 at 08:19
What is `id = "image";`? Is that the ID of an image, or src, or maybe the actual image data? – Magnus Engdal Jan 25 '14 at 08:21
I added a progress bar to help identify when things are fired. It is removed just before launchEditor normally runs. I modified your code to call the launchEditor instead of redefining it, and I added the code to hide the progress bar and the progress bar never goes away – Jmichelsen Jan 25 '14 at 08:22
id = "image", "image" is the div id. This is exactly how the Aviary documentation wants the ID given. They don't want the # included for div ids. Here is the div: – Jmichelsen Jan 25 '14 at 08:22
My answer depends on the id in `$(id)` is the actual image, so that it can check if it's loaded. If it's a div then it probably won't work. It needs to be something like `$('#imageID')` by image ID or `$('img')` by the `` tag. – Magnus Engdal Jan 25 '14 at 08:26
Oops, it is an tag, I'm sorry. ID is the id of the image tag. I did try using $('#image') as well in your code, but that didn't work either. – Jmichelsen Jan 25 '14 at 08:28
Updated my answer. `.attr('src')` should of course be `.attr('id')`. Here is an example http://jsfiddle.net/rthnz/1/. Also, I don't know if Aviary wants the ID in the #image or image format (With or without #). – Magnus Engdal Jan 25 '14 at 08:41
It seems to be loading here http://jsfiddle.net/rthnz/1/, even though it wont work because I don't have an api key. – Magnus Engdal Jan 25 '14 at 08:42
In your fiddle, I'm not seeing the editor pop up (or an error about it missing an api key) at all. It is erring for you? – Jmichelsen Jan 25 '14 at 08:51

Flask app and JQuery not being loaded properly

1 Answers1