CODEWITHSUNDEEP
javascriptjqueryajaxgetjson
Windschief
Windschief

Reputation: 101

TypeError: $.getJSON is not a function

I want to show a progress bar while the server is processing the formular data which was posted before. The client is able to check the progress on this url: http://127.0.0.1:8000/loader/progress. The following code works perfectly and the console shows the percentage for one time:

$.get('http://127.0.0.1:8000/loader/progress', function(data){
    console.log(data)
});

Now I want to send a getJSON request to this address as long as the value is < 100%. How do I do this? The following code gives this error message:

Uncaught TypeError: $.getJSON is not a function 

var updateProgress = function(){
    $.getJSON('http://127.0.0.1:8000/loader/progress', function(data)
    {
        if(data.percentageProcessed != 100) {
            document.getElementById('progressBar').value = data.percentageProcessed;
            setInterval(updateProgress, 2000);
        } else {
            document.getElementById('progressBar').value = 100;
        }
    });
}
updateProgress();

I load jQuery after the opening of my HTML document with the following source: https://code.jquery.com/jquery-3.3.1.min.js

It's all the same with the following code. Here the error message says: TypeError: $.ajax is not a function:

var doAjax = function() {
    $.ajax({
        method: 'GET',
        url: 'http://127.0.0.1:8000/loader/progress',
        success: function(data){
            if (data.percentageProcessed != 100) {
                document.getElementById('progressBar').value = data.percentageProcessed;
                doAjax();
            } else {
                document.getElementById('progressBar').value = 100;
            }
        }
    });
}
doAjax();

Thank you for your help.

Edit: This is my jQuery import:

<body>
        <script
            src="https://code.jquery.com/jquery-3.3.1.min.js"
            integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
            crossorigin="anonymous">
        </script>
...
</body>

Upvotes: 0

Views: 4774

Answers (1)

Pierre
Pierre

Reputation: 2912

The root cause was: there were two imports of jQuery on the same page. The Solution: remove one of the two jQuery imports. [cleaning up]

Upvotes: 2

Related Questions