onChange 이벤트에서 컨트롤러 작업 호출

Question

Yii에 대한 도움이 필요합니다.

텍스트 상자 onChange 이벤트에서 컨트롤러 동작을 호출하려면 어떻게해야합니까?

업데이트 : CActiveForm으로 작성된 양식이 있습니다. 이 양식에는 많은 텍스트 상자가 있습니다. 어떤 값을 변경하면 다른 값은 새로 입력 된 값을 사용하여 공식을 계산하여 업데이트해야합니다.

<tr> 
     <td>Average KW Demand:</td> 
     <td><?php echo $form->textField($lfac_model, 'kw_demand', array('size'=>5));?></td> 
    </tr> 
    <tr> 
     <td>Estimated Load Factor:</td> 
     <td><?php echo $form->textField($lfac_model, 'loadf', array('size'=> 5));?>/td> 
    </tr> 

사용자가 "예상 하중 계수를"변경

는 "평균 KW 수요"값은 수식 결과로 업데이트해야합니다 그래서 내가 뭘하려고하면 다음과 같다. 알아 낸 것은 테이블에 수식을 저장 한 다음 컨트롤러 동작으로 이동하여 특정 수식을 검색하고 새 값을 계산하여 다시보기로 보내는 것입니다. 이것이 이것을 구현하는 가장 좋은 방법인지 확실하지 않습니다.

Answer 1

당신은 원하는 것을하기 위해 CJuiAutoComplete Yii 위젯을 사용할 수 있어야합니다. 기본 데모는 here이고 Yii 문서에는 다른 예제가 있습니다. 자신의 경우에 꼭 알아야 할 주요 사항은 "appendTo"옵션도 지정한다는 것입니다 (위젯에서 사용하는 jQuery autocomplete docs 참조).

기본적으로 "Estimated Load Factor"필드에 위젯을 설정하고 appendTo 속성을 통해 "Average KW Demand"필드를 가리 킵니다.

그리고 당신은 자동 완성 물건을 원하고 간단하게, 당신은 htmlOptions 지금처럼 "loadf"값 "아약스를"속성 사용할 수있는 값을 대체하지 않으려면 :

'ajax' => array(
    'type'=>'POST', //request type 
    'url'=>$this->createUrl('site/ajaxAction'), //url to call 
    'success'=>'function(data) { $(\'#kw_demand\').val(data) }',// function to call onsuccess 
      // "data" is returned data and function can be regular js or jQuery 
) 

참조 : CHtml#ajax-detail 및 jQuery.ajax.

public function actionAjaxAction() { 
    [your data functions...] 
    echo $kw_demand_string; 
    Yii::app()->end() 
} 

Answer 2

텍스트 상자의 onChange 이벤트는 자바 스크립트 이벤트 : 같은 컨트롤러 기능이 보일 것이다, 그래서이 경우는 대부분 일반 텍스트를 반환합니다. 응용 프로그램의 다른 측면에서 살아갑니다.

컨트롤러에서 작업을 호출하려면 AJAX (또는 비동기 호출)을 사용해야합니다. 여기서 아이디어는 기본적으로 해당 작업을 처리하는 경로에 일부 데이터를 게시하는 것입니다. 예를 들어

:

• 은이 경로/페이지가 말 : /product/details => 당신은 자동 완성 옵션이있는 검색 필드 업데이트를 갖고 싶어 ProductController::actionDetails()
• .
• 검색 필드의 onChange 이벤트에서 javascript를 설정하여 컨트롤러의 작업에 필드 값 (현재 입력 된 텍스트)을 게시하는 메소드를 호출합니다.
• 당신은이 경로/페이지 /product/ajaxautocomplete을 설정 =>ProductController:actionAjaxAutocomplete()
• 이 두 번째 작업은 자바 스크립트 비동기 HTTP 요청 (AJAX 호출)에서 게시 된 값에 취해 데이터베이스를 기반으로 가능한 결과의 목록을 반환합니다.
• 그런 다음 자바 스크립트는 반환 값 (일반적으로 XML/JSON, 경우에 따라 HTML)을 받아들이고 클라이언트 측 DOM에 값을 적용합니다.

쉽게이를 위해 jQuery를 사용할 수 있습니다 : 그것은

$.ajax({ 
    type: 'POST', 
    url: '/product/ajaxautocomplete', 
    data: { 'searchPhrase' => searchBox.value }, 
    success: function(data, textStatus, jqXHR) { applyValues(data); }, 
    dataType: 'json' 
});