Использование jQuery в шаблоне php Symfony2

Я пытаюсь сделать встраивание нескольких форм трюк с Symfony2. Я следовал инструкциям в книге «Тип поля книги» и «Поваренная книга» – «Как встроить коллекцию форм» , но, похоже, не может заставить ее работать.

Я думаю, что часть проблемы в том, что я не очень хорошо знаком с javascript или JQuery, и эти инструкции предполагают полное понимание (например, «Чтобы все было просто, мы будем использовать jQuery и предположим, что вы включили его где-то на свою страницу»). Кроме того, мне нужно, чтобы мои шаблоны были написаны на 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'=>'DOB', '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 (я узнаю его в конце концов, но вам нужно быстро решить эту проблему).

Большое спасибо