2012-12-10 34 views
1

我在DataObjectManager中使用SilverStripe 2.4.7。我試圖添加我自己的彈出式自定義驗證,但奇怪的事情仍在繼續。當我添加自己的Javascript類時,彈出窗口中的日期選擇器停止工作。我無法弄清楚爲什麼,因爲我添加的Javascript不適用於數據選取器。在SilverStripe中使用Javascript 2.4.7

我使用

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

加入我自己的JavaScript類,這在另一個彈出工作得很好,但一個沒有一個日期選擇器。我的印象是,將自定義Javascript添加到CMS是沒有問題的,所以我想知道它是否與DataObjectmanager或Date選擇器中的Javascript發生衝突。

我很感謝任何人可以給我的建議。我在SilverStripe中看到了一些關於Javascript的其他文章,但他們沒有解決這裏發生的事情。

謝謝。

+0

聽起來像一個簡單的JavaScript錯誤,你檢查控制檯輸出? – schellmax

+0

是的,但沒有輸出錯誤。服務器日誌也是如此。這是通常我看到錯誤時拋出我的原因,當出現像這樣的Javascript錯誤時。 – MillyMonster

回答

2

dataobject_manager加載它自己的jquery文件。當你添加你的owns文件時,它會與dataobject_manager中的現有文件發生衝突。

你可以看到哪些庫是從螢火蟲加載的。爲了做到這一點,

  1. 打開Firebug
  2. 單擊「腳本」
  3. 點擊「內聯」,一個下拉會出現。如果您鍵入jq,則會顯示包含jq名稱的所有文件。它讓你知道什麼是負載。

現在回到你的問題,如果你想使用現有的加載JQuery,然後添加您的自定義文件與驗證代碼。否則,這裏有一個例子如何顯示自定義的時間選擇器(http://trentrichardson.com/examples/timepicker/

  • 首先,你必須停止/塊jquery的文件從dataobject_manager,如果你打算使用自己的。在getRequirementsForPopup()函數中就像這樣。注意:這取決於在firebug中看到加載的文件後,哪些文件正在加載以及要禁用哪個文件。

    requirements :: block(「http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.1/jquery-ui.min.js」); requirements :: block(「dataobject_manager/javascript/dom_jquery_ui.js」);要求:: block(「藍寶石/第三方/ jquery-ui/jquery-ui-1.8rc3.custom.js」);要求:: block(「dataobject_manager/javascript/dataobject_manager.js」);' requirements :: block(「dataobject_manager/javascript/dataobject_manager_popup.js」);

  • 然後,你必須包括你自己的jQuery文件

    要求:: JavaScript的( 'azeem /使用Javascript/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包含要添加到您的領域

//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' 
}); 
  • 在getCMSFields()函數的自定義代碼,您必須禁用默認的日期選擇器選項,以防你使用日期/日期時間字段。

    $ 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);

  • 您可以再次在螢火蟲中驗證您是否自定義以及是否加載其他所有文件。同樣的事情可以做你自己的驗證。

希望它能幫上忙。

+0

感謝您的好評。它回答了我所有的問題。 +1 – MillyMonster