@@ -538,77 +538,40 @@ your application. Assume that you have a sport meetup creation controller::
538538The associated template uses some JavaScript to update the ``position `` form
539539field according to the current selection in the ``sport `` field:
540540
541- .. configuration-block ::
542-
543- .. code-block :: html+twig
544-
545- {# templates/meetup/create.html.twig #}
546- {{ form_start(form) }}
547- {{ form_row(form.sport) }} {# <select id="meetup_sport" ... #}
548- {{ form_row(form.position) }} {# <select id="meetup_position" ... #}
549- {# ... #}
550- {{ form_end(form) }}
551-
552- <script>
553- var $sport = $('#meetup_sport');
554- // When sport gets selected ...
555- $sport.change(function() {
556- // ... retrieve the corresponding form.
557- var $form = $(this).closest('form');
558- // Simulate form data, but only include the selected sport value.
559- var data = {};
560- data[$sport.attr('name')] = $sport.val();
561- // Submit data via AJAX to the form's action path.
562- $.ajax({
563- url : $form.attr('action'),
564- type: $form.attr('method'),
565- data : data,
566- success: function(html) {
567- // Replace current position field ...
568- $('#meetup_position').replaceWith(
569- // ... with the returned one from the AJAX response.
570- $(html).find('#meetup_position')
571- );
572- // Position field now displays the appropriate positions.
573- }
574- });
575- });
576- </script>
577-
578- .. code-block :: html+php
579-
580- <!-- templates/meetup/create.html.php -->
581- <?php echo $view['form']->start($form) ?>
582- <?php echo $view['form']->row($form['sport']) ?> <!-- <select id="meetup_sport" ... -->
583- <?php echo $view['form']->row($form['position']) ?> <!-- <select id="meetup_position" ... -->
584- <!-- ... -->
585- <?php echo $view['form']->end($form) ?>
586-
587- <script>
588- var $sport = $('#meetup_sport');
589- // When sport gets selected ...
590- $sport.change(function() {
591- // ... retrieve the corresponding form.
592- var $form = $(this).closest('form');
593- // Simulate form data, but only include the selected sport value.
594- var data = {};
595- data[$sport.attr('name')] = $sport.val();
596- // Submit data via AJAX to the form's action path.
597- $.ajax({
598- url : $form.attr('action'),
599- type: $form.attr('method'),
600- data : data,
601- success: function(html) {
602- // Replace current position field ...
603- $('#meetup_position').replaceWith(
604- // ... with the returned one from the AJAX response.
605- $(html).find('#meetup_position')
606- );
607- // Position field now displays the appropriate positions.
608- }
609- });
610- });
611- </script>
541+ .. code-block :: html+twig
542+
543+ {# templates/meetup/create.html.twig #}
544+ {{ form_start(form) }}
545+ {{ form_row(form.sport) }} {# <select id="meetup_sport" ... #}
546+ {{ form_row(form.position) }} {# <select id="meetup_position" ... #}
547+ {# ... #}
548+ {{ form_end(form) }}
549+
550+ <script>
551+ var $sport = $('#meetup_sport');
552+ // When sport gets selected ...
553+ $sport.change(function() {
554+ // ... retrieve the corresponding form.
555+ var $form = $(this).closest('form');
556+ // Simulate form data, but only include the selected sport value.
557+ var data = {};
558+ data[$sport.attr('name')] = $sport.val();
559+ // Submit data via AJAX to the form's action path.
560+ $.ajax({
561+ url : $form.attr('action'),
562+ type: $form.attr('method'),
563+ data : data,
564+ success: function(html) {
565+ // Replace current position field ...
566+ $('#meetup_position').replaceWith(
567+ // ... with the returned one from the AJAX response.
568+ $(html).find('#meetup_position')
569+ );
570+ // Position field now displays the appropriate positions.
571+ }
572+ });
573+ });
574+ </script>
612575
613576The major benefit of submitting the whole form to just extract the updated
614577``position `` field is that no additional server-side code is needed; all the
0 commit comments