php - Symfony2 php テンプレートで jQuery を使用する

Question

Symfony2 で複数のフォームを埋め込むトリックを実行しようとしています。The Book - collection Field TypeおよびThe Cookbook - How to Embed a Collection of Formsの指示に従いましたが、機能しないようです。

問題の一部は、私が JavaScript や JQuery にあまり慣れていないことであり、これらの手順は完全に理解していることを前提としているためだと思います (たとえば、「簡単にするために、jQuery を使用し、ページのどこかに含まれていると仮定します。」)。また、テンプレートを twig ではなく php で記述する必要がありますが、php テンプレートを使用した例はまだ見つかりません。

これが私がこれまでに行ったことです...

私のメインフォームクラス:

class StudyType extends AbstractType
{
    public function buildForm(FormBuilder $builder, array $options)
    {
        $builder
            ->add('studyName', null, array('label'=> 'Study Name:'))
            ->add('participants', 'collection', array(
            'type'=> new ParticipantType(), 
            'allow_add'=>true,
            'by_reference'=>false
         ));
}

public function getName()
{
    return 'study';
}

public function getDefaultOptions(array $options) 
{
  return array(
      'data_class' => 'MyBundle\Entity\Study',
  );
}

私の埋め込みフォームクラス:

class ParticipantType extends AbstractType
{
    public function buildForm(FormBuilder $builder, array $options)
    {
    $builder
        ->add('participantId','text', array('label'=>'Participant ID'))
        ->add('dOB', 'date', array(
            'label'=>'D.O.B.', 
            'years'=>range(date('Y'), 1932),
            'required'=>false
         ))
        ->add('gender', 'choice', array(
            'label'=>'Gender',
            'choices'=>array('F'=>'F', 'M'=>'M'),
            'required'=>false
        ))
        ->add('dateEnteredStudy', 'date', array(
            'label'=>'Date entered trial', 
            'years'=>range(date('Y'), 1990),
            'required'=>false
        ))
        ->add('dateCompletedStudy', 'date', array(
            'label'=>'Date completed trial', 
            'years'=>range(date('Y'), 1990),
            'required'=>false
        ))
        ;
    }

    public function getName()
    {
        return 'participant';
    }

    public function getDefaultOptions(array $options) 
    {
      return array(
          'data_class' => 'MyBundle\Entity\Participant',
      );
    }
}

私の base.html.php テンプレート:

<!DOCTYPE html>
    <html>
        <head>
            <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
            <title><?php $view['slots']->output('title', 'My title') ?></title>
    <?php $view['slots']->output('stylesheets') ?>
    <link rel="shortcut icon" href="<?php echo $view['assets']->getUrl('favicon.ico') ?>" />
</head>
<body>
    <?php $view['slots']->start('mainMenu')  ?>
        <!--lots of menu items here -->
    <?php $view['slots']->stop() ?>

    <?php $view['slots']->start('javascripts') ?>
        <script src="<?php echo $view['assets']->getUrl('/js/jquery-1.7.1.js') ?>" type="text/javascript"></script>
    <?php $view['slots']->stop() ?>

    <?php $view['slots']->output('mainMenu') ?>
    <?php $view['slots']->output('body') ?>
    <?php $view['slots']->output('javascripts') ?>
</body>

私の study.html.php テンプレート:

 <?php $view->extend('MyBundle::base.html.php') ?>

    <?php $view['slots']->start('body') ?>
        <form action="<?php echo $view['router']->generate('study', array('id'=>$entity->getId()))?>" method="post" <?php echo $view['form']->enctype($form) ?>>
    <ul id="multi-participant" data-prototype="<?php echo $view->escape($view['form']->row($form['participants']->get('prototype'))) ?>">
    </ul>

    <?php echo $view['form']->errors($form) ?>
    <h2>Study</h2>
    <?php echo $view['form']->label($form['studyName'])?>
    <?php echo $view['form']->errors($form['studyName'])?>
    <?php echo $view['form']->widget($form['studyName'])?>

    <h3>Participants in this study</h3>
    <ul id="participants">
        <?php foreach($form['participants'] as $participant): ?>
            <li><?php echo $view['form']->row($participant) ?></li>
        <?php endforeach; ?>
    </ul>
    <a href="#" id="add-another-participant">Add participant</a>

  </form> 
  <?php $view['slots']->stop() ?>

   <script type='text/javascript'>
      // keep track of how many participant fields have been rendered
      var participantCount = document.getElementById("participants").length;
      jQuery(document).ready(function() {
          jQuery('#add-another-participant').click(function() {
              var participantList = jQuery('#multi-participant');

              var newParticipant = participantList.attr('data-prototype');
              newParticipant = newParticipant.replace(/\$\$name\$\$/g, participantCount);
              participantCount++;

              var newLi = jQuery('<li>,</li>').html(newParticipant);
              newLi.appendTo(jQuery('#multi-participant'));

              return false;
          });
      });

    </script>

マイページは、研究の既存の参加者全員の編集可能なフォームと、下部にある「参加者の追加」リンクで正しく表示されます。ただし、リンクをクリックしても何も起こりません。

私はできる限り厳密に指示に従ったので、誰かがエラーを特定して正しい軌道に乗せてくれることを願っています. 答えを提供する場合は、re:javascript で何をしているのか本当にわからないので、明示してください (最終的には学習しますが、この問題をすばやく解決する必要があります)。

どうもありがとう

php - Symfony2 php テンプレートで jQuery を使用する

0 に答える 0

Related

Reference