django - Ajax、Django、Jqueryモデルフォーム

Question

正常に機能するModelFormとその完全に機能するものを構築しました。

私の次のステップはそれにAjaxを追加することでした、そしてそれはまたかなりうまくいきました。私が使用したJqueryは1.3.2バージョンで、かなり古いですが、機能しました。

ブートストラップ2のDATEフィールドを追加しようとしたときに問題が発生しました。

フォームに追加したCHECKINとCHECKOUTの値を使用すると、機能しました。

より高いバージョンのjqueryが必要だったので、最近のもの1.9.1を使用しました。

しかし、私がそれを使用したとき、私がフォームを提出するときの1つの小さな問題を除いて私のフォームは機能しています

必須フィールドに入力されていない場合、それらのフィールドが表示されますが、[送信]ボタンは

無効。jquery 1.3.2を使用すると、Bootstrapの2つのフィールドを除いて、すべてが100％機能しています。

より高いjqueryバージョンを必要とするDATEPICKER。

フォームの入力フィールド：出発と帰りは日付ピッカーフィールドです

Bootsrapサイトからの同じBootstrapスクリプトは含めませんでした。

私が使用するとき：

<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>

フォームはajax100％で動作していますが、Departure＆Returnは日付ピッカーフィールドを使用できません

（日付を選択できます。手動で入力する必要があります）。

参考までに、このチュートリアルを使用しました。

カテゴリModelFormAjaxを見てください

私の質問は、このフォームを達成して、日付も含む1.9.1Jqueryバージョンで動作させることができるかどうかです。

カレンダーから選択できるピッカーフィールド。

下部にスクリーンショットを含めています。

コードは次のとおりです。

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))

テンプレート：

<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>