JavaScript Рули не дают ошибок, но не работают - PullRequest
Новая
       10

JavaScript Рули не дают ошибок, но не работают

0 голосов
/ 11 марта 2020

Я пытаюсь заменить текст на своей странице, используя руль. Но он не работает, и я тоже не получаю никаких ошибок.

Следующий код срабатывает, когда пользователь нажимает кнопку подтверждения 

<button type="submit" id="add_lunch" class="button button-contactForm boxed-btn" onclick="addToCart()">Submit</button>

, затем 

function addtoCart() {

    var request = new XMLHttpRequest();
    var base_id = $("input[name='base_id']:checked").val();
    var protein_id = $("input[name='protein_id']:checked").val();
    var dessert_id = $("input[name='dessert_id']:checked").val();
    var side_id = $("input[name='dessert_id']:checked").val();    

    request.open('POST', '/cart');

    request.onload = () => {

                // Extract JSON data from request
                var template = Handlebars.compile(document.querySelector('#js_result').innerHTML);
                var data_response = JSON.parse(request.responseText);
                var content = template({'base_name': data_response.base.name});
                console.log("****" + data_response.base.name)

                document.addEventListener('DOMContentLoaded', () => {
                    document.querySelector('#add_lunch').onclick = ()  => {
                        document.querySelector('#media_js_body').innerHTML += content;
                    };
                });

    }

    var data = new FormData();
    data.append('base_id', base_id);
    data.append('protein_id', protein_id);
    data.append('side_id', side_id);
    data.append('dessert_id', dessert_id);

    // Send request
    request.send(data);

    return false;
}

плюс шаблон 

<script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/4.0.11/handlebars.min.js"></script>
    <script id="js_result" type="text/x-handlebars-template">
    {{ base_name }}
    </script>
    <script src="{{ url_for('static', filename='js/util.js') }}"></script>

Что я выяснил, так это то, что он как-то связан с состоянием DOM? и даже клик.

Есть предложения и исправления?

1 Ответ

0 голосов
/ 11 марта 2020

Я не знаю, был ли это кофе, который я выпил, но после нескольких глотков и нескольких изменений, похоже, теперь он работает частично. Я получаю текст в нужном месте.

Теперь мне нужно только убедиться, что значения из data_response также передаются в контенте

Это то, что я изменил. 

function addToCart() {

    var request = new XMLHttpRequest();
    var limit=2;

    var base_id = $("input[name='base_id']:checked").val();
    var protein_id = $("input[name='protein_id']:checked").val();
    var dessert_id = $("input[name='dessert_id']:checked").val();

    var side_id = [];
    $.each($("input[name='side_id']:checked"), function(){
                side_id.push($(this).val());
    });

    if(side_id.length==limit) {

        request.open('POST', '/cart');

        request.onload = () => {

                // Extract JSON data from request
                var data_response = JSON.parse(request.responseText);

                var templateInfo=document.querySelector('#js_result').innerHTML
                console.log("TempInfo:"  + templateInfo)
                var template = Handlebars.compile(templateInfo);
                var content = template({'base_name': data_response.base.name});
                console.log("DataResponse:" + data_response.base.name);
                console.log("Content:" + data_response.base.name);
                document.querySelector('#media_js_body').innerHTML += content;

        }

        var data = new FormData();
        data.append('base_id', base_id);
        data.append('protein_id', protein_id);
        data.append('side_id', side_id);
        data.append('dessert_id', dessert_id);

        // Send request
        request.send(data);

    } else {
                alert("Kindly select "+limit+" sides")
    }

    return false;
}
...