2011-09-21 11 views
1

jQuery의 양식 플러그인을 사용하려고합니다. JSON 예제 here을 사용하고 있습니다.jQuery 양식 플러그인 및 jQuery DatePicker가 함께 작동하지 않습니다.

jQuery Form Plugin을 사용할 때 어떤 이유로 날짜 표시자가 페이지에 표시되지 않습니다. 내 JQuery와 파일에서 나는있어 다음 ajaxForm이 날짜 선택기와 충돌 어떤 이유로

//start form 
     $output .= '<form id="csf_map_form" action="path-to-file/csf_map_form_handler.php" method="post" >'; 


    //1st datepicker 
      $output .= '<div>'; 
      $output .= '<label for="csf_map_start_date">Start Date:</label>'; 
      $output .= '<div id="csf_map_start_date" style="font-size: 10px;"></div>'; 
      $output .= '</div>'; 

    //2nd datepicker  
      $output .= '<div>'; 
      $output .= '<label for="csf_map_end_date">End Date:</label>'; 
      $output .= '<div id="csf_map_end_date" style="font-size: 10px;"></div>';    
      $output .= '</div>'; 

//radio button group div   
      $output .= '<div style="float: left; width: 150px; margin: auto; padding-left: 20px; ">'; 
      $output .= '<label for="csf_map_group1">Select Offense:</label><br />'; 
      $output .= '<input type="radio" name="csf_map_group1" checked="checked" value="TINY">Tiny</input><br />'; 
      $output .= '<input type="radio" name="csf_map_group1" value="MEDIUM"/>Medium</input><br />'; 
      $output .= '<input type="radio" name="csf_map_group1" value="LARGE">Large</input><br />'; 
      $output .= '</div>'; //end radiobuttons 

      $output .='<input type="submit" value="Submit" />'; 

      $output .= '</form>'; 

: 내 PHP 파일에서

jQuery.noConflict(); 

jQuery(document).ready(function($) { 


    $('#csf_map_form').ajaxForm(function() { 
     dataType: 'json', 
     success: process_json 
    }); 


    function process_json(data) { 
     alert(data.csf_map_offense_group1); 
    } 



    $('#csf_map_start_date').datepicker({ 

     dateFormat : 'mm/dd/yy', 
     yearRange : '2011:2011', 
     changeMonth: true, 
     changeYear: true, 
     defaultDate : new Date(2011, 8-1,1), 
     minDate : new Date(2011, 1-1,1), 
     maxDate : new Date(2011, 8-1, 25) 

    }); 



    $('#csf_map_end_date').datepicker({ 
     dateFormat : 'mm/dd/yy', 
     yearRange : '2011:2011', 
     changeMonth: true, 
     changeYear: true, 
     defaultDate : new Date(2011, 8-1, 25), 
     minDate : new Date(2011, 1-1,1), 
     maxDate : new Date(2011, 8-1, 25) 

    }); 

}); 

는, 형태는 같다. $ ('csf_map_form') .jaxForm 및 process_json 함수를 시작하는 함수를 주석 처리하면 양식의 datepickers가 올바르게 작동합니다. 내가 그 (것)들을 언급하지 않는 경우에 datepickers는 나타나지 않는다. 그러나 제출이 클릭되면 알림이 실행됩니다. 그것은 라디오 버튼에서 선택된 것을 경고합니다.

무슨 일이 벌어지고 있는지에 대한 아이디어가 있습니까? 어떻게 좋은 플레이를 할 수 있을까요? 어떤 오류가 발생합니까?

감사합니다.

+0

사용중인 jQuery 및 jQuery UI의 버전은 무엇입니까? –

답변

2

만세, 알아 냈어.

1) 인라인 데이트 피커를 기본값으로 변경했습니다. 데이트 피커에서 div를 바꿉니다.

2) $ ('# csf_map_form')에 '#'이 누락되었습니다.

3) csf_map_form_handler.php에서 폼의 정보 중 일부만 반환했습니다. 내가 그것을 바꿨을 때, 시작과 끝 날짜와 라디오 버튼의 선택을 되돌려 놓았습니다.

감사합니다.

관련 문제