title: Ajax, Django, Jquery Model Form
body: <p>Built a successful working ModelForm and its fully functional.</p>
  
  <p>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.</p>
  
  <p>The problem came up when I tried to add <a href="http://www.eyecon.ro/bootstrap-datepicker/" rel="nofollow noreferrer">bootstrap 2 DATE fields</a>.</p>
  
  <p>Using CHECKIN &amp; CHECKOUT values that I have added to my form and it worked.</p>
  
  <p>It required higher version of jquery so I used the recent one 1.9.1.</p>
  
  <p>But when I used it my form is working except 1 little issues when I submit the form </p>
  
  <p>and there not filled out required fields it will show me those fields but SUBMIT button is</p>
  
  <p>disabled. When I use jquery 1.3.2 all is working 100% except the 2 fields for Bootstrap </p>
  
  <p>DATEPICKER that requires higher jquery version.</p>
  
  <p>Input Fields in the Form: Departure &amp; Return are Date Picker Fields</p>
  
  <p>I didnt include the Bootstrap Scripts they are same from the Bootsrap site.</p>
  
  <p>When I use:</p>
  
  <pre><code>&lt;script src="/media/js/jquery/1.9.1.jquery.min.js" type="text/javascript"&gt;&lt;/script&gt;
  </code></pre>
  
  <p>Departure &amp; Return are Date Picker Fields are Working but after submitting it with empty </p>
  
  <p>other fields - it will show you which fields are required but Submit button is disabled.</p>
  
  <p>If I use:</p>
  
  <pre><code>&lt;script src="/media/js/jquery/1.3.2.jquery.min.js" type="text/javascript"&gt;&lt;/script&gt;
  </code></pre>
  
  <p>Form is working with ajax 100% but I cant use Departure &amp; Return are Date Picker Fields</p>
  
  <p>(which give me choice to select date - I have to manually type it).</p>
  
  <p>For reference I used <a href="https://pype.its.utexas.edu/docs/tutorial/unit6.html" rel="nofollow noreferrer">this tutorial</a>.</p>
  
  <p>Look at the Category ModelForm Ajax</p>
  
  <p><strong>My question</strong> is I can I achieve this form to be working on 1.9.1 Jquery Version with also Date</p>
  
  <p>picker Fields that I can choosed from the calendar.</p>
  
  <p>At the bottom I am including screenshots.</p>
  
  <p>Here is the code:</p>
  
  <p>MODELS.PY</p>
  
  <pre><code>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)
  </code></pre>
  
  <p>VIEWS.PY</p>
  
  <pre><code>    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))
  </code></pre>
  
  <p>TEMPLATES:</p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
      // prepare the form when the DOM is ready
      $(document).ready(function() {
          $("#add_cat").ajaxStart(function() {
              // Remove any errors/messages and fade the form.
              $(".form_row").removeClass('errors');
              $(".form_row_errors").html('');
              $("#add_cat").fadeTo('slow', 0.33);
              $("#add_cat_btn").attr('disabled', 'disabled');
              $("#message").addClass('hide');
          });
  
          // Submit the form with ajax.
          $("#add_cat").submit(function(){
              $.post(
                  // Grab the action url from the form.
                  "#add_cat.getAttribute('action')",
  
                  // Serialize the form data to send.
                  $("#add_cat").serialize(),
  
                  // Callback function to handle the response from view.
                  function(resp, testStatus) {
                      if (resp.error) {
                          // check for field errors
                          if (resp.trip_type_error != '') {
                              $("#trip_type_row").addClass('errors');
                              $("#trip_type_errors").html(resp.trip_type_error);
                          }
                          if (resp.company_name_error != '') {
                              $("#company_name_row").addClass('errors');
                              $("#company_name_errors").html(resp.company_name_error);
                          }
                          if (resp.individual_name_error != '') {
                              $("#individual_name_row").addClass('errors');
                              $("#individual_name_errors").html(resp.individual_name_error);
                          }
                          if (resp.phone_error != '') {
                              $("#phone_row").addClass('errors');
                              $("#phone_errors").html(resp.phone_error);
                          }
                          if (resp.email_error != '') {
                              $("#email_row").addClass('errors');
                              $("#email_errors").html(resp.email_error);
                          }
                          if (resp.from_country_error != '') {
                              $("#from_country_row").addClass('errors');
                              $("#from_country_errors").html(resp.from_country_error);
                          }
                          if (resp.to_country_error != '') {
                              $("#to_country_row").addClass('errors');
                              $("#to_country_errors").html(resp.to_country_error);
                          }
                          if (resp.from_city_error != '') {
                              $("#from_city_row").addClass('errors');
                              $("#from_city_errors").html(resp.from_city_error);
                          }
                          if (resp.to_city_error != '') {
                              $("#to_city_row").addClass('errors');
                              $("#to_city_errors").html(resp.to_city_error);
                          }
                          if (resp.departure_date_error != '') {
                              $("#departure_date_row").addClass('errors');
                              $("#departure_date_errors").html(resp.departure_date_error);
                          }
                          if (resp.return_date_error != '') {
                              $("#return_date_row").addClass('errors');
                              $("#return_date_errors").html(resp.return_date_error);
                          }
                          if (resp.number_of_passengers_error != '') {
                              $("#number_of_passengers_row").addClass('errors');
                              $("#number_of_passengers_errors").html(resp.number_of_passengers_error);
                          }
  
                           $("#add_cat").fadeTo('slow', 1);
                           $("#add_cat_btn").attr('disabled', false);
  
                      } else {
                          // No errors. Rewrite the category list.
                          $("#categories").fadeTo('fast', 0);
                          var text = new String();
                          for(i=0; i&lt;resp.quotes.length ;i++){
                              var m = resp.quotes[i]
                              text += "&lt;li&gt;" + m + "&lt;/li&gt;"
                          }
                          $("#categories").html(text);
                          $("#categories").fadeTo('slow', 1);
                          $("#id_trip_type").attr('value', '');
                          $("#id_company_name").attr('value', '');
                          $("#id_individual_name").attr('value', '');
                          $("#id_phone").attr('value', '');
                          $("#id_email").attr('value', '');
                          $("#id_from_country").attr('value', '');
                          $("#id_to_country").attr('value', '');
                          $("#id_from_city").attr('value', '');
                          $("#id_to_city").attr('value', '');
                          $("#id_departure_date").attr('value', '');
                          $("#id_return_date").attr('value', '');
                          $("#id_number_of_passengers").attr('value', '');
                      }
                      // Always show the message and re-enable the form.
                      $("#message").html(resp.message);
                      $("#message").removeClass('hide');
                      $("#add_cat").fadeTo('slow', 1);
                      $("#add_cat_btn").attr('disabled', '');
  
              // Set the Return data type to "json".
              }, "json");
              return false;
          });
  
      });
      &lt;/script&gt;
  
  &lt;div id="content" class="span9" style=""&gt;
  
                              &lt;h1&gt;Request Quote&lt;/h1&gt;
                                 &lt;div id='message'&gt;&lt;/div&gt;
                                 &lt;form id='add_cat' method='post' action='.'&gt;&lt;input type='hidden' name='csrfmiddlewaretoken' value='KblPqgczzMK7skak162xe4aOL6bLot2A' /&gt;
  
  
                                         &lt;div class='form_row' id='trip_type_row'&gt;
  
                                              &lt;div class="span2"&gt;
  
                                                    &lt;label for="id_trip_type"&gt;Trip type&lt;/label&gt;
  
  
                                             &lt;/div&gt;                               
  
                                             &lt;div class="span4"&gt;
  
                                                  &lt;select id="id_trip_type" name="trip_type"&gt;
  &lt;option value="one way" selected="selected"&gt;One Way&lt;/option&gt;
  &lt;option value="round trip"&gt;Round Trip&lt;/option&gt;
  &lt;option value="multi-leg"&gt;Multi-Leg&lt;/option&gt;
  &lt;/select&gt;
  
                                             &lt;/div&gt;
  
                                              &lt;div class="span6"&gt;
  
                                                   &lt;p id='trip_type_errors' class="form_row_errors"&gt;&lt;/p&gt;
  
                                             &lt;/div&gt;
  
  
                                         &lt;/div&gt;
  
                                         &lt;div class='form_row' id='company_name_row'&gt;
  
                                             &lt;div class="span2"&gt;
  
                                                 &lt;label for="id_company_name"&gt;Company name&lt;/label&gt;
  
  
                                             &lt;/div&gt;                               
  
                                             &lt;div class="span4"&gt;
  
                                                  &lt;input id="id_company_name" maxlength="200" name="company_name" type="text" /&gt;
  
                                             &lt;/div&gt;
  
                                             &lt;div class="span6"&gt;
  
                                                  &lt;p id='company_name_errors' class="form_row_errors" style="color: red;"&gt;&lt;/p&gt;
  
                                             &lt;/div&gt;
  
                                         &lt;/div&gt;
  
                                         &lt;div class='form_row' id='individual_name_row'&gt;
  
                                              &lt;div class="span2"&gt;
  
                                                 &lt;label for="id_individual_name"&gt;Individual name&lt;/label&gt;
  
                                              &lt;/div&gt;
  
                                              &lt;div class="span4"&gt;
  
                                                  &lt;input id="id_individual_name" maxlength="200" name="individual_name" type="text" /&gt;
  
                                              &lt;/div&gt;
  
                                              &lt;div class="span6"&gt;
  
                                                  &lt;p id='individual_name_errors' class="form_row_errors"&gt;&lt;/p&gt;
  
                                             &lt;/div&gt;
  
                                         &lt;/div&gt;
  
                                         &lt;div class='form_row' id='phone_row'&gt;
  
                                              &lt;div class="span2"&gt;
  
                                                 &lt;label for="id_phone"&gt;Phone&lt;/label&gt;
  
  
                                              &lt;/div&gt;
  
                                              &lt;div class="span4"&gt;
  
                                                 &lt;input id="id_phone" maxlength="200" name="phone" type="text" /&gt;
  
                                              &lt;/div&gt;
  
                                              &lt;div class="span6"&gt;
  
                                                  &lt;p id='phone_errors' class="form_row_errors"&gt;&lt;/p&gt;
  
                                             &lt;/div&gt;
  
                                         &lt;/div&gt;
  
                                         &lt;div class='form_row' id='email_row'&gt;
  
                                              &lt;div class="span2"&gt;
  
                                                 &lt;label for="id_email"&gt;Email&lt;/label&gt;
  
  
                                              &lt;/div&gt;
  
                                              &lt;div class="span4"&gt;
  
                                                 &lt;input id="id_email" maxlength="200" name="email" type="text" /&gt;
  
                                              &lt;/div&gt;
  
                                              &lt;div class="span6"&gt;
  
                                                  &lt;p id='email_errors' class="form_row_errors"&gt;&lt;/p&gt;
  
                                             &lt;/div&gt;                                   
  
                                         &lt;/div&gt;
  
                                         &lt;div class='form_row' id='from_country_row'&gt;
  
                                              &lt;div class="span2"&gt;
  
                                                 &lt;label for="id_from_country"&gt;From country&lt;/label&gt;
  
  
                                              &lt;/div&gt;
  
                                              &lt;div class="span4"&gt;
  
                                                 &lt;input id="id_from_country" maxlength="200" name="from_country" type="text" /&gt;
  
                                              &lt;/div&gt;
  
                                              &lt;div class="span6"&gt;
  
                                                  &lt;p id='from_country_errors' class="form_row_errors"&gt;&lt;/p&gt;
  
                                             &lt;/div&gt;
  
  
                                         &lt;/div&gt;
  
                                         &lt;div class='form_row' id='to_country_row'&gt;
  
                                              &lt;div class="span2"&gt;
  
                                                 &lt;label for="id_to_country"&gt;To country&lt;/label&gt;
  
  
                                              &lt;/div&gt;
  
                                              &lt;div class="span4"&gt;
  
                                                 &lt;input id="id_to_country" maxlength="200" name="to_country" type="text" /&gt;
  
                                              &lt;/div&gt;
  
                                              &lt;div class="span6"&gt;
  
                                                   &lt;p id='to_country_errors' class="form_row_errors"&gt;&lt;/p&gt;
  
                                             &lt;/div&gt;
  
  
                                         &lt;/div&gt;
  
                                          &lt;div class='form_row' id='from_city_row'&gt;
  
                                              &lt;div class="span2"&gt;
  
                                                 &lt;label for="id_from_city"&gt;From city&lt;/label&gt;
  
  
                                              &lt;/div&gt;
  
                                              &lt;div class="span4"&gt;
  
                                                 &lt;input id="id_from_city" maxlength="200" name="from_city" type="text" /&gt;
  
                                              &lt;/div&gt;
  
                                              &lt;div class="span6"&gt;
  
                                                  &lt;p id='from_city_errors' class="form_row_errors"&gt;&lt;/p&gt;
  
                                             &lt;/div&gt;
  
  
                                         &lt;/div&gt;
  
                                         &lt;div class='form_row' id='to_city_row'&gt;
  
                                              &lt;div class="span2"&gt;
  
                                                 &lt;label for="id_to_city"&gt;To city&lt;/label&gt;
  
  
                                              &lt;/div&gt;
  
                                              &lt;div class="span4"&gt;
  
                                                 &lt;input id="id_to_city" maxlength="200" name="to_city" type="text" /&gt;
  
                                              &lt;/div&gt;
  
                                              &lt;div class="span6"&gt;
  
                                                  &lt;p id='to_city_errors' class="form_row_errors"&gt;&lt;/p&gt;
  
                                             &lt;/div&gt;
  
  
                                         &lt;/div&gt;
  
  
                                         &lt;div class='form_row' id='departure_date_row'&gt;
  
                                              &lt;div class="span2"&gt;
  
                                                 &lt;label for="id_departure_date"&gt;Departure date&lt;/label&gt;
  
  
                                              &lt;/div&gt;
  
                                              &lt;div class="span4"&gt;
  
                                                 &lt;input id="id_departure_date" maxlength="200" name="departure_date" type="text" /&gt;
  
                                              &lt;/div&gt;
  
                                              &lt;div class="span6"&gt;
  
                                                  &lt;p id='departure_date_errors' class="form_row_errors"&gt;&lt;/p&gt;
  
                                             &lt;/div&gt;
  
  
                                         &lt;/div&gt;
  
  
                                         &lt;div class='form_row' id='return_date_row'&gt;
  
                                              &lt;div class="span2"&gt;
  
                                                 &lt;label for="id_return_date"&gt;Return date&lt;/label&gt;
  
  
                                              &lt;/div&gt;
  
                                              &lt;div class="span4"&gt;
  
                                                 &lt;input id="id_return_date" maxlength="200" name="return_date" type="text" /&gt;
  
                                              &lt;/div&gt;
  
                                              &lt;div class="span6"&gt;
  
                                                  &lt;p id='return_date_errors' class="form_row_errors"&gt;&lt;/p&gt;
  
                                             &lt;/div&gt;
  
  
                                         &lt;/div&gt;
  
                                         &lt;div class='form_row' id='number_of_passengers_row'&gt;
  
                                              &lt;div class="span2"&gt;
  
                                                 &lt;label for="id_number_of_passengers"&gt;Number of passengers&lt;/label&gt;
  
  
                                              &lt;/div&gt;
  
                                              &lt;div class="span4"&gt;
  
                                                 &lt;input id="id_number_of_passengers" maxlength="200" name="number_of_passengers" type="text" /&gt;
  
                                              &lt;/div&gt;
  
                                              &lt;div class="span6"&gt;
  
                                                  &lt;p id='number_of_passengers_errors' class="form_row_errors"&gt;&lt;/p&gt;
  
                                             &lt;/div&gt;
  
                                         &lt;/div&gt;
  
                                     &lt;input id="add_cat_btn" type='submit' value="save"&gt;
                                 &lt;/form&gt;
  
  
  
  
                      &lt;/div&gt;&lt;!-- End content --&gt;
  </code></pre>
  
  <p><strong>Screenshots:</strong></p>
  
  <p>These are images with not functional after Submission Form Submit button but Date Picker </p>
  
  <p>Fields are working becasue Jquery 1.9.1 was used:
  Screen 1: 
  <img src="https://i.stack.imgur.com/6jZdT.png" alt="image1"><br></p>
  
  <p>Screen 2:</p>
  
  <p><img src="https://i.stack.imgur.com/cpbBK.png" alt="image2"></p>
  
  <p>This is an image with not functional Date Picker because Jquery 1.3.2 was used and Submit</p>
  
  <p>Button is enabled after submision:</p>
  
  <p><img src="https://i.stack.imgur.com/Lf3I3.png" alt="enter image description here"></p>
  
  <p>Thanks for help.</p>