dongxiezhi9564 2012-06-13 13:31
浏览 42

在Symfony2 php模板中使用jQuery

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

  • 写回答

0条回答 默认 最新

    报告相同问题?

    悬赏问题

    • ¥15 求差集那个函数有问题,有无佬可以解决
    • ¥15 【提问】基于Invest的水源涵养
    • ¥20 微信网友居然可以通过vx号找到我绑的手机号
    • ¥15 寻一个支付宝扫码远程授权登录的软件助手app
    • ¥15 解riccati方程组
    • ¥15 display:none;样式在嵌套结构中的已设置了display样式的元素上不起作用?
    • ¥15 使用rabbitMQ 消息队列作为url源进行多线程爬取时,总有几个url没有处理的问题。
    • ¥15 Ubuntu在安装序列比对软件STAR时出现报错如何解决
    • ¥50 树莓派安卓APK系统签名
    • ¥65 汇编语言除法溢出问题