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
– Colton Wagner, Commented Mar 13, 2020 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
– WTFranklin, Commented Mar 13, 2020 at 16:21
@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
– Daniel Kanis, Commented Mar 13, 2020 at 18:14
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
– WTFranklin, Commented Mar 13, 2020 at 18:25

baku · Accepted Answer · 2020-03-13 18:42:38Z

1

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(); 
```

answered Mar 13, 2020 at 18:42

baku

7859 silver badges23 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

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

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related