jquery ajax works only once

Question

I'm creatin a quiz bundle and i'm using ajax to load a new question form when submitting one . the problem is that the ajax is working only once when i click next i have a new form but then i keep having the old form .

Any Help ?

this is my view code :

<form method="post" class="ajax"> 
    <div id="form_body">

        {% include 'MoocBundle:Quiz:form.html.twig' with {'form': form} %}
    </div>   

</form>
<script type="text/javascript" src="{{ asset('bundles/mooc/js/jquery-2.1.4.min.js') }}"></script>
<script>
$(document).ready(function(){
        $( ".next" ).on("click", function(e) {

         e.preventDefault();

            $.ajax({
                type: $(this).attr('method'),
                url: "{{ path('quiz_show_next',{'id' : 1}) }}",
                cache: false,

                success: function (data) {
                     $('#form_body').html(data);
                  }
            });
            return false;
        }
        ); 
    });


</script>

my controller action ( i'm creating a new form each time )

public function nextAction(Request $request , $id )
{
        $em = $this->getDoctrine()->getManager();
        $quiz = $em->getRepository('MoocBundle:Quizz')->findOneById($id);
        $this->i++;

        $question = $quiz->getQuestions()->get($this->i);


        $form = $this->createCreateForm($question);
        return $this->render('MoocBundle:Quiz:takeQuiz.html.twig', array('form' => $form->createView()));

}

Your setup is not quite clear. Is `.next` a descendant of `#form_body`? And, if you're submitting the same data to the ajax call wouldn't return the same content (form) each time? — PeterKA, May 01 '16 at 21:38
Thank you @R14, that's good to know but would you please answer the question. — PeterKA, May 01 '16 at 21:43

score 0 · Answer 1 · answered May 01 '16 at 21:45

If .next is inside of #form_body then use event delegation. Change:

$( ".next" ).on("click", function(e) {

To:

$('#form_body').on('click', '.next', function(e) {

Each time you load ajax content you're replacing .next. Since the .next loaded by ajax was not present at DOM ready, the same code that fired for the original .next would not fire, unless you use event delegation.

John Smith · Answer 2 · 2016-05-01T22:17:05.583

0

For dynamics elements always bind event listeners on parents

Here's an example for 'click' event listener on "#form_body" element for every '.next' element which is his descendant.

$("#form_body").on("click", ".next", function(e) {
    // ...
}

edited May 01 '16 at 22:17

answered May 01 '16 at 21:57

John Smith

1,091
9
17

i replace but it didn't work ,it's not that the problem in fact if i replace $('#form_body').html(data); by $('#form_body').append(data); i have another form but the same one as the old – R14 May 01 '16 at 22:03
Because you always send {'id' : 1} ? – John Smith May 01 '16 at 22:03
i'm changing another parameter inside the controller action (i) take a look at the controller i just post it , thanks – R14 May 01 '16 at 22:06
when i click on next on the first time i have a new form than i keep having the same one – R14 May 01 '16 at 22:07
no i request the same url but i'm changing parameters inside the controller each time i click okey i'm calling the nextAction with id 1 (quiz 1) and creating a new form w question id i ( i increment each time i ) – R14 May 01 '16 at 22:17
You cannot successfully persist a state ($this->$i++) in a controller between client requests. For every request the whole stack is rebuild and controller is created as new object. – John Smith May 01 '16 at 22:23

jquery ajax works only once

2 Answers2

For dynamics elements always bind event listeners on parents

Linked