Question

I have a form that is used to add an item where 2 dropdowns are populated using different database than the database where the form will be submitted. I would like to add AJAX to the drop downs where selecting one item in the first drop down will auto populate data in the 2nd drop down using AJAX. The issue is that I am using the same view for the form to populate the data and its not working even though I m using the is.ajax() call.

Here is my AJAX code:

function get_data(){
//  alert('test');
new Ajax.Request('/abc/abc/add', { 
method: 'POST',
parameters: $H({'type':$('id_data').getValue()},
                            {'csrfmiddlewaretoken':$( "csrfmiddlewaretoken" ).getValue()}),
onSuccess: function(transport) {
    var e = $('id_def')
    if(transport.responseText)
        e.update(transport.responseText)
}
}); // end new Ajax.Request
//alert($( "csrfmiddlewaretoken" ).getValue()); 
}

Here is my view code:

if request.is_ajax():
#if request.is_ajax()
    cur = connections['data'].cursor()
    #auto_type = Auto.objects.filter(type=request.POST.get('type', ''))
    abctype = request.POST.get('type', '')
    SQL = 'SELECT uuid FROM abc_abc where uid  = %s', abctype
    cur.execute(SQL)
    auto_type =cur.fetchone()




    cur = connections['data'].cursor()
    SQL = 'SELECT uuid, name FROM abc_abc where parent_id  = %s', auto_type
    cur.execute(SQL)
    colors = cur.fetchall()
    return render_to_response('abc/add_abc.html', {
            'colors' : colors,
            }, context_instance=RequestContext(request))

Is there anything else that I m missing? Please let me know if you would like me to add some more things from the code…..Please help!!

Answer 1

I got it to work. Seems liked on the js file I was sending the 2nd parameter after the parameter list. Here is the new code:

function get_data(){
new Ajax.Request('/abc/abc/add', { 
method: 'POST',
parameters: $H({'type':$('id_data').getValue(), 
                'csrftoken':$( "csrftoken" ).getValue()
                 }),
onSuccess: function(transport) {
var e = $('id_data1')
if(transport.responseText)
      e.update(transport.responseText)
}

}); // end new Ajax.Request
}

Here is my view:

if request.is_ajax():
    cur = connections['data'].cursor()
    SQL = 'SELECT uuid, name FROM abc_abc where parent_id  = %s'
    auto_type = request.POST.get('type','')
    conv = iri_to_uri(auto_type)
    conv2 = (conv,)
    cur.execute(SQL,conv2)
    colors = dictfetchall(cur)
    return render_to_response('abc/add.html', {
            'colors' : colors,
            }, context_instance=RequestContext(request))

Here is the html obejct:

<table border="0" cellpadding="0" cellspacing="0">
        <tr>{{ form.abc.errors }}</tr>
        <tr>
            <th><label>ABC:</label></th>
            <td><select name="abc" id="id_abc">
  <option value="" selected="selected">---------</option>
 {% for c in colors %}
<option value="{{ c.uuid }}">{{ c.name }}</option>
    {% endfor %}
</select></td>
            <td></td>
        </tr>
    </table>
    <br>