The problem:

I was unable to find any resources online regarding changing elements before and after an ajax request. If I have a <p> element with id="myText", if I want to change the innerHTML of that element before the AJAX request, and after, this is not possible.

I essentially want to change the text of #myText to "loading..." on click of the button, then run my AJAX request, and within that request, on success it changes that elements text from "loading...", to data, which works. However, the "loading..." does not show.

When I check devTools, I can see that the innerHTML is indeed changing to "Loading...", but it just does not show. If I remove the AJAX request, the element successfully changes to "loading..."

$(function() {
    $('#uploadBtn').click(function() {
        document.getElementById('myText').innerHTML = 'loading...'
        var form_data = new FormData($('#myForm')[0]);
        $.ajax({
            type: 'POST',
            url: '/flaskFunction',
            data: form_data,
            contentType: false,
            cache: false,
            processData: false,
            async: false,
            success: function(data) {
                document.getElementById('myText').innerHTML = data
            }
        });
    });
});

CodePudding user response：

How about this, just set the value on click and if there is an error show it or just clear the element.

$(function() {
    $('#upload-file-btn2').click(function() {
        var form_data = new FormData($('#myForm')[0]);
        document.getElementById('textArea').innerHTML = 'loading...';
        $.ajax({
            type: 'POST',
            url: '/flaskFunction',
            data: form_data,
            contentType: false,
            cache: false,
            processData: false,
            async: false,
            beforeSend: function() {
            },
            success: function(data) {
                document.getElementById('textArea').innerHTML = data
            },
            error: function(data) {
            
                document.getElementById('textArea').innerHTML = "failed"
           }
        });
    });
});

CodePudding user response：

If an element with id "textArea" is an actual textarea tag then you can't set the content of it with innerHTML. You need to use value, like any form control.

document.getElementById('textArea').value = 'loading...'

CodePudding user response：

I actually can't get your example to NOT work