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>

表单正在使用 ajax 100% 但我不能使用出发和返回是日期选择器字段

（这让我可以选择日期 - 我必须手动输入）。

作为参考，我使用了本教程。

查看类别 ModelForm Ajax

我的问题是我可以实现此表单以使用日期为 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)

意见.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>