使用jQuery來確定何時Django的filter_horizo​​ntal更改，然後獲取新的數據

Question

我有一個filter_horizo​​ntal選擇器在我的Django管理員有一個產品的類別列表（這是在管理產品頁面）。我想根據在filter_horizo​​ntal框中選擇的類別或類別更改產品更改窗體的外觀。

我想每次將類別從filter_horizo​​ntal的from或section移動到某個段時調用一個函數。

我現在擁有的是：

(function($){ 
$(document).ready(function(){ 

    function toggleAttributeSection(choices) { 
     $.getJSON('/ajax/category-type/', { id: choices}, function (data, jqXHR) { 
      // check the data and make changes according to the choices 
     }); 
    } 

    // The id in the assignment below is correct, but maybe I need to add option[]?? 
    var $category = $('#id_category_to'); 
    $category.change(function(){ 
     toggleAttributeSection($(this).val()); 
    }); 
}); 
})(django.jQuery); 

功能當我移動的類別從左側到右側不會被調用，或反之，則filter_horizo​​ntal的。

我假設$ category.change（）是不正確的，但我不知道filter_horizo​​ntal更改時可能觸發哪些其他事件。另外，我知道在選擇框內有多個選項。我還沒有那麼遠，但我如何確保所有這些都傳遞給函數？

如果任何人都可以指出我正確的方向，我將非常感激。謝謝！

Answer 1

我終於明白了這一點。如果任何人在這個問題上絆倒，這是如何完成的。您需要偵聽Django filter_horizo​​ntal中_from和_to字段上的更改事件，並使用超時來允許Django JavaScript在拖拽_from或_to字段的內容之前完成運行。這裏是爲我工作的代碼：

var $category = $('#id_category_to'); 
$category.change(function(){ 
    setTimeout(function() { toggleAttributeSection(getFilterCategoryIds()) }, 500); 
}); 
var $avail_category = $('#id_category_from'); 
$avail_category.change(function(){ 
    setTimeout(function() { toggleAttributeSection(getFilterCategoryIds()) }, 500); 
}); 

這就是我如何得到_TO字段的內容：

function getFilterCategoryIds() { 
    var x = document.getElementById("id_category_to"); 
    var counti; 
    var ids = []; 
    for (counti = 0; counti < x.length; counti++) { 
     ids.push(x.options[counti].value); 
    } 
    return ids; 
} 

我知道這是一個令人費解的問題和答案。沒有人會經常遇到這種情況，但希望它能幫助別人。

Answer 2

您需要在範圍擴大的SelectBox.redisplay功能，像這樣：

(function() { 
    var oldRedisplay = SelectBox.redisplay; 
    SelectBox.redisplay = function(id) { 
     oldRedisplay.call(this, id); 
     // do something 
    }; 
})(); 

確保應用此選擇框已經頁面，每次一個選擇框刷新（選項移動在被初始化後，過濾器被添加等），你的新功能將被調用。

（代碼Cork提供#jquery提供）