Jquery с Smarty и JSON

Question

таблица отделов (department_id, название) категории таблицы (category_id, department_id, имя)

Я хочу реализовать идею, что, когда я изменить отдел в раскрывающемся списке, все категории будет меняться в зависимости к значению отдела

Это моя JQuery скрипт

{literal} 
<script type="text/javascript"> 
$(document).ready(function(){ 
    $('#department').change(function() { 
    var departmentVal = $(this).val(); 
    $("#category option").remove(); 
    $.getJSON("ajax.php",{departmentId: $(this).val(), dataType: "json", ajax: 'true'}, 
     function(j){ 
     var options = ''; 
      for (var i = 0; i < j.length; i++) { 
      options += '<option value="' + j[i].category_id + '">' + j[i].name + '</option>'; 
      } 
     $("#category").html(options); 
    }) 
    }); 
}); 
</script> 
{/literal} 

Я хочу знать, как я могу implenent код для класса Ajax в файле ajax.php вернуть JSon

Я делаю это, как это раньше, но ничего не произойдет б/CI не используют класс

$category= array(); 
while($grab = $db->fetch_array($result)) { 
    $category[] = array('optionValue' => $grab['category_id'], 'optionDisplay' => $grab['name']); 
} 
echo json_encode($category); 

Теперь я хочу использовать класс с PDO реализовать эту идею, помочь мне плз

Answer 1

Я могу помочь с концепция и алгоритм:

1. Отобразить раскрывающийся список отдела и добавить jquery для обработки события изменения.
2. Загрузить только данные JSON для категорий хорошо, но иногда это не работает в IE и сафари. Один из надежных способов сделать это - загрузить полный select с AJAX, а затем заменить раскрывающийся список существующей категории.

jQuery(function($){ 
    $('#department').change(function() { 
    var departmentVal = $(this).val(); 
    var cat_parent = $("#category").parent(); 
    cat_parent.html("Loading..."); 
    $.get("category_select.php", 
      {departmentId: departmentVal}, 
      function(data){ 
      cat_parent.html(data); 
      }) 
    }); 
});

category_select.php нужно будет возвращать данные в формате:

<select id="category"> 
    <option>...</option> 
</select> 

Убедитесь, что вы поместили в категорию выбора внутри одного из родителей, у которых нет других детей:

<span> 
    <select id="category"> 
    <option>Select a department first</option> 
    </select> 
</span> 

Этот метод будет работать в последних IE, Safari, Google Chrome и Firefox.

Answer 2

Вы должны быть в состоянии реализовать это с помощью jQuery Smarty с его модификатором auto_update. http://www.balupton.com/sandbox/jquery-smarty/demo/