How are script.js and application.py linked?

Question

Question

Why am I able to pipe variables from my database into my script.js file? I was able to pipe in "{{place_name}}, {{admin_name1}}, {{postal_code}}".

script.js

// configure typeahead
    $("#q").typeahead({
        highlight: false,
        minLength: 1
    },
    {
        display: function(suggestion) { return null; },
        limit: 10,
        source: search,
        templates: {
            suggestion: Handlebars.compile(
                "<div>" +
                "{{place_name}}, {{admin_name1}}, {{postal_code}}" +
                "</div>"
            )
        }
    });

Are the files linked b/c of JS.Glue in either index.html or application.py?

To link databases, python, javascript, and html together is important for future projects. Please help me.

Answer 1

1. Javascript gets JSON from URL

The javascript file, script.js, uses jQuery's method, $.getJSON, to get JSON files. The first argument in $.getJSON, is a URL which will return the JSON file.

2. Application.py sends JSON after GET request

CS50's mashup application, application.py, sends JSON files when it receives GET requests via /search?q=query and /artciles?geo=query. When one of these URL's are passed into .getJSON(), the returned JSON data can be accessed from the Javascript file, script.js.

3. User sends query

The URLs above need to include actual queries in place of "query" (e.g. /search?q=02138 to search for Cambridge, MA). To append the correct query, script.js needs to get the input value the index.html file.

4. Javascript finds query in HTML input

The Javascript, script.js, can directly pull the query by utilizing the input's id (i.e. id=q in html, and #q javascript). When script.js uses the getElementById() method, or $() for short, then it will have access to the value from the input field.

5. Flask-JSGlue connects front and back-end

To append this specific query to the end of the URL, the application utilizes Flask-JSGlue, an API which links the front-end with Flask backend. Flask-JSGlue is a "src" for the index.html file and is imported to application.py. Once it is included, script.js is able to use back-end Flask methods in the front-end Javascript.

index.html

   <!-- http://stewartjpark.com/Flask-JSGlue/ -->
   {{ JSGlue.include() }}

application.py

  from flask_jsglue import JSGlue

6. Flask appends query to GET

In this case, script.js invokes the Flask.url_for() method in to append the query from the index.html input id=q, to the end of the /search?q=query or /article?geo=query. The .url_for() method was specifically created to do this.

script.js

    $.getJSON(Flask.url_for("articles"), parameters)

Summary

In summary, .getJSON gets a JSON. The JSON is returned from the Flask application, application.py. Script.js is able to append the proper query to the URL in .getJSON, because of Flask-JSGlue and Flask.url_for().