CODEWITHSUNDEEP
javascriptphpjqueryhtmlajax
Mustafa Erdogan
Mustafa Erdogan

Reputation: 113

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

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:

  1. Alert serialized data of the button (works)
  2. 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: enter image description here

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 :(

Upvotes: 0

Views: 452

Answers (1)

baku
baku

Reputation: 775

  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.

  2. 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();

Upvotes: 1

Related Questions