3

I'm trying to figure out how to use jQuery AJAX with Python's Bottle module.

Here is my initial attempt but it isn't working and I'm really hitting a wall (been programming all day and my brain is a bit fried):

    from bottle import route, request, run, get

@route('/form')
def construct_form():
    return '''

<!DOCTYPE html>
<html>
<head>
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function() {
            $('form').submit(function(e) {
                $.ajax({
                    type: 'POST',
                    url: '/ajax',
                    data: $(this).serialize(),
                    success: function(response) {
                        $('#ajaxP').html(response);
                    }
                });
                e.preventDefault();
            });
        });
    </script>
</head>
<body>
    <form method="POST" action="/ajax">
        <input id="ajaxTextbox" name="text" type"text" />
        <input id="ajaxButton" type="button" value="Submit" />
    </form>
    <p id="ajaxP">Nothing to see here.</p>
</body>
</html>

    '''

@route('/ajax', method='POST')
def ajaxtest():
    theText = request.forms.text
    if theText:
        return theText
    return "You didn't type anything."

run(host = 'localhost', port = '8080')

Basically, what I want to be able to do is enter text into the textbox, click the button, and have the innerHTML of "ajaxP" change to the entered text.

No errors, it just doesn't do anything when I push the button.

Any help?


SOLVED: The form button needs to be of type "submit", not "button". Facepalm.

2
  • What is the error? Open up the developer console in eg Chrome to find it Oct 27, 2012 at 8:28
  • Whoops, sorry. Failed to load resource: Resource failed to load file:///F:/ajax
    – Djentleman
    Oct 27, 2012 at 8:33

2 Answers 2

2

$("#ajaxP").load("/ajax", ... sends a GET (not a POST) request to /ajax and replaces the content of #ajaxP with the response HTML.

You can fix your problem by changing method='POST' to method='GET' in your Python code.

Or you can fix your JS by preventing the form submit and sending an AJAX request instead:

$(document).ready(function() {
    $('form').submit(function(e) {
        $.ajax({
            type: 'POST',
            url: '/ajax',
            data: $(this).serialize(),
            success: function(response) {
                $('#ajaxP').html(response);
            }
        });

        e.preventDefault();
    });
});​
9
  • Nope, that didn't fix it. Still getting the 404 resource didn't load error. And how would I go about using POST instead of GET?
    – Djentleman
    Oct 27, 2012 at 8:35
  • I think this would work as far as the HTML/JS side of things, but I'm still getting the Failed to load resource: Resource failed to load file:///F:/ajax error that I believe is caused by Bottle.
    – Djentleman
    Oct 27, 2012 at 8:38
  • @Djentleman: I edited the code multiple times. Does the JS code that you use match what I have in my answer?
    – Blender
    Oct 27, 2012 at 8:39
  • It sure does. Again, I think the problem is with Bottle. AJAX isn't finding "/ajax".
    – Djentleman
    Oct 27, 2012 at 8:41
  • Your JS error message is odd. How are you accessing this webpage? Are you visiting http://localhost:8080/form? You shouldn't have a file:/// URL. Also, turn on debug mode
    – Blender
    Oct 27, 2012 at 8:47
0

Please modify the type of the form button to type= "submit"and not "button".

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.