PHP/HTML, AJAX is not calling/executing PHP file

Question

Before I opened this question, I searched the entire internet on a solution. Maybe it is me or my solution. Sorry for that.

The situation is, I have a web app which is build with PHP and interacting with the database through functions. Every page is a php in which html code is executed.

The problem is, when I want to implement Ajax to update data without refreshing a page, the PHP file is not being executed when the button is clicked.

The javascript has two functions:

Alert serialized data of the button (works)
Run php script with Ajax (doesn't work)

Html Header

<!DOCTYPE html>
        <html>
            <head>
                <meta charset="utf-8" />
                <meta http-equiv="X-UA-Compatible" content="IE=edge">
                <meta name="viewport" content="width=device-width, initial-scale=1">

                <!-- JQuery -->
                    <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
                    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous">

Im using bootstrap-table, one of the column is a button which has the following content:

<form id="form" class="favourite-form" method="post"><input style="display:none" type="hidden" id=5 name="subject_id" value=5 ><input type="submit" name="submit" value="Button"></form><div id="response"></div>

When clicked on the button the following alert is popping up:

The script file is included in the php file:

include("favorite_ajax.html");

The script file has the following content:

$(document).on('submit', '.favourite-form', function(e) { 
        e.preventDefault();             //prevent a normal postback and allow ajax to run instead
        var data = $(this).serialize(); //"this" represents the form element in this context
        alert(data);   // this alert works

    $.ajax({       
        method:   "POST", 
        url:      "process.php",  // calling this php file doens't work
        data:     data,
        success: function(data) { 
          alert("Data Save: " + data); 
        },
        error: function(jqXHR, textStatus, errorThrown) //gracefully handle any errors in the UI
        {
          alert("An ajax error occurred: " + textStatus + " : " + errorThrown);
        }
      }); 
});

Finally the php file has one single simple function which inserts (dummy) data. The php file is tested and does not contain any errors.

<?php
        insertDummyData(1, 123); 
?>

In another topic I also read checking the logs. When I press the button, there is also no record being added in the logs.

Im cursious, what am I doing wrong? Spend like days to fix this, until now no results :(

Have you inspected the page to see if any java-script errors are being thrown? Also typically I don't submit the form when using AJAX just turn the button into a type="button" and add an on click event that calls your AJAX. There might be an issue with calling process.php as it may not inherit the current URL. — Colton Wagner, Mar 13 '20 at 16:09
This is a stab in the dark, but check to see if you're getting a 419 response code when the ajax call is firing. If that's what you're seeing, the ajax call is missing the csrf token that needs to be put into the form. I'm not sure how long you've worked with laravel, but I ran into this a while back and figured I would mention it since I was new to laravel at the time and wasn't expecting that type of error. — WTFranklin, Mar 13 '20 at 16:21
@ColtonWagner, nice suggestion, I will try to implement the code. — Mustafa Erdogan, Mar 13 '20 at 18:00
@FrankA. Can you help me how I can see the response code of Ajax? — Mustafa Erdogan, Mar 13 '20 at 18:02
@MustafaErdogan You need to right click and inspect element. Then go to your console. If something other than 200 is returned, you should see the http code. Otherwise, just console.log the jqXHR? — Daniel Kanis, Mar 13 '20 at 18:14
Check your URL, it may be that its trying to execute PHP in another directory? — Daniel Kanis, Mar 13 '20 at 18:15
Also you could try use the jQuery post function rather than AJAX for cleaner code :) — Daniel Kanis, Mar 13 '20 at 18:16
I always convert my data into an Object then use json_decode on the php side. — Daniel Kanis, Mar 13 '20 at 18:16
Sure, like @DanielKanis said, right click on something and inspect it. Otherwise, I think pressing F12 in most browsers will bring that up too. Click on the network tab. You might need to refresh the page to see the network activity. You'll see the response codes being sent as things reload, but watch it when you press your button to see what you get back. — WTFranklin, Mar 13 '20 at 18:25
Open the browser's developer tools (F12) and there should be a network tab. Click on the button that sends the AJAX request and you should be able to see the [request and response](http://jayblanchard.net/basics_of_jquery_ajax.html). — Jay Blanchard, Mar 13 '20 at 18:33
Thanks a bunch guys, all the reactions helped me. At this moment the problem is solved :D. I'm soo happy. The problem was the version of ajax that I used. I used the minimal one, which has some features removed. I received the error: Ajax is not a valid options, DOH!. Found the solution here: https://stackoverflow.com/questions/18271251/typeerror-ajax-is-not-a-function — Mustafa Erdogan, Mar 14 '20 at 00:13

score 1 · Answer 1 · answered Mar 13 '20 at 18:42

put an error log in "process.php" to make sure that it's actually being called, if it's not being called, as others suggest, you may have path, permissions or script errors.
what does insertDummyData/process.php actually do? It must echo something as if it were writing to the page for the AJAX call to get a non-empty result. For example, in process.php
```
<?php 
$new_data = my_function_which_does_stuff_to_posted_data($_POST['data']);
echo json_encode($new_data); 
exit(); 
```

PHP/HTML, AJAX is not calling/executing PHP file

1 Answers1