0

I am trying to build an application for educational/entertainment reasons. I use python/flask on the backend for rendering the pages and some plain js/jquery on the frontend to manipulated the document whenever is necessary. So far so good but i am in the point that i want to add images upload functionality.

The basic idea is that user tries to upload images, javascript requests backend, backend make the validation and if everything is ok proceeds with the uploading. Meanwhile I use socket.io on the frontend and flask_socketio on the backend in order to show the user possible errors, finished upload done messages, e.t.c.

The problem is that whenever i use jQuery to append an element this element will be appended only after everything else in javascript block has been executed.

    socket.on('error', function(msg) {
        alert('error triggered');
        $('#test').append(`
            <div class="alert alert-warning mt-2" id="file_type_error" role="alert"> this type of file is not supported </div>
        `);
        alert('if i see this before error this is the problem');
    });

So when i run this code what is happening is this: First page alerts me 'errors triggered) then alerts me 'if i see this before error this is the problem' and only afterwards it's add the error on the page.

This is huge problem for me because i have other js blocks if they append the element after everything else is executed in the block, it's totally affect what i aim to do.

I have very little experience in frontend development so any suggestion will be welcome.

Gigatos
  • 1
  • js code will execute line by line and will not wait for previous code to done execution or not. you can us condition, if there is error then append error, else do your other code. – Devsi Odedra Aug 27 '20 at 12:15
  • perhaps i don't explain well my problem. I don't want to stop execution of the other lines. My problem is that this specific lines will be executed after everything else had been done in the js block. also in python when everything nested in a block will be executed line by line waiting everything finished before jumb to next line. this is not the case in js?As i mention i know very little in js – Gigatos Aug 27 '20 at 12:24
  • I think this question and the discussions in it will help you: https://stackoverflow.com/questions/6068955/jquery-function-after-append/6069060 – Shawn Aug 27 '20 at 15:31
  • Thank you very much for the comment. First of all I want to thank you all for the immediate answer and second to admit that I did not explain well my problem. My problem is that I want the code for appending an element to be executed immediately. I use the above example not because I care what will be executed after the appending but to demonstrate the weird way (in my opinion) that thing gets done. For some reason the dom change will happen after everything else in javascript has beed done. Is anyway to overcome this? – Gigatos Aug 27 '20 at 18:57

0 Answers0