1

我将 SilverStripe 2.4.7 与 DataObjectManager 一起使用。我正在尝试为弹出窗口添加我自己的自定义验证，但奇怪的事情一直在发生。当我添加自己的 Javascript 类时，弹出窗口上的日期选择器停止工作。我不知道为什么，因为我添加的 Javascript 没有应用于数据选择器。

我在用

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

添加我自己的Javascript类。这在另一个弹出窗口中效果很好，但是那个没有日期选择器。我的印象是向 CMS 添加自定义 Javascript 没有问题，所以我想知道这是否与 DataObjectmanager 或日期选择器中的 Javascript 冲突。

我会很感激任何人可以给我的任何建议。我在 SilverStripe 中看到了其他一些关于 Javascript 的帖子，但它们没有解决这里发生的事情。

谢谢。

4

1 回答 1

2

dataobject_manager 加载它自己的 jquery 文件。当您添加自己的文件时，它会与 dataobject_manager 中的现有文件发生冲突。

您可以查看从 firebug 加载的库。为了做到这一点，

  1. 打开萤火虫
  2. 点击“脚本”
  3. 单击“内联”，将出现一个下拉菜单。如果您键入 jq，则将显示所有包含 jq 名称的文件。它让您了解正在加载的内容。

现在回到您的问题，如果您想使用现有加载的 JQuery，则添加您的自定义文件和验证代码。否则，这里是一个如何显示自定义时间选择器的示例（http://trentrichardson.com/examples/timepicker/）

  • First, you have to stop/block jquery files from dataobject_manager, if you planning to use your own. Something like this in getRequirementsForPopup() function. Note: It depends which files are loading and which one you want to disable after seeing loaded files in 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"); requirements::block("sapphire/thirdparty/jquery-ui/jquery-ui-1.8rc3.custom.js"); requirements::block("dataobject_manager/javascript/dataobject_manager.js");` requirements::block("dataobject_manager/javascript/dataobject_manager_popup.js");

  • Then, you have to include your own jquery files

    Requirements::javascript('azeem/javascript/jquery-ui/js/jquery-1.7.2.min.js'); Requirements::javascript('azeem/javascript/jquery-ui/js/jquery-ui-1.8.23.custom.min.js'); Requirements::javascript('azeem/javascript/timepicker/jquery-ui-timepicker-addon.js'); Requirements::javascript('azeem/javascript/timepicker/azeem-timepicker.js');
    Requirements::css('azeem/javascript/jquery-ui/css/smoothness/jquery-ui-1.8.23.custom.css'); Requirements::css('azeem/css/timepicker/jquery-ui-timepicker-addon.css');

Here azeem-timepicket.js contains the custom code which you want to add to your fields

//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'
});

  • In getCMSFields() function, you have to disable default date picker option, in case you are using date/datetime field.

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

  • You can verify again in firebug, whether you custom and all other files are loading or not. Same things can be done for your own validation.

Hope it will help.

于 2012-12-12T06:42:00.037 回答