2011-11-16 10 views
2

在我的解決方案列表中的每個選定元素JavaScript $ .get模板trought控制器。這不是最佳的。有什麼方法可以減少請求嗎?如何DRY模板中的日期字段。也許存在更好的解決方案獲得類似的效果?我已經嘗試jQuery的顯示/隱藏,但隱藏的形式也發送我決定從模板形式。如何通過選擇選項列表來提高動態加載模板的性能或改變方法?

的javascript:

$(document).ready(function() { 
    $('#meeting_type_id').change(function() { 
     var selected = $(this).val(); 
     if(selected==''){ 
      $("#time_form").html(''); 
     }else if(selected=='1' || selected=='2') { 
      $.get('meetings/type_form/once', function(data){ 
       $("#time_form").html(data); 
      }); 
     }else{ 
      $.get('meetings/time_form/many', function(data){ 
       $("#time_form").html(data); 
      }); 
     } 
     return false; 
     // $('#time_form').html("= render (:partial => 'once')"); 
    }); 
}); 

控制器:

def time_form 
    type = params[:id] 
    if type == "once" 
    render :partial => 'once' 
    else 
    render :partial => 'many' 
    end 
end 

模板:

/_once.html.haml/ 

%input{:name => "meeting[from]", :type => "date", :value => "2011-11-17" 

/_many.html.haml/ 

%input{:name => "meeting[from]", :type => "date", :value => "2011-11-17" 
%input{:name => "meeting[to]", :type => "date", :value => "2011-11-17" 

視圖:

= collection_select(:meeting, :type_id, Type.all, :id, :type, :prompt => 'Please select type') 
/generates:/ 
<select id="meeting_type_id" name="meeting[type_id]"> 
    <option value>Please select type</option> 
    <option value="1">once in golf</option> 
    <option value="2">once in pub</option> 
    <option value="3">many in golf</option> 
    <option value="4">many in pub</option> 
</select> 
<div id="time_form"></div> 

回答

1

您只能使用客戶端:

$(document).ready(function() { 
    $('#meeting_type_id').change(function() { 
     var once = '<input type="date" name="meeting[from]" value="2011-11-17"/>'; 
     var many = '<input type="date" name="meeting[to]" value="2011-11-17"/>'; 

     var selected = $(this).val(); 
     if(selected==''){ 
      $("#time_form").html(''); 
     }else if(selected=='1' || selected=='2') { 
      $("#time_form").html(once); 
     }else{ 
      $("#time_form").html(once+many); 
     } 
     return false; 
    }); 
}); 
相關問題