由ajax生成的formset提交按鈕不起作用

Question

我有一個formset來更新我的模型，並根據搜索查詢顯示來自我的formset的表單。我有一個ajax keyup函數發送post請求，所以我可以生成search_results.html，然後在search.html中傳遞給search_results.html。

現在，如果我動態生成表單，提交按鈕不起作用。如果我放棄搜索並直接將search_results.html的內容傳遞給search.html，那麼它確實有效。

我有兩個視圖，SearchReportView它應該是主要的，SearchReports來處理生成報告。我想我可能只是在這一點上合併它們 - 但它並不能解決我的問題。

此外，我有這個工作之前，當我使用多個窗體，但我不得不切換到formset。

search.html的身體

<div class="container"> 

     <div class="navbar"> 
      <div class="navbarItem"> 
       <a href="{% url 'EnbListView' %}"><img src="{% static 'back.png' %}" width="20px" height="12px" \>Back</a> 
      </div> 
     </div> 

    <div> 
     <h3>Search:</h3> 
     {% csrf_token %} 
     <input type="text" id="search" name="search" /> 
       <span class="button-checkbox"> 
       <button id="mybutton" type="button" class="btn" data-color="primary">Recent</button> 
       <input type="checkbox" class="hidden" name="reports_checkbox" checked /> 
       </span> 
    </div> 

     <div class="normalText" id="search-results"></div> 

</div> 

search_results.html

    {% if reports_and_formset %} 
        <form action="/TP/auto/report/search/" method="post" enctype="multipart/form-data"> {% csrf_token %} 
        {{ formset.management_form }} 
        {% for x, form in reports_and_formset %} 

          <button type="submit" class="button" >Submit</button> 
          {{ form.checking_user }} 
          {{ form.comment }} 
          {% for hidden in form.hidden_fields %} 
           {{ hidden }} 
          {% endfor %} 

        {% endfor %} 
        </form> 
       {% else %} 
        <tr> <td> <center> 
        No results found. 
        </center></td></tr> 
       {% endif %} 

views.py

class SearchReportView(FormView): 

def post(self, request, *args, **kwargs): 
    # form = ReportCommentForm(initial={'comment': ''}) 
    # context = {'form': form} 

    if 'form-TOTAL_FORMS' in request.POST: 

     single_day_enb_reports = SingleDayEnbReport.objects.all() 

     report_form_set = modelformset_factory(SingleDayEnbReport, form=ReportCommentForm, 
               max_num=single_day_enb_reports.count()) 

     formset = report_form_set(request.POST, queryset=single_day_enb_reports) 

     formset.save() 

     return HttpResponseRedirect('/TP/auto/report/search/report_search/') 

# @requires_csrf_token 
def get(self, request, *args, **kwargs): 
    return render(request, 'app/search.html') 


class SearchReports(View): 

def get(self, request, *args, **kwargs): 

    single_day_enb_reports = SingleDayEnbReport.objects.all() 

    report_form_set = modelformset_factory(SingleDayEnbReport, form=ReportCommentForm, max_num=single_day_enb_reports.count()) 
    formset = report_form_set(queryset=single_day_enb_reports) 

    single_day_enb_reports_and_formset = zip(single_day_enb_reports, formset) 
    # context = {'single_day_enb_reports': single_day_enb_reports, 'formset': formset} 
    context = {'reports_and_formset': single_day_enb_reports_and_formset, 'formset': formset} 

    return render(request, 'app/search_results.html', context, context_instance=RequestContext(request)) 

@classmethod 
def calculate_dates(self): #not important 

def post(self, request, *args, **kwargs): 

    if 'form-TOTAL_FORMS' in request.POST: 

     single_day_enb_reports = SingleDayEnbReport.objects.all() 

     report_form_set = modelformset_factory(SingleDayEnbReport, form=ReportCommentForm, 
               max_num=single_day_enb_reports.count()) 

     formset = report_form_set(request.POST, queryset=single_day_enb_reports) 

     # if formset.is_valid(): 
     formset.save() 

     return HttpResponseRedirect('/TP/auto/report/search/report_search/') 

    if 'button_state' in request.POST: 
     search_text = request.POST['search_text'] 
     button_state = request.POST['button_state'] 

     if button_state == 'false': 
      button_state = False 
     else: 
      button_state = True 

     if button_state: 
      now, fit_date = self.calculate_dates() 
      single_day_enb_reports = SingleDayEnbReport.objects.all().filter(
                 Q(last_modification_date__range=[fit_date, now]) & (
                 Q(alarms__contains=search_text)| 
                 Q(enb__contains=search_text)| 
                 Q(creation_date__date__contains=search_text) | 
                 Q(last_modification_date__date__contains=search_text)| 
                 Q(comment__contains=search_text)| 
                 Q(checking_user__name__contains=search_text))) 
     else: 
      single_day_enb_reports = SingleDayEnbReport.objects.all().filter(
                 Q(alarms__contains=search_text)| 
                 Q(enb__contains=search_text)| 
                 Q(creation_date__date__contains=search_text) | 
                 Q(last_modification_date__date__contains=search_text)| 
                 Q(comment__contains=search_text)| 
                 Q(checking_user__name__contains=search_text)) 

     report_form_set = modelformset_factory(SingleDayEnbReport, form=ReportCommentForm, 
                max_num=single_day_enb_reports.count()) 
     formset = report_form_set(queryset=single_day_enb_reports) 

     single_day_enb_reports_and_formset = zip(single_day_enb_reports, formset) 

     context = {'reports_and_formset': single_day_enb_reports_and_formset, 'formset': formset} 
     return render_to_response('app/search_results.html', context, context_instance=RequestContext(request)) 

ajax.js

$('#search').keyup(function(){ 

delay(function(){ 
    if($('input[name=reports_checkbox]:checked').val()) button_state = true 
    else button_state = false 


     $.ajax({ 
      type: "POST", 
      url: "/TP/auto/report/search/report_search/", 
      data: { 
       'button_state' : button_state, 
       'search_text' : $('#search').val(), 
       'csrfmiddlewaretoken' : $("input[name=csrfmiddlewaretoken]").val() 
       }, 
      success: searchSuccess, 
      dataType: 'html' 
     }); 
}, 500); 

}); 
}); 

    function searchSuccess(data, textStatus, jqXHR){ 
    //generated data is put into search-results <div>field in search.html 
    $('#search-results').html(data); 
} 

Answer 1

請更改您此行

$('#search').keyup(function(){ 

與

$(document).on('keyup','#search', function(){