0

適用する html と javascript は次のとおりです。スニペットは、cakePHP によって生成された html と、ビュー ファイルに含まれている JavaScript から取得されます。jsfiddle ではすべてが期待どおりに機能しますが、cakePHP アプリケーションではアクションが起動されません。

JavaScript は、次のようにビュー ファイルの先頭に貼り付けられます。

<script type="text/javascript">
  $('#repeat').live('change', function(){
      if ( $(this).is(':checked') ) {
         $('#end-date').show();
     } else {
         $('#end-date').hide();
     }
 }); 
</script>

フォームは次のようになります。

<?php echo $this->Form->create('Event');?>

        <legend><?php __('Add Event'); ?></legend>

        <div id="first_input">
        <fieldset>
    <?php   
        echo $this->Form->input('project_id', array('label'=>'Project name')); 
        echo $this->Form->input('user_id', array('label'=>'Employee'));
        echo $this->Form->input('hours', array('type'=>'text','size'=>'3'));
        echo $this->Form->input('minutes', array('type'=>'text', 'size'=>'3')); ?>
    </fieldset>
        </div>
        <div id="second_input">
    <fieldset>

    <?php   
        echo $this->Form->input('assignment', array('type'=>'textarea'));
        echo $this->Form->input('date', array('label' => 'Date', 'class'=>'datepicker', 'type'=>'text', 'value'=>$date));
        echo $this->Form->input('start_time', array('label'=>'Start Time', 'timeFormat' => '24', 'interval'=> '10', 'selected' => '00:00'));
        echo $this->Form->input('finish_time', array('label'=>'Finish Time (Not required)', 'timeFormat' => '24', 'interval'=> '10', 'selected' => '00:00')); 
        echo $this->Form->checkbox('Repeat', array('id'=>'repeat'));?>
    <div id="end-date" style="display:none">
        <?php
        echo $this->Form->input('finish_date', array('label' => 'End Date', 'class'=>'datepicker', 'type'=>'text', 'id' => 'end-date'));
        echo $this->Form->select('weekdays', array('1'=>'Monday', '2'=>'Tuesday', '3'=>'Wednesday', '4'=>'Thursday', '5'=>'Friday', '6'=>'Saturday', '7'=>'Sunday'), array('multiple'=>'checkbox'));?>
    </div>
    </fieldset>
        </div>
<?php echo $this->Form->end(__('Submit', true));?>

これを解決するためのヒントが得られることを本当に楽しみにしています。

4

3 に答える 3

2

常にページの下部に Java スクリプト コードを記述します。

于 2013-09-24T08:29:01.463 に答える
1

jQuery コードを正しく使用するには、コードを $(document).ready() ブロックにラップする必要があります。ドキュメントに記載されているように、

ドキュメントが「準備完了」になるまで、ページを安全に操作することはできません。jQuery は、この準備完了状態を検出します。$( document ).ready() 内に含まれるコードは、ページのドキュメント オブジェクト モデル (DOM) で JavaScript コードを実行する準備が整った場合にのみ実行されます。

JS コードを次のように変更してみてください。

<script type="text/javascript">
    $(document).ready(function() {
      $('#repeat').live('change', function(){
          if ( $(this).is(':checked') ) {
             $('#end-date').show();
         } else {
             $('#end-date').hide();
         }
     }); 
    });
</script>
于 2013-09-23T17:09:30.333 に答える
0

最後に、私が使用していた jQuery バージョン (1.10.2) では「ライブ」がサポートされていないことを知りました。「オン」に変更する必要がありました。これで問題ありません。新しいバージョンの jQuery の適切なコードは次のとおりです。

 $(document).ready(function() {
      $('#repeat').on('change', function(){
          if ( $(this).is(':checked') ) {
             $('#end-date').show();
         } else {
             $('#end-date').hide();
         }
     }); 
    });
于 2013-09-25T13:45:02.600 に答える