title: Send data to another django template/view after specific process using ajax
body: <p>I have a page where I load 2 files. After a click to the load button, this page reload to display a major part of the data, allowing the user to modified it. After a click to lunch button, I want to launch the process and I want to send to another page the path of results files to allow the user to download it.</p>
  <p>My problem is after clicking on lunch button and send data to the other page. I have 2 versions :</p>
  <p>The first one, send data to the result page, but I do not find a way to take back in the view the data modified by the user, the ajax seems to be ignored because of the type &quot;summit&quot; for the button launch :</p>
  <pre><code>    &lt;body&gt;
  &lt;section class=&quot;bg-light py-5 border-bottom&quot;&gt;
  
      &lt;div class=&quot;container px-5 my-5 px-5&quot;&gt;
          &lt;div&gt;
              &lt;h1 class=&quot;display-5 fw-bolder mb-2&quot;&gt; Convert to Dose &lt;/h1&gt;
              &lt;br&gt;
          &lt;/div&gt;
          &lt;form id=&quot;formCTD&quot; action=&quot;{% url 'json:convertToDose' %}&quot; method=&quot;POST&quot; enctype=&quot;multipart/form-data&quot;&gt;
              {% csrf_token %}
              
              ##here some fields to modified one of them following 
              &lt;div class=&quot;row gx-5 justify-content-center&quot;&gt;
                  &lt;div class=&quot;col-lg-4 col-xl-4&quot;&gt;
                      {% if factors %}
                          &lt;input name=&quot;img_path&quot; readonly
                              class=&quot;form-control&quot; {{ pathAnalyseForm.img_path }}&gt;
                      {% else %}
                          &lt;input id=&quot;btn-submit-form-jsonfile&quot;
                              class=&quot;btn btn-lg&quot; {{ formImgFile.imgFile }}&gt;
                      {% endif %}
                  &lt;/div&gt;
              &lt;/div&gt;
              
              &lt;div class=&quot;text-center&quot;&gt;
                  &lt;div class=&quot;d-grid&quot;&gt;
                      {% if factors %}
                          &lt;button class=&quot;btn btn-primary btn-lg&quot; id=&quot;launchButton&quot; type=&quot;submit&quot;&gt;
                              Launch
                          &lt;/button&gt;
                      {% else %}
                          &lt;button class=&quot;btn btn-primary btn-lg&quot; id=&quot;submitButton&quot; type=&quot;submit&quot;&gt;
                              Load
                          &lt;/button&gt;
                      {% endif %}
  
                  /div&gt;
              &lt;/div&gt;
          &lt;/form&gt;
      &lt;/div&gt;
  &lt;/section&gt;
  &lt;/body&gt;
  </code></pre>
  <p>And the js block :</p>
  <pre><code>    &lt;script type=&quot;text/javascript&quot;&gt;
      $(document).ready(function () {
          $(&quot;#launchButton&quot;).on('submit', function(e) {
              e.preventDefault();
              var form = $(&quot;#formCTD&quot;).get(0) //recup en html
              // Est-ce que le formulaire est valide ?
              console.log(&quot;valid? &quot;)
              if (form.checkValidity()) {
                  console.log(&quot;!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! &quot;)
                  nam = $(&quot;input[name='img_path']&quot;).val()
                  json = $(&quot;input[name='json_path']&quot;).val()
                  console.log(nam)
                  data = {&quot;img_path&quot; : nam,
                          &quot;json_path&quot;: json}
                  console.log(&quot;bef ajax&quot;)
                  $.ajax({
                      url: &quot;/filmchromique/convertToDose/&quot;,
                      type: &quot;POST&quot;,
                      data: data,
                      beforeSend: function (xhr, settings) {
                          xhr.setRequestHeader(&quot;X-CSRFToken&quot;, $('input[name=&quot;csrfmiddlewaretoken&quot;]').val());
                      },
                      success: function (response) {
                          console.log(&quot;ok&quot;)
                      },
                      error: function(xhr, status, error) {
                          alert(xhr.responseText);
                      }
                  })
                  console.log(&quot;after ajax&quot;)
  
              }
          });
      });
  
  &lt;/script&gt;
  </code></pre>
  <p>And the view :</p>
  <pre><code>def launchCtd(request):
  
  if request.method == 'POST':
      
      #2 after click load
      if bool(request.FILES.get('calibrationFile', False)) == True and bool(request.FILES.get('imgFile', False)) == True :
  
          #do some test ok
              context = {
                  'factors': True,
                  'factorsCalib': factorsCalib,
                  'formCtd': formCtd,
                  'formJsonFile': formJsonFile,
                  'formImgFile': formImgFile,
                  'pathAnalyseForm': pathAnalyseForm,
                  'doseRect': doseRect,
                  'ctrlRect': ctrlRect,
              }
              return render(request, 'convertToDose.html', context)
  
  
  
      after click lunch
      else:
          if request.is_ajax:
              print (&quot;here&quot;)#check
          img_path = request.POST.get(&quot;img_path&quot;)
          doseRectStr = request.POST.getlist('form[]')
          json_pactrlRectth = request.POST.get(&quot;json_path&quot;)
          method = request.POST.get(&quot;analyse_type&quot;)
          if method == 'rb':
              #init var
          if method == 'multi':
              #init var
          img_out_path, json_pactrlRectth = functionTOLaunch()
          context = {
              'filename': img_out_path,
              'protocol_file': json_pactrlRectth,
          }
          return render(request, 'result.html', context)
  #1 load init 
  else:
      formCtd = CtdForm()
      formJsonFile = JsonFileForm()
      formImgFile = ImgFileForm()
      context = {
          'factors': False,
          'formCtd': formCtd,
          'formJsonFile': formJsonFile,
          'formImgFile' : formImgFile,
      }
      return render(request, 'convertToDose.html', context)
  </code></pre>
  <p>and the result page is a basic TemplateView.</p>
  <p>In this first case, console.log in the ajax are not printed, I do not understand why and I supposed the function is not called (and so the ajax part)</p>
  <p>in the second version, views are identical but I modified this on the html :</p>
  <pre><code>&lt;button class=&quot;btn btn-primary btn-lg&quot; id=&quot;launchButton&quot; type=&quot;button&quot;&gt;
  Launch&lt;/button&gt;
  </code></pre>
  <p>and this in the js part :</p>
  <pre><code>$(&quot;#launchButton&quot;).on('click', function(e) {....}
  </code></pre>
  <p>Data are sended to the view, I can read it but when I do the render to display the result page with out process data, nothing append... I supposed I have to implement something in the succes ajax part, but I do not understand what I have to do. I supposed I have to implement a new ajax request, to send the new context to the result page but how I take back the context sended by the render in the success ajax ... I'am totaly new and lost on this tech</p>
  <p>Thanks for reading :)</p>