@@ -585,77 +585,40 @@ your application. Assume that you have a sport meetup creation controller::
585585The associated template uses some JavaScript to update the ``position `` form
586586field according to the current selection in the ``sport `` field:
587587
588- .. configuration-block ::
589-
590- .. code-block :: html+twig
591-
592- {# app/Resources/views/meetup/create.html.twig #}
593- {{ form_start(form) }}
594- {{ form_row(form.sport) }} {# <select id="meetup_sport" ... #}
595- {{ form_row(form.position) }} {# <select id="meetup_position" ... #}
596- {# ... #}
597- {{ form_end(form) }}
598-
599- <script>
600- var $sport = $('#meetup_sport');
601- // When sport gets selected ...
602- $sport.change(function() {
603- // ... retrieve the corresponding form.
604- var $form = $(this).closest('form');
605- // Simulate form data, but only include the selected sport value.
606- var data = {};
607- data[$sport.attr('name')] = $sport.val();
608- // Submit data via AJAX to the form's action path.
609- $.ajax({
610- url : $form.attr('action'),
611- type: $form.attr('method'),
612- data : data,
613- success: function(html) {
614- // Replace current position field ...
615- $('#meetup_position').replaceWith(
616- // ... with the returned one from the AJAX response.
617- $(html).find('#meetup_position')
618- );
619- // Position field now displays the appropriate positions.
620- }
621- });
622- });
623- </script>
624-
625- .. code-block :: html+php
626-
627- <!-- app/Resources/views/Meetup/create.html.php -->
628- <?php echo $view['form']->start($form) ?>
629- <?php echo $view['form']->row($form['sport']) ?> <!-- <select id="meetup_sport" ... -->
630- <?php echo $view['form']->row($form['position']) ?> <!-- <select id="meetup_position" ... -->
631- <!-- ... -->
632- <?php echo $view['form']->end($form) ?>
633-
634- <script>
635- var $sport = $('#meetup_sport');
636- // When sport gets selected ...
637- $sport.change(function() {
638- // ... retrieve the corresponding form.
639- var $form = $(this).closest('form');
640- // Simulate form data, but only include the selected sport value.
641- var data = {};
642- data[$sport.attr('name')] = $sport.val();
643- // Submit data via AJAX to the form's action path.
644- $.ajax({
645- url : $form.attr('action'),
646- type: $form.attr('method'),
647- data : data,
648- success: function(html) {
649- // Replace current position field ...
650- $('#meetup_position').replaceWith(
651- // ... with the returned one from the AJAX response.
652- $(html).find('#meetup_position')
653- );
654- // Position field now displays the appropriate positions.
655- }
656- });
657- });
658- </script>
588+ .. code-block :: html+twig
589+
590+ {# app/Resources/views/meetup/create.html.twig #}
591+ {{ form_start(form) }}
592+ {{ form_row(form.sport) }} {# <select id="meetup_sport" ... #}
593+ {{ form_row(form.position) }} {# <select id="meetup_position" ... #}
594+ {# ... #}
595+ {{ form_end(form) }}
596+
597+ <script>
598+ var $sport = $('#meetup_sport');
599+ // When sport gets selected ...
600+ $sport.change(function() {
601+ // ... retrieve the corresponding form.
602+ var $form = $(this).closest('form');
603+ // Simulate form data, but only include the selected sport value.
604+ var data = {};
605+ data[$sport.attr('name')] = $sport.val();
606+ // Submit data via AJAX to the form's action path.
607+ $.ajax({
608+ url : $form.attr('action'),
609+ type: $form.attr('method'),
610+ data : data,
611+ success: function(html) {
612+ // Replace current position field ...
613+ $('#meetup_position').replaceWith(
614+ // ... with the returned one from the AJAX response.
615+ $(html).find('#meetup_position')
616+ );
617+ // Position field now displays the appropriate positions.
618+ }
619+ });
620+ });
621+ </script>
659622
660623The major benefit of submitting the whole form to just extract the updated
661624``position `` field is that no additional server-side code is needed; all the
0 commit comments