SilverStripe에서 자바 스크립트 사용하기 2.4.7

Question

저는 DataObjectManager와 함께 SilverStripe 2.4.7을 사용하고 있습니다. 팝업에 대한 내 자신의 사용자 지정 유효성 검사를 추가하려고하지만 이상한 일이 계속 발생합니다. 내 자신의 Javascript 클래스를 추가하면 팝업에서 날짜 선택 도구가 작동을 멈 춥니 다. 내가 추가하는 자바 스크립트가 데이터 선택 도구에 적용되지 않았기 때문에 이유를 알 수 없습니다.

내가이 다른 팝업에서 잘 작동했다. 내 자신의 자바 스크립트 클래스를 추가 할

function getRequirementsForPopup() { 
     Requirements::javascript('mysite/code/js/jquery.js'); 
     Requirements::javascript('mysite/code/js/validation.js'); 
    } 

를 사용하고 있지만 하나는 날짜 선택기를 가지고 있지 않았다. 나는 CMS에 사용자 정의 Javascript를 추가하는 것이 아무런 문제가 아니므로 DataObjectmanager 또는 Date picker의 Javascript와 충돌하는지 궁금합니다.

누구든지 저에게 제공 할 수있는 조언을 주시면 감사하겠습니다. SilverStripe에서 자바 스크립트에 대한 다른 게시물을 보았지만 여기에서 무슨 일이 일어나고 있는지는 설명하지 않았습니다.

감사합니다.

Answer 1

dataobject_manager는 자체 jquery 파일을로드합니다. 자신의 파일을 추가 할 때 dataobject_manager의 기존 파일과 충돌합니다.

방화 광에서로드하는 라이브러리를 확인할 수 있습니다. '스크립트' '인라인'에

클릭에, 그래서

1. 열기 불을 지르고
2. 클릭을하기 위해, 드롭 다운 표시됩니다. jq를 입력하면 jq 이름을 포함하는 모든 파일이 표시됩니다. 무엇이로드되고 있는지 알려줍니다.

이제로드 된 JQuery를 사용하려면 유효성 검사 코드가있는 사용자 정의 파일을 추가하십시오. 당신이 당신의 자신을 사용할 계획 그렇지 않으면, 여기에 사용자 정의 시간 선택기 (http://trentrichardson.com/examples/timepicker/)

• 가 먼저 표시하는 방법을 예입니다, 당신은 dataobject_manager에서/중지 블록 JQuery와 파일이 있습니다. getRequirementsForPopup() 함수에서 이와 비슷한 것입니다. 참고 :로드하는 파일을 파이어 버그 (firebug)에서보고 난 후 어떤 파일이로드되고 어떤 파일을 비활성화 할 것인지에 따라 다릅니다.

  requirements :: block ("http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.1/jquery-ui.min.js"); 요구 사항 :: 블록 ("dataobject_manager/javascript/dom_jquery_ui.js"); requirements :: block ("sapphire/thirdparty/jquery-ui/jquery-ui-1.8rc3.custom.js"); requirements :: block ("dataobject_manager/javascript/dataobject_manager.js"); ' 요구 사항 :: 블록 ("dataobject_manager/javascript/dataobject_manager_popup.js");

• 그런 다음, 당신은 당신의 자신의 JQuery와 파일

  요구 사항 : 자바 스크립트를 포함해야합니다 ('azeem/자바 스크립트/JQuery와 - UI를/JS/JQuery와-1.7.2.min.js'); 요구 사항 :: javascript ('azeem/javascript/jquery-ui/js/jquery-ui-1.8.23.custom.min.js'); 요구 사항 :: javascript ('azeem/javascript/timepicker/jquery-ui-timepicker-addon.js'); 요구 사항 :: javascript ('azeem/javascript/timepicker/azeem-timepicker.js ');
  요구 사항 :: css ('azeem/javascript/jquery-ui/css/smoothness/jquery-ui-1.8.23.custom.css'); 요구 사항 : css ('azeem/css/timepicker/jquery-ui-timepicker-addon.css');

여기 azeem-timepicket.js 당신이 당신의 필드 getCMSFields() 함수에서

//JQuery UI datepicker and timepicker for azeem Event End Date/Time Field 
$j('#DataObjectManager_Popup_AddForm_EventEndDate-date, #DataObjectManager_Popup_DetailForm_EventEndDate-date').datepicker({ 
    dateFormat: 'dd/mm/yy' 
}); 

$j('#DataObjectManager_Popup_AddForm_EventStartDate-time, #DataObjectManager_Popup_DetailForm_EventStartDate-time').timepicker({ 
    timeFormat: 'hh:mm' 
}); 

• 에 추가 할 사용자 지정 코드를 포함, 당신은 기본 날짜 선택 옵션을 사용하지 않도록해야 , 당신은 날짜/datetime 필드를 사용하는 경우.

  $ startDate = new DatetimeField ('StartDate', 'Start Date/Time'); $ startDateField = $ startDate-> getDateField(); $ startDateField-> setConfig ('showcalendar', false); $ startTimeField = $ startDate-> getTimeField(); $ startTimeField-> setConfig ('showdropdown', false); $ fields-> addFieldsToTab ('Root.Main', $ startDate);

• 사용자 정의 파일과 다른 모든 파일이로드되는지 여부와 상관없이 다시 확인하실 수 있습니다. 자신의 유효성 확인을 위해 동일한 작업을 수행 할 수 있습니다.

희망이 있습니다.