php file's code not executing through ajax call

Question

I have a button in my PHP file, and when I click on that button, I want another PHP file to run and save some data in a MySQL table. For that I am using AJAX call as suggested at this link (How to call a PHP function on the click of a button) which is an answer from StackOverflow itself.

Here is my show_schedule file from which I am trying to execute code of another PHP file:

$('.edit').click(function() {
        var place_type = $(this).attr("id");
        console.log(place_type);
        $.ajax({
            type: "POST",
            url: "foursquare_api_call.php",
            data: { place_type: place_type }
        }).done(function( data ) {
            alert("foursquare api called");
            $('#userModal_2').modal('show');
        });
    });

here 'edit' is the class of the button and that button's id is being printed in the console correctly.

here is my foursquare_api_call.php file (which should be run when the button is clicked):

<?php
    session_start();
    include('connection.php');

    if(isset($_POST['place_type'])){
        $city = $_SESSION['city'];
        $s_id = $_SESSION['sid'];
        $query = $_POST['place_type'];
        echo "<script>console.log('inside if, before url')</script>";
        $url = "https://api.foursquare.com/v2/venues/search?client_id=MY_CLIENT_ID&client_secret=MY_CLIENT_SECRET&v=20180323&limit=10&near=$city&query=$query";
        $json = file_get_contents($url);
        echo "<script>console.log('inside if, after url')</script>";
        $obj = json_decode($json,true);
        for($i=0;$i<sizeof($obj['response']['venues']);$i++){
            $name = $obj['response']['venues'][$i]['name'];
            $latitude = $obj['response']['venues'][$i]['location']['lat'];
            $longitude = $obj['response']['venues'][$i]['location']['lng'];
            $address = $obj['response']['venues'][$i]['location']['address'];

            if(isset($address)){
                $statement = $connection->prepare("INSERT INTO temp (name, latitude, longitude, address) VALUES ($name, $latitude, $longitude, $address)");
                $result = $statement->execute();
            }
            else{
                $statement = $connection->prepare("INSERT INTO temp (name, latitude, longitude) VALUES ($name, $latitude, $longitude)");
                $result = $statement->execute();
            }
        }
    }
?>

none of the console.log is logged in the console and also the 'temp' table is not updated. Can anyone tell me where I am making mistake? Or is it even possible to execute the code of a PHP file like this?

it first displays the alert message and then the model is displayed. — preet shah, Oct 15 '20 at 11:53

score 0 · Answer 1 · answered Oct 15 '20 at 11:56

Your JavaScript is making an HTTP request to the URL that executes you PHP program.

When it gets a response, you do this:

    .done(function( data ) {
        alert("foursquare api called");
        $('#userModal_2').modal('show');
    }

So you:

Alert something
Show a model

At no point do you do anything with data, which is where the response has been put.

Just sending some HTML containing a script element to the browser doesn't cause it to turn that HTML into a DOM and execute all the script elements.

You'd need to do that explicitly.

That said, sending chunks of HTML with embedded JS back through Ajax is messy at best.

This is why most web services return data formatted as JSON and leave it up to the client-side JS to process that data.

OP says in a comment that there is no records added to the table, which is done on the PHP side. — GrumpyCrouton, Oct 15 '20 at 11:58

score -1 · Answer 2 · answered Oct 15 '20 at 13:17

to return the contents of php code you can do something like this

you can use any call to this function

function check_foursquare_api_call(place_type) {
    var place_type= encodeURIComponent(place_type);
    var xhttp;
//last moment to check if the value exists and is of the correct type
    if (place_type== "") {
    document.getElementById("example_box").innerHTML = "missing or wrong place_type";
    return;
  } 
  xhttp = new XMLHttpRequest();
  xhttp.onreadystatechange = function() {
    if (xhttp.readyState == 4 && xhttp.status == 200) {
      document.getElementById("example_box").innerHTML = xhttp.responseText;
      $('#userModal_2').modal('show');
    }
  };
 
    xhttp.open("GET", "foursquare_api_call.php?place_type="+place_type, true);
    xhttp.send();
}

this will allow you to send and execute the code of the foursquare_api_call file and return any elements to example_box, you can return the entire modal if you want, you can use any POST / GET method, monitor the progress, see more here XMLHttpRequest

php file's code not executing through ajax call

2 Answers2