django에서 jquery를 최적화하는 방법

아약스 및 jquery 개념을 사용하여 세 번째 목록 상자에서 값을 실제로 동적으로 생성하는 다음 코드를 수행했습니다. Thoug 작동, 나는 그것을 최적화해야합니다. 아래는 지금 작업하고있는 코드입니다.django에서 jquery를 최적화하는 방법

<html> 
<head> 
    <title>Comparison based on ID Number</title> 
    <script src="http://code.jquery.com/jquery-latest.js"></script>  
</head> 
<body> 
    {% if form.errors %} 
     <p style="color: red;"> 
      Please correct the error{{ form.errors|pluralize }} below. 
     </p> 
    {% endif %} 
    <form action="/idnumber/" method="post" align= "center">{% csrf_token %}   
     <p>Select different id numbers and the name of the <b> Measurement Group </b>to start the comparison</p>   
     <table align = "center"> 
     <tr> 
      <th><label for="id_criteria_1">Id Number 1:</label></th> 
      <th>  {{ form.idnumber_1 }}   </th> 
     </tr> 
     <tr> 
      <th><label for="id_criteria_2">Id Number 2:</label></th> 
      <th>  {{ form.idnumber_2 }}    </th> 
     </tr> 
     <tr> 
      <th><label for="group_name_list">Group Name:</label></th> 
      <th><select name="group_name_list" id="id_group_name_list"> 
      <option>Select</option>   
      </select> 
      </th> 
     </tr> 
     <script> 
     $('#id_idnumber_2').change(
     function get_group_names() 
     { 
      var value1 = $('#id_idnumber_1').attr('value'); 
      var value2 = $(this).attr('value');   
      alert(value1); 
      alert(value2); 
      var request = $.ajax({ 
       url: "/getGroupnamesforIDnumber/", 
       type: "GET", 
       data: {idnumber_1 : value1,idnumber_2 : value2},    
       dataType: "json",    
       success: function(data) { 
        alert(data); 
        var myselect = document.getElementById("group_name_list"); 
        document.getElementById("group_name_list").options.length = 1; 
        var length_of_data = data.length; 
        alert(length_of_data); 
        try{   
         for(var i = 0;i < length_of_data; i++)     
         { 
          myselect.add(new Option(data[i].group_name, "i"), myselect.options[i]) //add new option to beginning of "sample" 
         } 
         } 
         catch(e){ //in IE, try the below version instead of add() 
          for(var i = 0;i < length_of_data; i++) 
          { 
           myselect.add(new Option(data[i].group_name, data[i].group_name)) //add new option to end of "sample"       
          }     
         }    
     } 
     }); 
     }); 
     </script> 

     <tr align = "center"><th><input type="submit" value="Submit"></th></tr> 
     </table>   
    </form> 
</body> 
</html>

모든 것이 잘 작동하지만 내 코드에는 약간의 문제가 있습니다. (즉) 내 아약스 함수는 선택 목록 2 (예 : 'id_number_2')에 변경 사항이있을 때만 호출합니다. 나는 그것이 어떤 방식 으로든 호출하도록하고 싶습니다. 상자를 선택하면 세 번째 목록 상자가 자동으로 업데이트됩니다.

사람은 아약스 변경 기능을 트리거하려면 가능한 논리적 솔루션

출처

2012-09-03 sankar

와 함께이 날 도와 주실 수 있다면 두 개의 목록 상자의 변경 사항.

변화 :

$('#id_idnumber_2').change(

에

$('select[id^="id_idnumber"]').change(

출처

2012-09-03 09:30:56 shiva

$('#id_idnumber_2, #id_idnumber_1').live('change', function(){ 
function get_group_names() 
    { 
    // Your code here 
    } 
});

출처

2012-09-03 09:36:41

django에서 jquery를 최적화하는 방법

답변

관련 문제