窗體失去後2個AJAX更新

發送POST請求的能力我有一個包含對象的形式：窗體失去後2個AJAX更新

<form method="post" class="object_form" id="event-core-form" action="{% url save_event_core_data event.id %}" enctype="multipart/form-data"> 
    {{ form.as_p }} 
    <p> 
     <input class="object-submit" id="object-data-save" type="submit" value="Save data"> 
    </p> 
</form>

打「提交」按鈕，我跑這個腳本，它通過AJAX，更新數據提交我的表格後並應返回更新的形式，將它插回位：

$("#object-data-save").livequery("click", function(e) { 
    e.preventDefault(); 
    $(this).parents("form:first").ajaxSubmit({ 
     data: {"action": action}, 
     "success": function(data) { 
      data = JSON.parse(data); 
      $("#core-data").html(data["html"]); 
      $("#message").show(); 
      $("#message").fadeIn(400).html('<span>'+data["message"]+'</span>'); 
      setTimeout(function(){ 
       $("#message").fadeOut("slow", function() { 
        $("#message").hide(); 
       }); 

      }, 1500);     
     } 
    }); 
    return false; 
});

這種運行以下功能：

def event_core_data(request, event_id): 
    template_name="management/core_event.html"  
    event = Event.objects.get(pk=event_id) 
    form = EventForm() 

    if request.method == "POST": 
     form = EventForm(instance=event, data=request.POST) 
     message = _("Error saving data") 
     if form.is_valid(): 
      form.save() 
      message = _(u"Data saved.") 

     html = render_to_string(template_name, RequestContext(request, { 
      "form" : form, 
      "event" : event, 
     })) 

     result = simplejson.dumps({ 
      "html" : html, 
      "message" : message, 
     }, cls = LazyEncoder) 

     result = HttpResponse(result) 
     logging.debug(result) 
    else: 
     form = EventForm(instance=event) 
     result = "" 
     try: 
      result = render_to_string(template_name, RequestContext(request, { 
       "form" : form, 
       "event" : event, 
      })) 
     except: 
      pass 

    return result

保存之後，一切都按預期工作。但第三次更新後，我的表單不會插入到父模板中。相反，我被重定向到編輯函數的url，表單被渲染爲一個原始的html。此外，我注意到在螢火蟲，當我被重定向 - 沒有發送POST和我的JavaScript中的虛擬'警報'沒有被解僱。這是顯示初始狀態的功能（如果它的任何幫助）：

def manage_event(request, event_id,): 
    template_name = 'management/edit_event.html' 

    try: 
     event = Event.objects.get(pk=event_id) 
    except DoesNotExist: 
     url = reverse("manage_events") 
     return HttpResponseRedirect(url) 

    return render_to_response(template_name, RequestContext(request, { 
     "core_data" : event_core_data(request, event_id), 
     "event" : event, 
    }))

編輯

下面是測試鏈接到這個項目，在這裏你可以看到發生了什麼事情。 'event_core_data'在成功更新時將request.POST返回到控制檯。

http://ntt.vipserv.org/manage/events/2

我也想知道爲什麼提交後，我的日期選擇控件消失。這些東西以某種方式連接在一起？

EDIT 2

我使用。員額已經嘗試過或阿賈克斯，而不是.ajaxSubmit但沒有任何運氣。

來源

2010-10-29 owca

因此，第二次更新表單不再作爲發佈後發送。這是可能的，任何想法？ – owca 2010-10-29 16:05:32

我強烈建議使用1）Firefox，2）Firebug。啓用Firebug，然後重新加載頁面。查看控制檯以查看*完全*服務器返回的內容。斷點也很有用。 – 2010-10-29 18:21:37

id ='object-data-save'< - 在這裏使用相同的引號：P – 2010-10-29 19:28:10

首先，你做的事情有點奇怪。你使用一個jQuery插件，它應該處理Ajax上的表單提交併重新填充字段。儘管如此，如果成功，您可以用服務器中的HTML代替HTML表單的所有HTML，否定其工作。

這打破你的日曆/時間窗口小部件，因爲你在初始化頁面加載的小工具，告訴他們採取行動的一些頁面元素，你以後更換。

但是，這本身並不打破錶單提交。

首先，如果停止替換表單HTML，則不需要用於附加事件「活」的插件。其次，你並不需要插件，因爲jQuery中內置的live()方法應該可以完成這項工作（也就是說，如果你真的需要這個功能的話）。第三，如果你使用插件並且它們似乎沒有正常工作，請更新到最新版本。您使用的版本不支持jQuery中的html()方法。

的的liveQuery-插件通過重寫任何jQuery的方法，這可能會更新DOM做它的魔力。因此，當程序員調用f.ex，append()時，它會攔截呼叫，爲您調用append()，然後檢查文檔中是否有與您提供的選擇器匹配的新元素或消失元素。您使用的版本不知道html()，因此不會攔截它。

因此，它是第一次在頁面加載時啓動DOM檢查。當返回結果時，事件實際上會附加到新的提交按鈕，因爲調用html()來設置新窗體和完成消息在內部調用截獲的方法。因此，第二次提交按需要工作。但是當第二次調用回來時，內部使用jQuery緩存，而不是調用任何截獲的方法。因此，該事件不會附加到提交按鈕，使其充當常規的表單提交按鈕。

要解決問題，如果沒有明顯的需求，請停止使用實時附加功能進行事件監聽。如果有，請使用內置的或至少更新您的livequery插件。另外，請勿替換整個表單HTML。再次，如果有一個不明顯的原因，每次設置HTML後重新初始化您的日曆小部件。

來源

2010-10-31 02:18:15

我以爲ajaxSubmit只是從窗體獲取數據。 – owca 2010-10-31 21:10:39

窗體失去後2個AJAX更新

回答

相關問題