Ajax, Django, Jquery Model Form

Question

Built a successful working ModelForm and its fully functional.

My next step was to add Ajax to it and it also worked out pretty well. The Jquery that I used was 1.3.2 version which is pretty old but it worked.

The problem came up when I tried to add bootstrap 2 DATE fields.

Using CHECKIN & CHECKOUT values that I have added to my form and it worked.

It required higher version of jquery so I used the recent one 1.9.1.

But when I used it my form is working except 1 little issues when I submit the form

and there not filled out required fields it will show me those fields but SUBMIT button is

disabled. When I use jquery 1.3.2 all is working 100% except the 2 fields for Bootstrap

DATEPICKER that requires higher jquery version.

Input Fields in the Form: Departure & Return are Date Picker Fields

I didnt include the Bootstrap Scripts they are same from the Bootsrap site.

When I use:

Departure & Return are Date Picker Fields are Working but after submitting it with empty

other fields - it will show you which fields are required but Submit button is disabled.

If I use:

Form is working with ajax 100% but I cant use Departure & Return are Date Picker Fields

(which give me choice to select date - I have to manually type it).

For reference I used this tutorial.

Look at the Category ModelForm Ajax

My question is I can I achieve this form to be working on 1.9.1 Jquery Version with also Date

picker Fields that I can choosed from the calendar.

At the bottom I am including screenshots.

Here is the code:

MODELS.PY

TRIP_TYPES = (
('one way', 'One Way'),
('round trip', 'Round Trip'),
('multi-leg', 'Multi-Leg'),
)

class Request_Quote(models.Model):
    trip_type = models.CharField(max_length=10, choices=TRIP_TYPES, default='one way')
    company_name = models.CharField(max_length=200)
    individual_name = models.CharField(max_length=200)
    phone = models.CharField(max_length=200)
    email = models.CharField(max_length=200)
    from_country = models.CharField(max_length=200)
    to_country = models.CharField(max_length=200)
    from_city = models.CharField(max_length=200)
    to_city = models.CharField(max_length=200)
    departure_date = models.CharField(max_length=200)
    return_date = models.CharField(max_length=200)
    number_of_passengers = models.CharField(max_length=200)

VIEWS.PY

    def quote(request):
    if request.method == "POST":
        form = Request_QuoteForm(request.POST)

        ## Handle AJAX  ##
        if request.is_ajax():
            if form.is_valid():
                form.save()
                # Get a list of Categories to return
                quotes = Request_Quote.objects.all().order_by('individual_name')
                # Create a dictionary for our response data
                data = {
                    'error': False,
                    'message': 'Request Quote Added Successfully',
                    # Pass a list of the 'name' attribute from each Category.
                    # Django model instances are not serializable
                    'quotes': [q.individual_name for q in quotes],
                }
            else:
                # Form was not valid, get the errors from the form and
                # create a dictionary for our error response.
                data = {
                    'error': True,
                    'message': "Please try again!",
                    'trip_type_error': str(form.errors.get('trip_type', '')),
                    'company_name_error': str(form.errors.get('company_name', '')),
                    'individual_name_error': str(form.errors.get('individual_name', '')),
                    'phone_error': str(form.errors.get('phone', '')),
                    'email_error': str(form.errors.get('email', '')),
                    'from_country_error': str(form.errors.get('from_country', '')),
                    'to_country_error': str(form.errors.get('to_country', '')),
                    'from_city_error': str(form.errors.get('from_city', '')),
                    'to_city_error': str(form.errors.get('to_city', '')),
                    'departure_date_error': str(form.errors.get('departure_date', '')),
                    'return_date_error': str(form.errors.get('return_date', '')),
                    'number_of_passengers_error': str(form.errors.get('number_of_passengers', '')),
                }
            # encode the data as a json object and return it
            return http.HttpResponse(json.dumps(data))

        if form.is_valid():
            form.save()
            return http.HttpResponseRedirect('/request-quote/')
    else:
        form = Request_QuoteForm()
    quotes = Request_Quote.objects.all().order_by('individual_name')
    return render_to_response('quote.html', {'title': 'Request Quote', 'form': form, 'quotes': quotes}, context_instance=RequestContext(request))

TEMPLATES:





                            Request Quote
                               
                               


                                       

                                            

                                                  Trip type


                                                                          

                                           

                                                

                                           

                                            

                                                 

                                           


                                       

                                       

                                           

                                               Company name


                                                                          

                                           

                                                

                                           

                                           

                                                

                                           

                                       

                                       

                                            

                                               Individual name

                                            

                                            

                                                

                                            

                                            

                                                

                                           

                                       

                                       

                                            

                                               Phone


                                            

                                            

                                               

                                            

                                            

                                                

                                           

                                       

                                       

                                            

                                               Email


                                            

                                            

                                               

                                            

                                            

                                                

                                                                              

                                       

                                       

                                            

                                               From country


                                            

                                            

                                               

                                            

                                            

                                                

                                           


                                       

                                       

                                            

                                               To country


                                            

                                            

                                               

                                            

                                            

                                                 

                                           


                                       

                                        

                                            

                                               From city


                                            

                                            

                                               

                                            

                                            

                                                

                                           


                                       

                                       

                                            

                                               To city


                                            

                                            

                                               

                                            

                                            

                                                

                                           


                                       


                                       

                                            

                                               Departure date


                                            

                                            

                                               

                                            

                                            

                                                

                                           


                                       


                                       

                                            

                                               Return date


                                            

                                            

                                               

                                            

                                            

                                                

                                           


                                       

                                       

                                            

                                               Number of passengers

Screenshots:

These are images with not functional after Submission Form Submit button but Date Picker

Fields are working becasue Jquery 1.9.1 was used: Screen 1:

Screen 2:

This is an image with not functional Date Picker because Jquery 1.3.2 was used and Submit

Button is enabled after submision:

enter image description here

Thanks for help.

Radek · Accepted Answer

I managed to solve the problem, the problem was with the newest jquery using different variables. Updated the code above with the answer.

Here is the code:

TEMPLATES:

Ajax, Django, Jquery Model Form

Answers (1)

Related Questions