Ajax вызов с django в раскрывающемся списке bootstrap - PullRequest
Новая
       5

Ajax вызов с django в раскрывающемся списке bootstrap

0 голосов
/ 05 мая 2020

Постановка проблемы: у меня нет способа загрузить всю диаграмму html в div, вызвав функцию из views.py и передав контекст на refernece_page. html без обновления страницы.

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

<div class="dropdown show " style="float:left; ">
      <a aria-expanded="false" aria-haspopup="true" role="button" data-toggle="dropdown" class="btn btn-secondary dropdown-toggle" href="#">
        <span id="selected" >Event Time</span><span class="caret"></span></a>
      <ul class="dropdown-menu">
        <li><a class="dropdown-item" href="#">1 Hour</a></li>
        <li><a class="dropdown-item" href="#">1 day</a></li>
        <li><a class="dropdown-item" href="#">1 Week</a></li>
        <li><a class="dropdown-item" href="#">1 Month</a></li>
      </ul>
  </div>

Я хочу выполнить обновление погружения, в котором есть карта, без обновления страницы. Для этого у меня есть функция per_hour_data в views.py, которая загружается со значением по умолчанию длительностью «1 час». 

def per_hour_data(request, app_id, record_count):
    app_detail = get_object_or_404(AppDetail, app_id=app_id)
    line_data = line_chart_data(app_id,record_count)
    app_data = AppDetail.objects.all()
    context = {
    'line_data':line_data,
    'app_detail': app_detail,
    'record_count':{'1day':'1day', '1hour': '1hour', '1week':'1week', '1month':'1month'},
    'app_data':app_data,
    }
    return render(request, 'status_monitor/reference_page.html', context)

reference_page. html содержит данные диаграммы и где я анализирую контекст. Теперь я хочу сделать что-то вроде того, когда я выбираю другую продолжительность, тогда диаграмма должна обновляться без обновления страницы. Я думал сделать это с помощью AJAX. поэтому я написал другую функцию 

def update_chart(request):
    if request.is_ajax and request.method == "GET":
        app_id = request.GET.get(app_id)
        record_count = request.GET.get(record_count)
    app_detail = get_object_or_404(AppDetail, app_id=app_id)
    line_data = line_chart_data(app_id,record_count)
    app_data = AppDetail.objects.all()
    context = {
    'line_data':line_data,
    'app_detail': app_detail,
    'record_count':{'1day':'1day', '1hour': '1hour', '1week':'1week', '1month':'1month'},
    'app_data':app_data,
    }
    return render(request, 'status_monitor/reference_page.html', context)

и вызов AJAX как 

{% block javascript %}
<script>
$(".dropdown-menu li").click(function () {
  var record_count = $(this).text();
  var app_id = getElementById('#app_id');
  $.ajax({
    type:'GET',
    url: '/update_chart/',
    data: {
      'record_count': record_count,
      'app_id' : app_id
    },
    dataType: 'json',
    success: function (data) {
        alert(data.error_message);
    },
    error: function (response) {
            console.log(response)
        }
  });

  });
 </script>
{% endblock %}

urls 

urlpatterns = [
path('status/<app_id>/<str:record_count>/' ,views.per_hour_data, name='per_hour_data'),
path('update_chart/', views.update_chart, name='update_chart'),

]

Я не получение способа, с помощью которого я могу загрузить весь html в div, передав контекст в reference_page. html.

1 Ответ

0 голосов
/ 05 мая 2020

Поместите весь свой код, который вы хотите загрузить без обновления главной страницы, в reference_page.html и отрендерите его с помощью функции jQuery load. Не используйте $.ajax

Я предполагаю, что ваш основной html равен main.html

Ваш основной вид 

def per_hour_data(request, app_id, record_count):
    app_detail = get_object_or_404(AppDetail, app_id=app_id)
    line_data = line_chart_data(app_id,record_count)
    app_data = AppDetail.objects.all()
    context = {
        'line_data':line_data,
        'app_detail': app_detail,
        'record_count':{'1day':'1day', '1hour': '1hour', '1week':'1week', '1month':'1month'},
        'app_data':app_data,
    }
    return render(request, 'status_monitor/main.html', context)

Ваш основной. html шаблон 

<div class="dropdown show " style="float:left; ">
  <a aria-expanded="false" aria-haspopup="true" role="button" data-toggle="dropdown" class="btn btn-secondary dropdown-toggle" href="#">
    <span id="selected" >Event Time</span><span class="caret"></span></a>
  <ul class="dropdown-menu">
    <li><a class="dropdown-item" href="#">1 Hour</a></li>
    <li><a class="dropdown-item" href="#">1 day</a></li>
    <li><a class="dropdown-item" href="#">1 Week</a></li>
    <li><a class="dropdown-item" href="#">1 Month</a></li>
  </ul>
</div>
<div class="chart">
    {% include 'reference_page.html' %}
</div>

javascript функция - вызов выполняется при изменении значения раскрывающегося списка 

function update_chart(record_count, app_id) {
    $('.chart').html('').load(
        "{% url 'update_chart' %}?record_count=" + record_count + "&app_id=" + app_id
    );
}

ваше ajax представление 

def update_chart(request):
    if request.is_ajax and request.method == "GET":
        app_id = request.GET.get(app_id)
        record_count = request.GET.get(record_count)
    app_detail = get_object_or_404(AppDetail, app_id=app_id)
    line_data = line_chart_data(app_id,record_count)
    app_data = AppDetail.objects.all()
    context = {
        'line_data':line_data,
        'app_detail': app_detail,
        'record_count':{'1day':'1day', '1hour': '1hour', '1week':'1week', '1month':'1month'},
        'app_data':app_data,
    }
    return render(request, 'status_monitor/reference_page.html', context)

Вы также можете обратиться к этому ответ

...