Calling ajax within a script called by ajax is not running correctly (PHP)

Question

What I'm doing is basically using 3 files which I describe below

//File1.php
$('button.button1').click(function(e){
        $.ajax({
                 type: "POST",
                 url: "file2.php",

                 timeout: 180000
                })
                .done(function(data) {
                 //load data returned in modal
                })
                .fail(function(msg) {
                  //do something
                });
});

Then, my next file load modal code html (header,body and footer) with a button called 'OK'. (The body modal contains a form with the button 'OK')

//file2.php

    $('button.ok').click(function(e){
              $.ajax({
                        type: "POST",
                        url: "File3.php",
                        contentType:false,
                        processData:false,
                        cache:false,
                        data: formData,
                        timeout: 180000
                    })
                    .done(function(data) {
    //do something
                    } 
                    })
                    .fail(function(msg) {
                        //do something
                    });
                });

     In my file3.php do bd operations and save the values

So, when executing the program from the first script, the page is automatically returned to the index and the query is not executed in the bd, what is this? That I should return in each file to be executed correctly and why the values are sent through the get method (they are seen in the url) when it is specified that the method is post? HELP

to conclude, i have one button that do an ajax call , load a modal and inside the modal another ajax call is done

It is loaded dinamically in the first AJAX call because it is inside the form (that is inside the modal) that is returned by the file2.php, but actually is loaded in file2.php not dinamically — Mvram, Feb 06 '17 at 20:04

score 1 · Answer 1 · edited May 23 '17 at 12:33

1

jQuery is only aware of the elements in the page at the time it runs, so new elements added to the DOM dynamically are unrecognized by jQuery. To combat the problem use event delegation, bubbling events from newly added items up to a point in the DOM which was there when jQuery ran on page load. Many people use document as the place to catch the bubbled event, but it isn't necessary to go all the way up the DOM tree. Ideally you should delegate to the nearest parent existing at the time of page load.

$(document).on('click', 'button.ok', function(e){...

Using the .on() function should solve your issue.

edited May 23 '17 at 12:33

Community

1
1

answered Feb 06 '17 at 20:05

Jay Blanchard

34,243
16
77
119

i'm sorry. I'm so new in this. I tried to make all ajax calls from file1.php as you said (using 'on') and I continue with the error – Mvram Feb 06 '17 at 20:16
What is triggering the request in file1? – Jay Blanchard Feb 06 '17 at 20:23
a button with event 'on click' – Mvram Feb 06 '17 at 20:35
Without that in your code example above it would be hard for me to answer definitively. You didn't point to which event was failing. – Jay Blanchard Feb 06 '17 at 20:37
edits made in my code now – Mvram Feb 06 '17 at 20:48
i do know that because the page is automatically returned to the index and cannot see the execution of calls – Mvram Feb 06 '17 at 21:19
Do you need to prevent the default action of the click? – Jay Blanchard Feb 06 '17 at 21:26
No, I do not need it. Put the e as argument can bring problems in this case? – Mvram Feb 06 '17 at 21:39
It could, but without having a fuller understanding of your code and how you use it, it would be hard for me to say. – Jay Blanchard Feb 06 '17 at 21:40

Calling ajax within a script called by ajax is not running correctly (PHP)

1 Answers1