Load php file within javascript (AJAX or others)

Question

I am trying to finish one page of my website the last couple of hours while achieving the following.

• While clicking on a button, the following should happen
• Download link appears (done - works)
• The mySQL table should be opened and a counter should be incremented

As far as I got the points. Javascript cannot handle that and thus we can use AJAX or jQuery. I was already checking out different posts and websites such as:

• how to execute php code within javascript
• https://www.w3schools.com/js/js_ajax_database.asp

and much more. However, I guess I do have problems with the AJAX syntax and I actually don't know if the requested php files is loaded/opened or not. Especially the second link given above is almost similar to what I am searching for. However, it does not work. To check if the php file is called, I set an alert which works if I do call the file explicitly in the browser. Maybe this does not work with AJAX as I expect it. Here the code to get more familiar with the inconstency I am doing.

The page code:

<?php
    echo '<div><button onclick="incrementAndDownload('testPath', 'fileName'); ">Click me</button></div>';
?>

<script>
function incrementAndDownload (link, fileName)
{
   $.ajax({
       url: 'openfoam/increment.php',
       success: function(data) {
           // Print something if necessary
       }
   });

   //- Open the link
   // window.open(arguments[0], "_blank");

   //- Increment download inside mysql
   //var xhttp;
   //xhttp = new XMLHttpRequest();
   //xhttp.open("GET", "openfoam/increment.php?foo=nana", true);
   //xhttp.send();
}
</script>

The increment.php looks as follows:

<?php                                                                           

    echo '<script type="text/javascript" language="Javascript">                     
    alert("Test message if the script is called...");                                           
    </script>';

    // Code for accessing the mysql database and manipulate the data
    //$page_id = mysql_real_escape_string(html_entities($_POST['file']));                                           

?>  

Now when I click the button, the javascript is executed (e.g., if I uncomment the window.open) this works as expected. However, as already said, the second part is to open the database via php and increment a number (counter). For any reason, I am not able to figure out where the problem is located. I am even not sure if AJAX opens the increment.php file (the alert messages never appears so I guess it is never called). Any suggestion is appreciated and I hope that this question does not just contain a fundamental small error. Thank in advance, Tobi

Answer 1

It's not the way the AJAX works. If you call alert() on a destination page it won't show in your browser. Your case is very basic so I will keep my solution on a basic level.

In increment.php just echo something, it can be just OK string. So when you go to increment.php page you will see only OK, nothing more, nothing less.

Then go back to your javascript and check what is your response.

   $.ajax({
       url: 'openfoam/increment.php',
       success: function(data) {
           if (data == 'OK') {
             console.log('It works, sir!');
           }
       }
   });

If you don't see a message in a console after these modifications something doesn't work. However, I think your page is executed properly, but you just don't get feedback, because you don't handle the response (data param in your case).

Check it out and don't forget to give me a feedback!