Deux listes déroulantes liées en ajax
Salut
Je voudrais appliquer l'exemple dans le documentation de symfony2 de deux listes déroulantes liées en ajax http://symfony.com/fr/doc/current/co...submitted-data
Donc j'ai créer toutes les entités SportMeetup, Sport et Position. et j'ai aussi créé toutes les relations.
En ce moment je peux afficher le formulaire et la liste des sport s'affiche correctement dans la liste déroulante, mais le code ajax ne fonctionne pas encore.
Entité Sport
Code:
1
2
3
4
| /**
* @ORM\OneToMany(targetEntity="AppBundle\Entity\Position", mappedBy="sport", cascade={"persist"})
*/
private $positions; |
Entité Position
Code:
1
2
3
4
| /**
* @ORM\ManyToOne(targetEntity="AppBundle\Entity\Sport", inversedBy="positions", cascade={"persist"})
*/
private $sport; |
Entité SportMeetup
Code:
1
2
3
4
5
6
7
8
9
| /**
* @ORM\ManyToOne(targetEntity="AppBundle\Entity\Sport")
*/
private $sport;
/**
* @ORM\ManyToOne(targetEntity="AppBundle\Entity\Position")
*/
private $position; |
SportMeetupType
Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
|
namespace AppBundle\Form;
use Symfony\Component\Form\AbstractType;
use Symfony\Component\Form\FormBuilderInterface;
use Symfony\Component\Form\FormEvent;
use Symfony\Component\Form\FormEvents;
use Symfony\Component\OptionsResolver\OptionsResolverInterface;
//........
use Symfony\Component\Form\FormInterface;
use AppBundle\Entity\Sport;
class SportMeetupType extends AbstractType
{
public function buildForm(FormBuilderInterface $builder, array $options)
{
$builder
->add('name','text')
->add('sport', 'entity', array(
'class' => 'AppBundle:Sport',
'placeholder' => '',
'property' => 'name',
'attr' => array('id'=>'meetup_sport')
));
$formModifier = function (FormInterface $form, Sport $sport = null) {
$positions = null === $sport ? array() : $sport->getPostions();
$form->add('position', 'entity', array(
'class' => 'AppBundle:Position',
'placeholder' => '',
'choices' => $positions,
'property' => 'name',
'attr' => array('id'=>'meetup_position')
));
};
$builder->addEventListener(
FormEvents::PRE_SET_DATA,
function (FormEvent $event) use ($formModifier) {
// this would be your entity, i.e. SportMeetup
$data = $event->getData();
$formModifier($event->getForm(), $data->getSport());
}
);
$builder->get('sport')->addEventListener(
FormEvents::POST_SUBMIT,
function (FormEvent $event) use ($formModifier) {
// It's important here to fetch $event->getForm()->getData(), as
// $event->getData() will get you the client data (that is, the ID)
$sport = $event->getForm()->getData();
// since we've added the listener to the child, we'll have to pass on
// the parent to the callback functions!
$formModifier($event->getForm()->getParent(), $sport);
}
);
}
public function setDefaultOptions(OptionsResolverInterface $resolver)
{
$resolver->setDefaults(array(
'data_class' => 'AppBundle\Entity\SportMeetup'
));
}
public function getName()
{
return null;
}
} |
Controller
Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
|
public function createAction(Request $request)
{
$meetup = new SportMeetup();
$form = $this->createForm(new SportMeetupType(), $meetup);
$form->handleRequest($request);
if ($form->isValid()) {
// ... save the meetup, redirect etc.
}
if ($request->isXmlHttpRequest()){
$id = $request->request->get('id');
$em = $this->getDoctrine()->getManager();
$positions = $em->getRepository('AppBundle:Position')->findBySport($id);
$response = new Response();
$response->setContent(json_encode($positions));
$response->headers->set('Content-Type', 'application/json');
return $response;
}
return $this->render(
'AppBundle:Dashboard/Sport-meetup:create.html.twig',
array('form' => $form->createView())
);
} |
form.twig
Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
|
<form method="post" action="" class="form-horizontal" role="form" {{ form_enctype(form) }}>
<label for="form-field-mask-2">Name</label>
{{ form_widget(form.name) }}
{{ form_errors(form.name) }}
<br/>
<label for="form-field-mask-2">Sport</label>
{{ form_row(form.sport) }}
<br/>
<label>Position</label>
{{ form_row(form.position) }}
{{ form_rest(form) }}
<br><br>
<a href="javascript:history.back()" class="btn btn-default btn-sm radius-4"> <i
class='icon-remove bigger-110'></i> Annuler</a>
<button type="submit" class="btn btn-sm btn-success">Valider <i
class="icon-arrow-right icon-on-right bigger-110"></i></button>
</form>
<script type="text/javascript">
var $sport = $('#meetup_sport');
// When sport gets selected ...
$sport.change(function () {
// ... retrieve the corresponding form.
var $form = $(this).closest('form');
// Simulate form data, but only include the selected sport value.
var data = {};
data[$sport.attr('name')] = $sport.val();
// Submit data via AJAX to the form's action path.
$.ajax({
url: '{{ path('dashboard_sport_meetup_new') }}',
type: 'POST',
data: data,
success: function (html) {
// Replace current position field ...
$('#meetup_position').replaceWith(
// ... with the returned one from the AJAX response.
$(html).find('#meetup_position')
);
// Position field now displays the appropriate positions.
}
});
}); |
Merci d'avance
