Блог

Главная - Вопросы по программированию - как обновить график plotly с помощью ajax в django

как обновить график plotly с помощью ajax в django

#jquery #django #ajax #plotly

#jquery #django #ajax #plotly

Вопрос:

Я хочу обновить свой график построения с помощью ajax в моем проекте Django. Это то, что я пробовал до сих пор. Я следую этому руководству, чтобы сделать это, и я совершенно новичок в jquery и ajax.

urls.py 

 urlpatterns = [
    path('', views.index, name='index'),   
    path('smartflow/ajax/updategraph', views.updategraph, name = "updategraph")

]

В views.py я определил updategraph функцию (представление) для выполнения задания для запроса GET.

 def updategraph(request):        
    df_georgian = get it from a csv file for example

    if request.headers.get('x-requested-with') == 'XMLHttpRequest':
            coding = request.GET.get('coding')

            if coding:
                    trace2 = go.Scatter(x=df_georgian.index,
                                            y=df_georgian.loc[:, df_georgian.columns[2]],
                                            mode='lines',
                                            name='2')


                    fig_new = go.Figure(data=[trace2])
                    plot_div_new = plot(fig_new,
                                            config=config,
                                            output_type='div')

                    data = {
                            'my_data':plot_div_new
                    }
                    return JsonResponse(data)
    else:
            return redirect('smartflow')

это мой шаблон:

 <div class="container">

    <div class="row">
        <div class="col-12 col-sm-12 col-md-12 col-lg-12 col-xl-12 mx-3 px-0 mt-5 pt-5" id="graph" >
            {% autoescape off %}
            {{ new|safe }}
            {% endautoescape %}
        </div>

        <div class="col-12">

            <div>
                <input type="checkbox" id="coding" name="interest" value="coding" onclick = "myfunction()">
                <label for="coding">Coding</label>
            </div>

        </div>

    </div>
</div>

Я хочу, чтобы, если coding флажок установлен, график добавлял trace2 его к себе, а когда он снят trace2 , удалял из существующих графиков.

вот мой jquery для ответа на запрос GET, который находится в конце моего шаблона:

 <script type = "text/javascript">
    $("#coding").change(function () {
    if (document.getElementById('coding').checked) {
        alert("checked");
        
        var current_graph = $('#graph').val();

        $.ajax({
            url: "{% url 'updategraph' %}",
            data: {
                'current_graph': current_graph
            },
            dataType: 'json',

            success: function (data) {
            // $('#graph').val() = current_graph; //Here is my question?!?!?!?!?!??!?!?!?!
                alert(response);

            }
        });
        
    } else {
        alert("unchecked");
    }
  
});

когда я выбираю coding , я получаю следующую ошибку в консоли Chrome:

 GET http://127.0.0.1:8000/smartflow/ajax/updategraph?current_graph= 500 (Internal Server Error)         jquery-3.5.1.min.js:2 
send    @   jquery-3.5.1.min.js:2
ajax    @   jquery-3.5.1.min.js:2
(anonymous) @   (index):1683
dispatch    @   jquery.min.js:2
v.handle    @   jquery.min.js:2

в функции успеха моего js-кода ($ (‘#graph’).val() = data; // Вот мой вопрос?!?!?!?!?!??!?!?!?!) часть:

1- Я не знаю, как получить my_data то, что я вернул, views.py и поместить его в div с #graph идентификатором.

2- как добавить данные в текущий график без удаления предыдущих.

Комментарии:

1. Привет, ваше событие будет вызвано, если вы не нажмете на кнопку отправки. Сделайте одну вещь, если вы можете установить флажок network tab->XHR , чтобы увидеть ajax детали вашего запроса. Кроме того, поместите alert(response) внутри функции успеха, чтобы посмотреть, показывает ли это и что это возвращает.

2. @Swati вы правы, мое событие было неправильным. Я обновил вопрос, я также обновил событие и протестировал его, alert и он работал просто отлично, но alert(response); ничего не показывает, означает ли это, что мой вызов ajax не выполняется?

3. Это происходит, но у вас ошибка сервера. Здесь #graph div не вводится, я думаю, вам нужно передать значение флажка, просто получить его с помощью $(this).val() . Также вы получаете значение из ajax, используя request.GET.get('coding') .. разве это не должно быть request.GET.get('username') ?

4. @Swati статус запроса в network tab->XHR is 500 . итак, мой запрос ajax не выполняется, что я делаю не так?

5. @Swati мой плохой, я забыл обновить имена переменных. Пожалуйста, проверьте код еще раз. Раньше я #graph получал текущий график, а затем добавлял к нему полученные данные из ajax. #coding является ли идентификатор флажка, есть ли что-нибудь, что будет сохранено в этом из вызова ajax?

Ответ №1:

Где у вас есть свой комментарий:

$('#graph').html(data["current_graph"])

Ответ №2:

Вы можете добавить содержимое в div с помощью :

 $('#theDiv').prepend('<img id="theImg" src="theImg.png" />')

В этом примере я добавляю изображение внутри div..
В вызове ajax будет что-то вроде :

 $.ajax({
        url  : "{% url 'url_to_call' %}",
        type : 'get',
        data : {
            somedata : $('#somedata').val()
        },
        success: function(response){
            $( "#the-div" ).prepend('<img id="id" src="theImg.png" />')
        }
    });