1

DataObjectManager で SilverStripe 2.4.7 を使用しています。ポップアップに独自のカスタム検証を追加しようとしていますが、奇妙なことが起こり続けています。独自の Javascript クラスを追加すると、ポップアップの日付ピッカーが機能しなくなります。追加しているJavascriptがデータピッカーに適用されていないため、理由がわかりません。

私は使っている

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

独自の Javascript クラスを追加します。これは別のポップアップでは問題なく機能しましたが、そのポップアップには日付ピッカーがありませんでした。カスタム Javascript を CMS に追加しても問題ないという印象を受けていたので、DataObjectmanager または Date picker の Javascript との競合のようなものではないかと考えています。

誰でも私に提供できるアドバイスをいただければ幸いです。SilverStripe で Javascript に関する他の投稿を見たことがありますが、ここで何が起こっているのかについて触れていません。

ありがとう。

4

1 に答える 1

2

dataobject_manager は、独自の jquery ファイルをロードします。ownsfile(s) を追加すると、dataobject_manager からの既存のファイルと競合します。

どのライブラリが firebug からロードされているかを確認できます。そのためには、

  1. ファイアーバグを開く
  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("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");

  • 次に、独自の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で再度確認できます。独自の検証についても同じことができます。

それが役立つことを願っています。

于 2012-12-12T06:42:00.037 に答える