I am trying to do the embed multiple forms trick with Symfony2. I have followed the instructions in The Book - collection Field Type and The Cookbook - How to Embed a Collection of Forms, but can't seem to get it to work.
I think part of the problem is that I am not very familiar with javascript or JQuery and these instructions assume full understanding (e.g. "To make things simple, we'll use jQuery and assume you have it included somewhere on your page."). Also, I need for my templates to be written in php not twig, and I have not yet found an example of this done with a php template.
Here's what I've done so far...
My main form class:
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',
);
}
My embedded form class:
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',
);
}
}
My base.html.php template:
<!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>
My study.html.php template:
<?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>
My page displays correctly with editable forms for all existing Participants for the Study and with the "Add Participant" link present at the bottom. However, when I click the link, nothing happens.
I've followed the instructions as closely as I can, so I'm hoping someone can pinpoint the error and set me on the right track. If you do provide an answer, please be explicit because I really don't know what I'm doing re:javascript (I will learn it eventually, but need to solve this problem quickly).
Many thanks