title: How to Update Plotly Plot on form submition with ajax?
body: <p>I'm building an app in Django. I have a slider which sends an angle value to the Django views and plolty plot is rendered on the page. I didn't wanted the page to be refreshed whenever slider is changed so I used AJAX. But now here is the issue. As page doesn't refresh so plot is not updated for the value selected on slider. Here is my HTML</p>
  
  <pre><code>{% load static %}
  
  &lt;!doctype html&gt;
  &lt;html lang="en"&gt;
  
  &lt;div class="x"&gt;
  &lt;head&gt;
  
      &lt;title&gt;Forbes&lt;/title&gt;
      &lt;link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous"&gt;
      &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"&gt;&lt;/script&gt;
      &lt;link href="http://code.jquery.com/ui/1.12.0/themes/smoothness/jquery-ui.css" rel="stylesheet"&gt;
      &lt;script src="http://code.jquery.com/ui/1.12.0/jquery-ui.min.js" &gt;&lt;/script&gt;
      &lt;link rel="stylesheet" href="{% static 'home.css' %}"&gt;
  
  &lt;/head&gt;
  &lt;body&gt;
      &lt;h1&gt;Intensity Plot&lt;/h1&gt;
  
      &lt;p&gt;&amp;nbsp;&lt;/p&gt;
      &lt;p&gt;&amp;nbsp;&lt;/p&gt;
      &lt;p&gt;&amp;nbsp;&lt;/p&gt;
  
      &lt;form method="post" id="intensity_plots"&gt; {% csrf_token %}
          &lt;input type="hidden" name="csrfmiddlewaretoken" value="am0SNvhTILZN9hqtsDEOiGZhiMYZXiWBRpzhVQbnDKhT89mjz8YOfqmXuLhTM5Uh"&gt;
  
          &lt;div id="div_id_slider" class="control-group"&gt;
              &lt;label for="id_slider" class="control-label requiredField"&gt;Select angle range
                  &lt;span class="asteriskField"&gt;*&lt;/span&gt;
              &lt;/label&gt;
  
              &lt;div class="controls"&gt;
                  &lt;input type="text" name="slider" class="rangeslider" required="" id="id_slider" readonly="readonly" style="left: 0%; width: 15%;"&gt;
                  &lt;p&gt;&lt;/p&gt;
                  &lt;div class="demo"&gt;
                      &lt;div type="submit" id="slider-vertical"&gt;&lt;/div&gt;
                  &lt;/div&gt;
  
                  &lt;script&gt;
                      $('#id_slider').attr("readonly", true)
                      $( "#slider-vertical" ).slider({
                      orientation: "vertical",
                          range: "min",
                          min: 0,
                          max: 360,
                          value: 0,
                          slide: function( event, ui ) {
                              $( "#id_slider" ).val(ui.value);
                          },
                          stop: function(event, ui) {
                              $('#intensity_plots').submit();
                          },
                          });
  
                      $( "#id_slider" ).val($( "#slider-vertical" ).slider( "values", 0 ));
                  &lt;/script&gt;
              &lt;/div&gt;
          &lt;/div&gt;
  
          &lt;p&gt;&amp;nbsp;&lt;/p&gt;
          &lt;p&gt;&amp;nbsp;&lt;/p&gt;
          &lt;p&gt;&amp;nbsp;&lt;/p&gt;
  
      &lt;/form&gt;
  &lt;/div&gt;
  
  &lt;div class="x"&gt;&amp;nbsp;&lt;/div&gt;
  
  &lt;div id="refresh" class="x"&gt;
          {% autoescape off %}
          {{ plot_div }}
          {% endautoescape %}
  &lt;/div&gt;
  
  &lt;style&gt;
      div.x {
          display: inline-block;
      }
  &lt;/style&gt;
  
  &lt;/body&gt;
  
  &lt;script type="text/javascript"&gt;
  
      $(document).on('submit','#intensity_plots',function(e){
              e.preventDefault();
              $.ajax({
                  type: 'GET',
                  url: 'forbes',
                  data:{
                      csrfmiddlewaretoken:$('input[name=csrfmiddlewaretoken]').val()
                  },
  
              success: function (resp) {
                  console.log("Data Retrieved");
                  $('div#refresh').append(resp.data);
  
                  },
              });
  
      })
  
   &lt;/script&gt;
  
  &lt;script type="text/javascript"&gt;
  
      $(document).on('submit','#intensity_plots',function(e){
              e.preventDefault();
              $.ajax({
                  type: 'POST',
                  url: 'forbes',
                  data:{
                      angle:$("#id_slider").val(),
                      csrfmiddlewaretoken:$('input[name=csrfmiddlewaretoken]').val()
                  },
  
              success: function () {
                  console.log("Form Submitted");
  
                  },
              });
  
      })
  
   &lt;/script&gt;
  
  &lt;/html&gt;
  
  </code></pre>
  
  <p>I used POST method to send slider(angle) value to my views.py file. Then I created another AJAX call using GET method to update the plot but it isn't working. My django views file is here</p>
  
  <pre><code>from django.shortcuts import render
  from plotly.offline import plot
  import plotly.graph_objs as go
  import math as m
  import numpy as np
  
  
  def forbes(request):
      if request.method == 'POST':
          y = []
          if request.POST.get('angle') == '360' or '0':
              angle = request.POST.get('angle')
              if not angle:
                  print('No value selected')
                  y.append(0)
              else:
                  x = int(angle)
                  print('value of angle =', x)
                  y.append(x)
              print(y[0])
          x = y[0]
          X = np.linspace(0, x, x + 1)
          print(X)
          Y = (2 + 2 * np.sin(2 * X * m.pi / 180) + 2 * pow(np.sin(X * m.pi / 180), 2)) / (4 * m.sqrt(2))
          trace1 = go.Scatter(x=X, y=Y, marker={'color': 'red', 'symbol': 104, 'size': 10},
                              mode="lines", name='Unit Intensity Curve')
          data = go.Data([trace1])
          layout = go.Layout(title="Polarizer Angle vs Unit Intensity",
                             xaxis={'title': 'Polarizer Angle (Degrees)'},
                             yaxis={'title': 'Unit Intensity (W/m^2)'},
                             width=900)
          figure = go.Figure(data=data, layout=layout)
          plot_div = plot(figure, auto_open=True, output_type='div')
          return render(request, 'forbes.html', context={'plot_div': plot_div})
  
      return render(request, 'forbes.html')
  </code></pre>
  
  <p>here is my urls.py file</p>
  
  <pre><code>from django.urls import path
  from . import views
  
  
  urlpatterns = [
      path('forbes', views.forbes)
      ]
  </code></pre>
  
  <p>So how can i use AJAX to update the plotly plot without page refresh whenever slider value is changed?</p>