Ajax, Django, Jquery Model Form

Question

성공적으로 작동하는 ModelForm을 완벽하게 구현했습니다.

내 다음 단계는 Ajax를 추가하는 것이 었습니다. 내가 사용한 Jquery는 꽤 오래되었지만 효과가있는 1.3.2 버전입니다.

bootstrap 2 DATE fields을 추가하려고하면 문제가 발생했습니다.

CHECKIN & 내 양식에 추가 한 CHECKOUT 값을 사용하면 효과가있었습니다.

jquery의 상위 버전이 필요하므로 최근의 1.9.1 버전을 사용했습니다.

하지만 난 양식을

를 제출하고 나에게 해당 필드가 표시됩니다 필수 필드가 작성되지하지만 버튼이 비활성화

이다 제출하면 내 양식 1 작은 문제를 제외하고 노력하고 그것을 사용하는 경우. jquery 1.3.2를 사용할 때 부트 스트랩에 대한 2 개의 필드를 제외하고 모두 100 %가 작동합니다.

DATEPICKER에는 jquery 버전이 더 필요합니다. 양식에

입력 필드 : 출발 & 반환 날짜 선택기 필드가

나는 그들이 Bootsrap 사이트에서 동일한 부트 스트랩 스크립트를 포함 didnt가 있습니다.

<script src="/media/js/jquery/1.9.1.jquery.min.js" type="text/javascript"></script> 

출발 & 돌아 선택기 필드는 작업 일 수 있지만 빈

다른 필드와 함께 제출 후 - 그것은 필드가 요구되는 방법을 보여하지만 버튼이 비활성화 제출합니다

내가 사용하는 경우 .

내가 사용하는 경우 : - 내가 수동을해야

<script src="/media/js/jquery/1.3.2.jquery.min.js" type="text/javascript"></script> 

양식 아약스 100 %와 함께 일하고있다하지만 난 출발 & 돌아 가기를 사용하지 못할 것은 나에게 날짜를 선택할 기회를주고

(날짜 선택기 필드입니다 이것을 입력해라).

참고로 나는 this tutorial을 사용했다. 카테고리에서

봐는 ModelForm 아약스

내 질문 내가이 양식은 내가 달력에서 choosed 할 수 또한

피커 필드를 날짜 1.9.1 jQuery를 버전에서 작동하는 것으로 달성 할 수있다 .

하단에는 스크린 샷이 포함되어 있습니다.

모델 : 여기

는 코드입니다.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)) 

템플릿 :

<script type="text/javascript"> 
    // 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<resp.quotes.length ;i++){ 
          var m = resp.quotes[i] 
          text += "<li>" + m + "</li>" 
         } 
         $("#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; 
     }); 

    }); 
    </script> 

<div id="content" class="span9" style=""> 

          <h1>Request Quote</h1> 
           <div id='message'></div> 
           <form id='add_cat' method='post' action='.'><input type='hidden' name='csrfmiddlewaretoken' value='KblPqgczzMK7skak162xe4aOL6bLot2A' /> 


             <div class='form_row' id='trip_type_row'> 

              <div class="span2"> 

                <label for="id_trip_type">Trip type</label> 


              </div>        

              <div class="span4"> 

               <select id="id_trip_type" name="trip_type"> 
<option value="one way" selected="selected">One Way</option> 
<option value="round trip">Round Trip</option> 
<option value="multi-leg">Multi-Leg</option> 
</select> 

              </div> 

              <div class="span6"> 

               <p id='trip_type_errors' class="form_row_errors"></p> 

              </div> 


             </div> 

             <div class='form_row' id='company_name_row'> 

              <div class="span2"> 

               <label for="id_company_name">Company name</label> 


              </div>        

              <div class="span4"> 

               <input id="id_company_name" maxlength="200" name="company_name" type="text" /> 

              </div> 

              <div class="span6"> 

               <p id='company_name_errors' class="form_row_errors" style="color: red;"></p> 

              </div> 

             </div> 

             <div class='form_row' id='individual_name_row'> 

              <div class="span2"> 

               <label for="id_individual_name">Individual name</label> 

              </div> 

              <div class="span4"> 

               <input id="id_individual_name" maxlength="200" name="individual_name" type="text" /> 

              </div> 

              <div class="span6"> 

               <p id='individual_name_errors' class="form_row_errors"></p> 

              </div> 

             </div> 

             <div class='form_row' id='phone_row'> 

              <div class="span2"> 

               <label for="id_phone">Phone</label> 


              </div> 

              <div class="span4"> 

               <input id="id_phone" maxlength="200" name="phone" type="text" /> 

              </div> 

              <div class="span6"> 

               <p id='phone_errors' class="form_row_errors"></p> 

              </div> 

             </div> 

             <div class='form_row' id='email_row'> 

              <div class="span2"> 

               <label for="id_email">Email</label> 


              </div> 

              <div class="span4"> 

               <input id="id_email" maxlength="200" name="email" type="text" /> 

              </div> 

              <div class="span6"> 

               <p id='email_errors' class="form_row_errors"></p> 

              </div>         

             </div> 

             <div class='form_row' id='from_country_row'> 

              <div class="span2"> 

               <label for="id_from_country">From country</label> 


              </div> 

              <div class="span4"> 

               <input id="id_from_country" maxlength="200" name="from_country" type="text" /> 

              </div> 

              <div class="span6"> 

               <p id='from_country_errors' class="form_row_errors"></p> 

              </div> 


             </div> 

             <div class='form_row' id='to_country_row'> 

              <div class="span2"> 

               <label for="id_to_country">To country</label> 


              </div> 

              <div class="span4"> 

               <input id="id_to_country" maxlength="200" name="to_country" type="text" /> 

              </div> 

              <div class="span6"> 

               <p id='to_country_errors' class="form_row_errors"></p> 

              </div> 


             </div> 

             <div class='form_row' id='from_city_row'> 

              <div class="span2"> 

               <label for="id_from_city">From city</label> 


              </div> 

              <div class="span4"> 

               <input id="id_from_city" maxlength="200" name="from_city" type="text" /> 

              </div> 

              <div class="span6"> 

               <p id='from_city_errors' class="form_row_errors"></p> 

              </div> 


             </div> 

             <div class='form_row' id='to_city_row'> 

              <div class="span2"> 

               <label for="id_to_city">To city</label> 


              </div> 

              <div class="span4"> 

               <input id="id_to_city" maxlength="200" name="to_city" type="text" /> 

              </div> 

              <div class="span6"> 

               <p id='to_city_errors' class="form_row_errors"></p> 

              </div> 


             </div> 


             <div class='form_row' id='departure_date_row'> 

              <div class="span2"> 

               <label for="id_departure_date">Departure date</label> 


              </div> 

              <div class="span4"> 

               <input id="id_departure_date" maxlength="200" name="departure_date" type="text" /> 

              </div> 

              <div class="span6"> 

               <p id='departure_date_errors' class="form_row_errors"></p> 

              </div> 


             </div> 


             <div class='form_row' id='return_date_row'> 

              <div class="span2"> 

               <label for="id_return_date">Return date</label> 


              </div> 

              <div class="span4"> 

               <input id="id_return_date" maxlength="200" name="return_date" type="text" /> 

              </div> 

              <div class="span6"> 

               <p id='return_date_errors' class="form_row_errors"></p> 

              </div> 


             </div> 

             <div class='form_row' id='number_of_passengers_row'> 

              <div class="span2"> 

               <label for="id_number_of_passengers">Number of passengers</label> 


              </div> 

              <div class="span4"> 

               <input id="id_number_of_passengers" maxlength="200" name="number_of_passengers" type="text" /> 

              </div> 

              <div class="span6"> 

               <p id='number_of_passengers_errors' class="form_row_errors"></p> 

              </div> 

             </div> 

            <input id="add_cat_btn" type='submit' value="save"> 
           </form> 




        </div><!-- End content --> 

스크린 샷 : 제출 양식은 버튼 만 날짜 선택기

를 제출 한 후 작동하지 않습니다와

이들은 이미지

필드 사용 JQuery와 1.9.1를 변경할 수 없기 작업 : 화면 1 :

화면 2 : 이것은 jQuery를 1.3으로 인해하지 기능 날짜 선택과 이미지입니다

. 2 사용 및 제출

제출 후 버튼 활성화 :

감사합니다.

Answer 1

나는이 문제를 해결할 수 있었다. 문제는 다른 변수를 사용하는 가장 새로운 jquery에서였다. 위 코드를 해답으로 업데이트했습니다.

템플릿 : :

<script type="text/javascript"> 
    // 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) { 
        $(".form_row").removeClass("errors"); 

        $("#trip_type_errors").html(""); 
        $("#company_name_errors").html(""); 
        $("#individual_name_errors").html(""); 
        $("#phone_errors").html(""); 
        $("#email_errors").html(""); 
        $("#from_country_errors").html(""); 
        $("#to_country_errors").html(""); 
        $("#from_city_errors").html(""); 
        $("#to_city_errors").html(""); 
        $("#departure_date_errors").html(""); 
        $("#return_date_errors").html(""); 
        $("#number_of_passengers_errors").html(""); 

        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); 
         } 
        } else { 
         // No errors. Rewrite the category list. 
         $("#categories").fadeTo('fast', 0); 
         var text = new String(); 
         for(i=0; i<resp.quotes.length ;i++){ 
          var m = resp.quotes[i] 
          text += "<li>" + m + "</li>" 
         } 
         $("#categories").html(text); 
         $("#categories").fadeTo('slow', 1); 
         $("#id_trip_type").val(""); 
         $("#id_company_name").val(""); 
         $("#id_individual_name").val(""); 
         $("#id_phone").val(""); 
         $("#id_email").val(""); 
         $("#id_from_country").val(""); 
         $("#id_to_country").val(""); 
         $("#id_from_city").val(""); 
         $("#id_to_city").val(""); 
         $("#id_departure_date").val(""); 
         $("#id_return_date").val(""); 
         $("#id_number_of_passengers").val(""); 
        } 
        // Always show the message and re-enable the form. 
        $("#message").html(resp.message); 
        $("#message").removeClass('hide'); 
        $("#add_cat").fadeTo('slow', 1); 
        $("#add_cat_btn").removeAttr("disabled");//attr('disabled', ''); 

      // Set the Return data type to "json". 
      }, "json"); 
      return false; 
     }); 

    }); 
    </script> 

다음

코드입니다