web2py how to: Ajax to send dropdown menu's value to action

Question

I have a working dropdown menu, and I can send its value to a function using "submit" button. It's quite clumsy however, as user always has to press the button, wait for the page to load and it refreshes the page so the user loses all other "settings" made on the page. I have understood that ajax would be the solution for this. I read the guide: http://www.web2py.com/books/default/chapter/29/11/jquery-and-ajax#The-ajax-function and tried a few methods, but it never works.

So this is my original working code. Some contents are stripped and altered, but the basics are the same. View demo.html:

<form action="change_dropdown">
    <select name="tables">
            <option value="first_value">first</option>
            <option value="second_value">second</option>
            <option value="third_value">third</option>
    </select>
    <br><br>
    <input type="submit">
</form>

Action:

def change_dropdown():
    if request.vars.tables:
        session.tables = request.vars.tables
    else:
        session.tables = None
        session.main_warning= "Incorrect parameters for function: 'change_dropdown()'."
    redirect(URL('demo'))
    return

Then the original action demo does something with session.tables and so on. But now about turning it to ajax. This is what I want:

<form>
    <select name="tables", onchange="ajax('change_dropdown', [], '');">
            <option value="first_value">first</option>
            <option value="second_value">second</option>
            <option value="third_value">third</option>
    </select>
</form>

I also did this to the action: redirect(URL('demo'), client_side=True) as mentioned in an example. I have no idea why it's needed however.

But I don't know how to send the variable tables to the action. If I write it inside python URL helper, it crashes, because it thinks it's a python variable (where it's actually a JavaScript variable (?)). If I write it inside ajax() function's second parameter, it halts and gives me a weird error in JS console:

Uncaught Error: Syntax error, unrecognized expression: [name=[object HTMLSelectElement]]

If you need more information I can show you full codes for the methods I tried, but I think someone can take it from here.

Gaurav Kalyan · Accepted Answer · 2015-09-28T13:49:23.853

1

You can send the variable as follows:

ajax("{{=URL('change_dropdown')}}",['tables'],':eval')

redirect(URL('demo'), client_side=True) is needed as you want to redirect the function that have sent the ajax request to redirect not 'change_dropdown' to redirect.

EDIT:

<form>
    <select name="tables", onchange="ajax(\"{{=URL('change_dropdown')}}\",['tables'],':eval') ;">
        <option value="first_value">first</option>
        <option value="second_value">second</option>
        <option value="third_value">third</option>
    </select>
</form>

edited Sep 28 '15 at 13:49

answered Sep 26 '15 at 11:31

Gaurav Kalyan

1,897
2
14
21

Change your current ajax function to what I have mentioned above will solve the problem. Are you still getting any error message? – Gaurav Kalyan Sep 28 '15 at 07:28
The problems are that I don't know what to do with quotes (quotes within quotes within quotes) for the first part and I didn't quite understand the latter part. – DiMarzio Sep 28 '15 at 13:26
1

You can use "\" to escape quotes. As I have mentioned in the edit of above post. For latter part, How ajax works? You send a request to function in controller and it send you the response. `client_side=True` is needed as you want to redirect the view that have sent the request not the one that is providing the ajax response. Basically, `client_side=True` send response to view that view will redirect to a particular url whereas if `client_side=False` will just redirect the function that is providing response. I hope now it is clear. – Gaurav Kalyan Sep 28 '15 at 14:01
Thank you, understood. However, the code still doesn't work. If I change the selection, it gives a JS error: "Uncaught SyntaxError: Unexpected token ILLEGAL" and it links to that line with ajax request. – DiMarzio Sep 28 '15 at 16:52
**UPDATE:** Ha! Got it. It was still about the quotes and no matter which ones you tried to escape, either python or javascript screwed it up. But this is what I did: `{{ajax_action = 'change_dropdown'}}` and in the ajax request I replaced `'change_dropdown'` with`ajax_action`. Now I'm off to send an angry letter to whomever decided to make strings start and end with the same character. – DiMarzio Sep 28 '15 at 17:12

web2py how to: Ajax to send dropdown menu's value to action

1 Answers1