Question

I’m following the snippet here to implement an AJAX Form in Django. However, IE8 prompts me to download the javascript response when I click “submit”, rather than displaying it on the page!

Anything I could be doing wrong (works fine in FF/Chrome!)?

Some snippets…

View:

def subscribe(request, xhr="NA"):
if request.method == 'POST':
    form = CreateSubscribeForm(request.POST)

    # Validate the form:
    clean = form.is_valid()

    # Make some dicts to get passed back to the browser
    rdict = {'bad':'false'}
    if not clean:
        rdict.update({'bad':'true'})
        d={}
        # This was painful, but I can't find a better way to extract the error messages:
        for e in form.errors.iteritems():
            d.update({e[0]:unicode(e[1])}) # e[0] is the id, unicode(e[1]) is the error HTML.
        # Bung all that into the dict
        rdict.update({'errs': d  })
    else:
        form_email = form.cleaned_data['email']
        subscriber = Subscriber(email=form_email)
        subscriber.save()

    if xhr=="xhr":
        # Ajax request.
        # Make a json whatsit to send back.
        json = simplejson.dumps(rdict, ensure_ascii=False)
        # And send it off.
        return HttpResponse(json, mimetype='application/javascript')
    else:
        return render_to_response('holdingpage/holdingpage.html',
                                    {'form': form}, context_instance=RequestContext(request))

HTML:

<form enctype="multipart/form-data" action="{% url subscribe None %}" method="POST" id="subscribe_form">    
            {% csrf_token %}
            <label for="id_email" class="inline infield" style="position: absolute; left: 0px; top: 0px; ">Enter your email address...</label>
            {{ form.email }}
            <button type="submit" id="subscribe_button">Submit</button>
</form> 


<script type="text/javascript">
jQuery(document).ready(function() {

    var options = { 
        target:        '#basic-modal-content',   // target element(s) to be updated with server response 
        beforeSubmit:  showRequest,  // pre-submit callback 
        success:       showResponse,  // post-submit callback 

        // other available options: 
        url:       '{% url subscribe "xhr" %}',         // override for form's 'action' attribute 
        //type:      type        // 'get' or 'post', override for form's 'method' attribute 
        dataType:  'json',        // 'xml', 'script', or 'json' (expected server response type) 
        //clearForm: true        // clear all form fields after successful submit 
        //resetForm: true        // reset the form after successful submit 

        // $.ajax options can be used here too, for example: 
        //timeout:   3000 
    }; 

    //$('#email_field').focus(email_focus).blur(email_blur);
    //$('#subscribe_form').bind('submit', subscribe_submit);

    // bind to the form's submit event 
    $('#subscribe_form').ajaxForm(options); 

});

Answer 1

Change your mimetype from this line

return HttpResponse(json, mimetype='application/javascript')

to ‘text/javascript’. Or you could also set in your server’s configuration to display the contents of ‘application/javascript’ files instead of downloading it.