проблема с отображением ajax POST-вызова для заполнения DIV

Question

Я рву голову, пытаясь понять, почему, когда я делаю ajax POST-вызов, чтобы заполнить div - он прекрасно отображается, когда я выполняю вызов из того же блока SCRIPT в документе HTML, но как только Я перемещаю этот же вызов в отдельный файл .js как функцию, в DIV ничего не отображается.

Я уверен, что просто что-то упускаю, но не могу понять, что ???

следующие РАБОТЫ (вызов ajax в том же блоке скрипта)

<div id="flow">
</div>

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

        $.ajax( "http://localhost:8680/jsdv-status-panel/tsv-multi-version",
            {
                data: JSON.stringify(
                    {
                        "some_json":
                                {
                                    "id": 0,
                                    ...
                                }
                    }
                ),
                contentType: 'application/json',
                type: 'POST',
                success:  function(data){
                    $("#flow").html(data);
                }
            });
    });
</script>
</body>
</html>

Однако, если я перенесу вызов в функцию в отдельном файле .js, он ничего не отобразит, даже если я увижу, что ответ вернулся должным образом (например, вкладка «Сеть» DevTools, смотрящая на вызов внешней службы) Я вижу действительный HTML или превью)

Следующее НЕ работает (без ошибок, но в DIV ничего не отображается)

<div id="flow">
</div>

<script type="text/javascript" src="assets/js/statusPanelMultiVersion.js"></script>

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


        statusPanelMultiVersion('#flow', 
                    {
                        "some_json":
                                {
                                    "id": 0,
                                    ...
                                }
                    }
         );
    });
</script>
</body>
</html>

statusPanelMultiVersion.js

function statusPanelMultiVersion(_dom_obj, _data_objects) {
     $.ajax( "http://localhost:8680/jsdv-status-panel/tsv-multi-version",
        {
            data: JSON.stringify(_data_objects),
            contentType: 'application/json',                
            type: 'POST',
            dataType: 'json',
            success:  function(data){
                $(_dom_obj).html(data);
            }
        });
};

Интересно, что у меня есть аналогичная функция во внешнем файле, который выполняет ajax GET - и он работает как положено (результаты отображаются в DIV)

function statusPanelLastValue(_dom_obj, _params) {
    $.ajax( "http://localhost:8680/jsdv-status-panel/tsv-last-value" + _params,
        {
            contentType: 'application/json',
            type: 'GET',
            success:  function(data){
                $(_dom_obj).html(data);
            }
        });
};

и называется так

 statusPanelLastValue("#pool", "?biglongquerystring");

Я либо не вижу ничего очевидного, либо не понимаю разницы между функцией (), выполняющей вызов POST, и встроенным кодом. Кто-нибудь может увидеть, что я делаю неправильно?

Answer 1

Вопрос Карлоса побудил меня увидеть проблему!

Я не заметил неправильные dataType и ContentType в запросе.

Теперь это работает

function statusPanelMultiVersion(_dom_obj, _data_objects) {
    $.ajax( "http://localhost:8680/jsdv-status-panel/tsv-multi-version",
        {
            data: JSON.stringify(_data_objects),
            dataType : "html",
            contentType: "application/json; charset=utf-8",
            type: 'POST',
            beforeSend:function(req) {
                $('#ajax-panel').html('<div class="loading"><img src="/assets/img/loading.gif" alt="Loading..." /></div>')
            },
            success:  function(data){
                $(_dom_obj).html(data);
            }
        });
};