Jquery Smarty et JSON

Question

service de table

(department_id, nom) Catégorie de table (category_id, department_id, nom)

Je veux mettre en œuvre l'idée que lorsque je change service dans la liste déroulante, toutes les catégories changeront selon à la valeur du département

Il est mon script 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} 

Je veux savoir comment puis-je implenent le code pour la classe Ajax dans le fichier ajax.php retourner JSON

je le fais comme avant, mais rien ne se passe b/ci ne emploient classe

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

Maintenant, je veux utiliser la classe avec AOP pour mettre en œuvre cette idée, aidez-moi plz

Answer 1

Je peux aider à concept et algorithme:

1. Afficher la liste déroulante du département et ajouter une jquery pour gérer l'événement de modification.
2. Charger uniquement les données JSON pour les catégories est bon, mais parfois cela ne fonctionnera pas dans IE et Safari. Un des moyens robustes de le faire est de charger un select complet avec AJAX, puis de remplacer le menu déroulant de la catégorie existante.

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 devront renvoyer des données au format:

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

Assurez-vous que vous mettez la catégorie sélectionnez l'intérieur d'un parent qui ont pas d'autres enfants:

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

Cette méthode travaillera dans les derniers IE, Safari, Google Chrome et Firefox.

Answer 2

Vous devriez être capable d'implémenter ceci avec jQuery Smarty avec son modificateur auto_update. http://www.balupton.com/sandbox/jquery-smarty/demo/