javascript - 在 SilverStripe 2.4.7 中使用 Javascript

Question

我正在使用带有 DataObjectManager 的 SilverStripe 2.4.7。我正在尝试为弹出窗口添加我自己的自定义验证，但奇怪的事情一直在发生。当我添加自己的 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 的其他帖子，但它们没有解决这里发生的事情。

谢谢。

Answer 1

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

您可以看到正在从 firebug 加载哪些库。为了做到这一点，

1. 打开 Firebug
2. 点击“脚本”
3. 点击“内联”，将出现一个下拉菜单。如果你键入 jq 那么所有包含 jq 名字的文件都会被显示出来。它让您了解正在加载的内容。

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

• 首先，如果您打算使用自己的文件，则必须停止/阻止来自 dataobject_manager 的 jquery 文件。 getRequirementsForPopup() 函数中的类似内容。注意:这取决于哪些文件正在加载以及您在 firebug 中看到已加载的文件后要禁用的文件。

  要求:: block (“http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.1/jquery-ui.min.js”)；要求:: block (“dataobject_manager/javascript/dom_jquery_ui.js”)；要求:: block (“蓝 gem /第三方/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");

• 然后，您必须包含自己的 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', '开始日期/时间');$startDateField = $startDate->getDateField();$startDateField->setConfig('showcalendar', false);$startTimeField = $startDate->getTimeField();$startTimeField->setConfig('showdropdown', false);$fields->addFieldsToTab('Root.Main', $startDate);

• 您可以在 firebug 中再次验证您的自定义文件和所有其他文件是否正在加载。可以为您自己的验证做同样的事情。

希望对您有所帮助。