Question

I am using SilverStripe 2.4.7 with DataObjectManager. I’m trying to add in my own custom validation for the popup but something odd keeps happening. When I add my own Javascript class the date picker on my popup stops working. I can’t figure out why because the Javascript I am adding in is not applied to the data picker.

I am using

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

to add my own Javascript class in. This worked fine in another popup but that one didn’t have a datepicker. I was under the impression that adding custom Javascript to the CMS was no problem so I’m wondering if it’s something like a conflict with the Javascript in DataObjectmanager or the Date picker.

I’d appreciate any advice anyone can offer me. I’ve seen some other posts about Javascript in SilverStripe but they don’t address what is happening here.

Thanks.

Answer 1

dataobject_manager loads its own jquery file(s). When you are adding your ownsfile(s), then it is getting conflict with existing ones from dataobject_manager.

You can see which libraries are loading from firebug. In order to do so,

1. Open firebug
2. Click on ‘script’
3. Click on ‘inline’, a drop down will appear. If you type jq then all files containing jq names will be shown. It give you an idea what is being load.

Now back to your question, If you want to use existing loaded JQuery, then add your custom file with validation code. Otherwise, here is an example how to show custom time picker (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.