Flask: Why is content of ajax data changing when a variable is defined?

Question

I'm making a flask application. The user submits a form, which is sent to flask. Something is done, then I want to return the results by appending <li> in a <ul>.

@app.route('/')
def index():
    return render_template("index.html")

@app.route('/', methods=['POST'])
def search_form():
    print(request.form)
    x = request.form['id']
    a = Vbulletin(x)

    def result_gen():
        return a.reg_ver()
    result_gen()

    temp = []

    for s in result_gen():
        text = s
        print(text)
        temp.append(text)
    print(temp)

    return render_template("index.html", temp=temp)

This isn't the complete jquery that appends items from the list. But when i define the variable thats the unordered list it changes my post request.

$(document).ready(function(){
   $("#submit").click(function(e){
        e.preventDefault();
        $.ajax({type: "POST",
            url: "/",
            data: ({ id: $("#searchinput").val()},
            const resultList = document.getElementById("resultList")
            //let results =  {{ temp|tojson}};
            success:function(){
                alert("POST was sent.");
            }
        })
  });
});

Without defined 'resultlist', it sends the data in my post request as this:

ImmutableMultiDict([('id', 'monkey')])

But when I define 'resultlist' it sends the data as this:

ImmutableMultiDict([('searchinput', 'monkey')])

So instead of sending "id" its the id of the input on the form. How can I fix this? I'll also include the html.

<!DOCTYPE html>
<html>
    <head>
        <title>UserFind Home</title>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
        <link rel="stylesheet" href="{{ url_for('static', filename='main.css') }}">
        <script type="text/javascript" src="{{ url_for('static', filename='forumsearch.js') }}"></script>
    </head>
    <body>
        <nav>
            <ul id="navlist">
                <h1>Userfind</h1>
                <li><a class="btn" href="#home">Home</a></li>
                <li><a class="btn" href="#contact">Contact</a></li>
                <li><a class="btn" href="#about">About</a></li>
                <form method="POST" name="searchbar">
                    <ul id="navsearch">
                        <li class="search">
                            <input type="text" id="searchinput" name="searchinput" placeholder="Search for User here. Must be atleast 5 characters long.">
                        </li>
                        <li><button type="submit" id="submit" class="btn-default">Submit</button></li>
                    </ul>
                </form>
            </ul>
        </nav>

        <ul id="resultList"></ul>

        <div class="footer">
            <p>&copy;2019 Userfind</p>
          </div>
    </body>
</html>

where you put const resultList = document.getElementById("resultList") would result in javascript not parsing with a syntax error, and therefore that ajax would never run because it wouldn't actually be there — Jaromanda X

Kevin Welch Kevin Welch · Accepted Answer · 2019-09-18T00:22:47

There are a number of things going wrong here.

1) Your ajax call looks wrong.

    $.ajax({type: "POST",
        url: "/",
        data: ({ id: $("#searchinput").val()},
        const resultList = document.getElementById("resultList")
        //let results =  {{ temp|tojson}};
        success:function(){
            alert("POST was sent.");
        }
    })

I'm not sure what you are trying to do with these two lines. Why are you defining a variable inside function parameters? Also, you are mixing vanillaJS with jQuery...

const resultList = document.getElementById("resultList")
//let results = {{ temp|tojson}};

I'm going to take a guess and say that resultList should be defined inside your success function so that you can append to it.

2) You are mixing AJAX and with server side rendering... while this can be done, I imagine this is not what you are trying to do. Generally, AJAX calls are used just to retrieve data (usually in JSON these days), not to retreive templated HTML.

From what I can tell, you should be returning temp from your flask route as JSON and using that data to append a new <li> element using jQuery.

TLDR

You likely need decide if you want to use render_template and load the page again or if you want to make an AJAX call and use jQuery to update the DOM.

It would be well worth your time learning more about client-side vs server-side rendering.

Flask: Why is content of ajax data changing when a variable is defined?

1 Answers