title: Running python file on HTML button click (Django)
body: <p><strong>Relevant information:</strong></p>
  
  <p>1) First post on here, go easy.</p>
  
  <p>2) I'm a noob.</p>
  
  <p>3) Trying to learn python/Django.</p>
  
  <p><strong>What I'm trying to do:</strong></p>
  
  <p>1) Create an english -> pig latin translator (written in python) and have it work in browser.</p>
  
  <p><strong>How I want it to work:</strong></p>
  
  <p>1) User clicks "translate" button, which then uses my existing python function to translate their input.</p>
  
  <p>2) The translation is then displayed below the input.</p>
  
  <p><strong>What I've done so far:</strong></p>
  
  <p>1) Created .py file that successfully translates english -> pig latin in the console.</p>
  
  <pre><code>def pigLatin(sentence):
  translation = " "
  for word in sentence.split():
      if word[0] in "aeiou":
          translation += word + "yay "
      if word[0] and word[1] not in "aeiou":
          translation += word[2:] + word[0:2] + "ay"
          print("hai")
      else:
          translation +=  word[1:] + word[0] + "ay "
  return translation
  
  sentence = input("Enter word/sentence you want translated to pig latin below: ")
  
  print(pigLatin(sentence))
  </code></pre>
  
  <p>2) Used Jinja/added some HTML and bootstrap (please see below)</p>
  
  <p><a href="https://i.stack.imgur.com/UowLb.png" rel="nofollow noreferrer">What it looks like in browser</a></p>
  
  <p>3) Created a Django project, and installed my pig latin app, my folders are structured as so:</p>
  
  <pre><code>--mysite
  |
  |--pigLatinApp
  |----templates
  |------pigLatinApp
  |--------home.html
  |--------header.html
  </code></pre>
  
  <p>3) Attempted to use Ajax to get my button working, my HTML files and views.py are as follows:</p>
  
  <p><strong>header.html</strong></p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
      &lt;meta charset="UTF-8"&gt;
      &lt;meta name="viewport" content="width=device-width,initial-scale=1"&gt;
      &lt;title&gt;Pig Latin Translator&lt;/title&gt;
      {% load staticfiles %}
      &lt;link rel="stylesheet" href="{% static 'css/bootstrap.min.css' %}" type="text/css"&gt;
  &lt;/head&gt;
  &lt;body class="body"&gt;    
  
  &lt;section id="translatorSection"&gt;
  &lt;!------------------Log Sum Container--------------------------&gt;
      &lt;div class="container" id="translatorContainer"&gt;
          {% block content %}
          {% endblock %}
      &lt;/div&gt;           
  &lt;/section&gt;
  &lt;script src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.9.0.min.js"&gt;
  &lt;/script&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p><strong>home.html</strong></p>
  
  <pre><code>{% extends "pigLatinApp/header.html" %}
  
  {% block content %}
  &lt;div class="row"&gt;
      &lt;div class="col-md-6"&gt;
          &lt;form&gt;
              &lt;h3&gt;Pig Latin Translator&lt;/h3&gt;
                  &lt;p&gt;Enter below what you want translated!&lt;/p&gt;
                  &lt;input type="string" class="form-control" placeholder="Type what you want translated here!" id="inputSumA"&gt;
                  &lt;button id="translateToPig" class="btn btn-success form-control"&gt;Translate&lt;/button&gt;
                  &lt;div id="displayTranslation"&gt;
                      &lt;p&gt;{{ output }}&lt;/p&gt;
                  &lt;/div&gt; 
          &lt;/form&gt;     
      &lt;/div&gt;   
  &lt;/div&gt;
  &lt;script&gt;
  $("#translateToPig").click(function() {
      $.get("/output/", function(data) {
          $("#displayTranslation").html(data);
      }, "html");
  });
  &lt;/script&gt;
  
  {% endblock %}
  </code></pre>
  
  <p><strong>views.py</strong></p>
  
  <pre><code>from django.shortcuts import render
  from django.http import HttpResponse
  
  def index(request):
      return render(request, 'pigLatinApp/home.html')
  
  def output(request):
      if request.is_ajax():
          py_obj = pigLatinTranslator.test_code(10)
          return render(request, 'pigLatinApp/output.html', {'output': py_obj.a})
  </code></pre>
  
  <p><strong>What actually happens when I click the button:</strong></p>
  
  <p>1) Nothing... The page seems to refresh.</p>
  
  <p>Any and all help would be appreciated, cheers!</p>