Заменить HTML-элемент с толкателя и JavaScript - PullRequest
Новая
       83

Заменить HTML-элемент с толкателя и JavaScript

0 голосов
/ 12 ноября 2019

Я новичок в веб-разработке. Я пытаюсь понять и расширить этот турориал от толкача: https://pusher.com/tutorials/live-dashboard-python.

Я хочу обновить через pusher "123 новый заказ", указав фактическое количество новых заказов в режиме реального времени.

Но пока ничего из того, что я сделал, фактически не обновляет номер:

Я видел, что могу использовать идентификатор элемента html, чтобы помочь js-коду найти элемент /.

Итак, на стороне клиента я сжал: 

<p id="fric"></p>

в моем dashboard.html как: 

<div class="col-xl-3 col-sm-6 mb-3">
          <div class="card text-white bg-success o-hidden h-100">
            <div class="card-body">
              <div class="card-body-icon">
                <i class="fa fa-fw fa-shopping-cart"></i>
              </div>
              <div class="mr-5"><span id="order-count"><p id="fric"></p></span> New Orders!</div>
            </div>
            <a class="card-footer text-white clearfix small z-1" href="#">
              <span class="float-left">View Details</span>
              <span class="float-right">
                <i class="fa fa-angle-right"></i>
              </span>
            </a>
          </div>
        </div>

В моем fric.js 

$(document).ready(function(){
    var frico = pusher.subscribe('fric');
    frico.bind('senda', function(data) {
        document.getElementById('fric').innerHTML = data.units
    });
});

Для получения информации о серверной части мой app.py также содержит: 

@app.route('/fric', methods=['POST'])
def fric():
    data = request.form
    pusher.trigger(u'fric', u'senda', {
        u'units': data['units']
    })
    return "units logged"

К сожалению, я не получаю никаких сообщений об ошибках или сообщений в консоли со стороны клиента.

В руководстве очень хорошо показано, как обновлять таблицы в формате html. Когда дело дошло до замены html-элементов, таких как «123» в учебнике, я не смог заставить его работать.

Как уже упоминалось, я новичок в веб-разработке, и любые предложения или замечания будут с благодарностью!

...