私はbuilitフォームを動的に変更しました。私は文書(http://symfony.com/doc/current/form/dynamic_form_modification.html#form-events-submitted-data)に従ってきましたが、1つの問題があります。symfonyフォームのEventListenerが適切なhtml構造体を返さない
私の目標は、ユーザーが「ブランド」フィールドを選択するときに「モデル」フィールドを更新することです。ここで
は私のリスナーがどのように見えるかです:
public function buildForm(FormBuilderInterface $builder, array $options)
{
$builder
->add('name')
->add('brand', EntityType::class, [
'class' => 'DEERCMS\BrandBundle\Entity\Brand',
'choice_label' => 'name',
'multiple' => false,
'expanded' => false,
]);
$formModifier = function (FormInterface $form, Brand $brand = null) {
$models = null === $brand ? array() : $brand->getModels();
$form->add('model', EntityType::class, array(
'class' => 'DEERCMS\ModelBundle\Entity\Model',
'choices' => $models,
'multiple' => false,
'expanded' => false,
));
};
$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->getBrand());
}
);
$builder->get('brand')->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)
$brand = $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(), $brand);
}
);
}
AJAX呼び出しを送信しているが、それは私の目標は、「モデル」と呼ばれるフィールドを更新することで、まったく同じHTML構造を返します。ここではテンプレートです:
{{ form_start(form, {'attr': {'id': 'form', 'class': 'form-horizontal', 'onChange': 'changed()' } }) }}
<div class="form-group">
<label class="col-md-3 control-label">Marka </label>
<div class="col-md-9">
{{form_row(form.brand, {'id': 'test', 'attr': { 'class': 'form-control'}}) }}
</div>
</div>
<div class="form-group">
<label class="col-md-3 control-label">Model </label>
<div class="col-md-9">
{{form_widget(form.model, {'id': 'test1', 'attr': { 'class': 'form-control'}}) }}
</div>
</div>
<div class="form-group">
<label class="col-md-3 control-label"></label>
<div class="col-md-9">
<button type="submit" class="btn btn-success">{% if is_editing %}EDYTUJ {% else %}DODAJ{% endif %}</button>
</div>
</div>
{{form_end(form)}}
そして、ここでは、私はにconsole.log(HTML)を行うと、それは「モデル」のデータが含まれていないので、AJAX呼び出し
<script>
function changed() {
var brand = $('#test');
// ... retrieve the corresponding form.
var $form = $('#form');
console.log($form);
// Simulate form data, but only include the selected sport value.
var data = {};
data[brand.attr('name')] = brand.val();
// Submit data via AJAX to the form's action path.
jQuery.ajax({
url : $form.attr('action'),
type: "POST",
data: data,
success: function (html) {
console.log(html)
$("#test1").replaceWith(
// ... with the returned one from the AJAX response.
$(html).find("#test1")
);
// Position field now displays the appropriate positions.
}
});
}
</script>
は、それがどの、まったく同じHTML構造を示していますリスナーから取得する必要があります。
私はすべての関係をチェックしており、正常に動作しています。