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