Possible run multiple ajax this way?

Question

I want to run an Ajax query to get the "Datum" from the response "TesterID". Then I want to run the second Ajax with the previously received "Datum" to update with this value on another page, a DB entry.

Here is the code which doesn't work.

<script>

/* Funktionen um Startzeiten für Zyklen aus DB.TesterCycleCount zu erhalten bzw. für Test und Stunden, das aktuelle Datum gerundet auf 30 Minuten */ 
$(document).ready(function(){

var TesterID = "<?php echo $_GET['TesterID']; ?>"; /* value der Tester erhalten */ 


        $.ajax({ /* AJAX aufrufen */
            url: 'ma_get-TesterID_Testende.php',
            type: 'get', /* Methode zum übertragen der Daten */
            data: {TesterID:TesterID}, /* Daten zu übermitteln */
            dataType: 'json',
            success:function(response){ /* Die zurückgegebenene Daten erhalten */


                var CID = response['CID'];
                var Datum = response['Datum'];



            },
             error: function(jqxhtt, status, exception) {
         alert('Exception:', exception)

            }
        }




        var TestaufstellungID = "<?php echo $_GET['TestaufstellungID']; ?>";
         $.ajax({ /* AJAX aufrufen */
            url: 'ma_TestendeSQL.php',
            type: 'get', /* Methode zum übertragen der Daten */
            data: {Testaufstellung:TestaufstellungID, Datum: Datum}, /* Daten zu übermitteln */
            dataType: 'json',
            success:function(data){ /* Die zurückgegebenene Daten erhalten */


                 alert('Successfully called');
     },
     error: function(jqxhr, status, exception) {
         alert('Exception:', exception)

            }
        }


        });


</script>

This is the second PHP page, ma_TestendeSQL.php, which doesn't update.

<?php
    $cinfo = array(
        "Database" => $database,
        "UID" => $username,
        "PWD" => $password
    );
    $conn = sqlsrv_connect($server, $cinfo);

    $TestaufstellungID = $_GET['TestaufstellungID'];
    $Datum = $_GET['Datum'];
    $Testdatum = date('Y-d-m');

                    $stop = $conn->prepare("WITH UpdateTestende AS (
      SELECT TOP 1  * from DB.dbo.Testergebnisse 
      WHERE TestaufstellungID = $TestaufstellungID
      ORDER BY TestergebnisID DESC 
    )

    update UpdateTestende 
    set Testende = '$Datum',
    Datum = '$Testdatum'");








        header('Content-type: application/json');

    ?>

The first Ajax works fine with the PHP page ma_get-TesterID_Testende.php. I tested it already alone, but when I add the second Ajax try to update, the code I posted above doesn't work.

So the question: is it possible to run two Ajax like this?

Thanks.

Edit: AJAX Call is empty or is not starting. Further invstigation: The Ajax alert me the error part with empty exception and dont alert me the success part. So it doesnt go to the page ma_get-TesterID_Testende.php or it doesnt return back the Datum . Could be not enabled Cross-Site-Scripting be the Problem?

But in another Page is a similiar Ajax Call working fine.

$(document).ready(function(){

var TesterID = "<?php echo $_GET['TesterID']; ?>"; /* value der Tester erhalten */ 

        $.ajax({ /* AJAX aufrufen */
            url: 'ma_get-TesterID.php',
            type: 'get', /* Methode zum übertragen der Daten */
            data: {TesterID:TesterID}, /* Daten zu übermitteln */
            dataType: 'json',
            success:function(response){ /* Die zurückgegebenene Daten erhalten */

                var len = response.length;

                $("#Teststart").empty(); /* Die erhaltenden Daten werden bei der ID angezeigt */
                for( var i = 0; i<len; i++){
                    var CID = response[i]['CID'];
                    var Datum = response[i]['Datum'];

                    $("#Teststart").append("<option value='"+Datum+"'>"+Datum+"</option>");

                }
            }
        });


    $("#TesterID").change(function(){ /* Wenn du änderst und vom Select Feld auswählst */
        var TesterID = $(this).val(); /* value der Tester erhalten */ 

        $.ajax({ /* AJAX aufrufen */
            url: 'ma_get-TesterID.php',
            type: 'get', /* Methode zum übertragen der Daten */
            data: {TesterID:TesterID}, /* Daten zu übermitteln */
            dataType: 'json',
            success:function(response){ /* Die zurückgegebenene Daten erhalten */

                var len = response.length;

                $("#Teststart").empty(); /* Die erhaltenden Daten werden bei der ID angezeigt */
                for( var i = 0; i<len; i++){
                    var CID = response[i]['CID'];
                    var Datum = response[i]['Datum'];

                    $("#Teststart").append("<option value='"+Datum+"'>"+Datum+"</option>");

                }
            }
        });
    });

});

In this example the Ajax Call starts when i change the value from a Dropdown selection Form. Is there a difference?

How this Ajax should work i try to explain in my other question step by step, how it my application should be execute.

Update SQL Query with populated variables from AJAX functions over multiple PHP Pages

Edit 2: JQuery Version: https://code.jquery.com/jquery-3.4.1.js"

Answer 1

A couple of issues with the original code:

A. First ajax must complete before starting second ajax

Your second ajax call needs the value of Datum which is returned by the first ajax call. Currently the second ajax will start immediately after sending the first ajax, before it has returned Datum. So we need to wait for the first ajax to return Datum before we can use it as an input for the second ajax.

The easy way to do this is with the async/await feature of ECMA2017 (docs here). This allows javascript to run asynchronously and wait for something to complete before we proceed.

To do this, we need to first declare the enclosing function as async (see //1. comments in code below):

$(document).ready(async function(){

Then we add await in front of the first $.(ajax) call (see //3. comments in code below):

 await $.ajax({ /* AJAX aufrufen */

Together, the javascript engine will pause the code at the first ajax call until it returns the Datum value. Then it will continue as normal.

B. Datum needs to be at top level of enclosing function

As written, the variable Datum only exists within the anonymous function attributed to "success" in the first ajax call. So it is not available to the second ajax call ("Datum is not defined").

You can fix this by declaring Datum as global (outside of the $.(ready) {}), or better, you can keep it within your $.(ready) {} by declaring it at the outermost enclosing brackets (see //2. comments in code below).

Lastly, you should replace var Datum = response['Datum']; with Datum = response['Datum'];. (see //4. comment in code below).

/* Funktionen um Startzeiten für Zyklen aus DB.TesterCycleCount zu erhalten bzw. für Test und Stunden, das aktuelle Datum gerundet auf 30 Minuten */ 

// 1. ADD 'ASYNC' IN FRONT OF FUNCTION

$(document).ready(async function(){

// 2. DECLARE 'DATUM' AT TOP

var Datum;
var TesterID = "<?php echo $_GET['TesterID']; ?>"; /* value der Tester erhalten */ 

        // 3. ADD AWAIT IN FRONT OF FIRST AJAX CALL

        await $.ajax({ /* AJAX aufrufen */
            url: 'ma_get-TesterID_Testende.php',
            type: 'GET', /* Methode zum übertragen der Daten */
            data: {TesterID:TesterID}, /* Daten zu übermitteln */
            dataType: 'json',
            success:function(response){ /* Die zurückgegebenene Daten erhalten */

                var CID = response['CID'];

                // 4. REMOVE VAR IN FRONT OF DATUM

                Datum = response['Datum'];

            },
             error: function(jqxhtt, status, exception) {
             console.log(exception);
         alert('Exception:', exception)

            }
        });




    var TestaufstellungID = "<?php echo $_GET['TestaufstellungID']; ?>";
    $.ajax({ /* AJAX aufrufen */
        url: 'ma_TestendeSQL.php',
        type: 'get', /* Methode zum übertragen der Daten */
        data: {Testaufstellung:TestaufstellungID, Datum: Datum}, /* Daten zu übermitteln */
        dataType: 'json',
        success:function(data){ /* Die zurückgegebenene Daten erhalten */


            alert('Successfully called Datum='.Datum);
        },
        error: function(jqxhr, status, exception) {
            alert('Exception:', exception)

        }
    });

});

Answer 2

Ajax calls are not synchronous and using async:false would also not be preferred solution as it generate warnings. The simplest solution here would to create 2 methods. One to get the datum and second to update database with datum. Call the second method in the success of first method. So it would be like

  $.ajax({ 

        url: 'ma_get-TesterID_Testende.php',
        type: 'get', 
        data: {TesterID:TesterID}, 
        dataType: 'json',
        success:function(response){ 


            var CID = response['CID'];
            var Datum = response['Datum'];

            SecondMethod(Datum);


        },

Answer 3

First, you should know that you should separate your JavaScript from your HTML or PHP pages that generate HTML, so the JavaScript can be cached. You should also do this with your CSS, so it's cached, for faster page loads. Here's what your code should probably look like:

//<![CDATA[
/* external.js */
$(function(){
var serialGet = location.search.replace(/^\?/, '').split('&');
if(serialGet.length > 1){
  for(var i=0,a,v,testerId,testaufstellungID,l=serialGet.length; i<l; i++){
    a = serialGet[i].split('='); v = a[1].trim();
    if(a[0].match(/TesterID/i) && v !== ''){
      testerId = v;
    }
    else if(a[0].match(/TestaufstellungID/i) && v !== ''){
      testaufstellungID = v;
    }
  }
  if(testerId && testaufstellungID){
    $.ajax({
      url:'ma_get-TesterID_Testende.php',
      data:{testerID:testerID},
      dataType:'json',
      success:function(response){
        var cid = response.cid, datum = response.datum;
        if(cid === undefined || datum === undefined){
          return;
        }
        // use cid now if needed
        $.ajax({
          url:'ma_TestendeSQL.php',
          data:{testaufstellung:testaufstellungID, datum:datum},
          dataType:'json',
          success:function(data){
            if(data.worked){
              console.log(data);
            }
          }
        });
      }
    });
  }  
}
}); // end load
//]]>

/* external.css */
*{
  box-sizing:border-box; padding:0; margin:0;
}
html,body{
  width:100%; height:100%;
}
body{
  background:#ccc;
}
#test{
  padding:5px 7px; text-align:center;
}

<!DOCTYPE html>
<html xmlns='http://www.w3.org/1999/xhtml' xml:lang='en' lang='en'>
  <head>
    <meta charset='UTF-8' /><meta name='viewport' content='width=device-width, height=device-height, initial-scale:1' />
    <title>Test Template</title>
    <link type='text/css' rel='stylesheet' href='external.css' />
    <script type='text/javascript' src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js'></script>
    <script type='text/javascript' src='external.js'></script>
  </head>
<body>
  <div id='test'>This would be the page that takes your $_GET URL</div>
</body>
</html>

Of course, you should keep a separate and secure copy to you database connection.

restricted/connect.php may look like:

<?php /* restricted/connect.php */
function https(){ // force https
  if(!isset($_SERVER['HTTPS'])){
    header("LOCATION:https://{$_SERVER['SERVER_NAME']}{$_SERVER['PHP_SELF']}"); die;
  }
}
function connect(){ // database connect - change strings as required below
  return new mysqli('host', 'username', 'password', 'database');
}
?>

Now, ma_get-TesterID_Testende.php may look something like:

<?php /* ma_get-TesterID_Testende.php */
require_once 'restricted/connect.php';
// https(); - use if https
if(isset($_GET['testerID'])){
  $db = connect();
  if($db->connect_error)die;
  if($stmt = $db->prepare('SELECT cid,datum FROM some_table WHERE testerID=?')){
    $stmt->bind_param('s', $_GET['testerID']); $stmt->execute();
    $stmt->bind_result($cid, $datum); $c = new StdClass;
    if($stmt->fetch()){ // single result set no loop needed
      $c->cid = $cid; $c->datum = $datum;
    }
    $stmt->free();
    echo json_encode($c);
  }
  $db->close();
}
?>

ma_TestendeSQL.php may look like:

<?php /* ma_get-TesterID_Testende.php */
date_default_timezone_set('America/Vancouver'); require_once 'restricted/connect.php';
// https(); - use if https
if(isset($_GET['testaufstellungID'], $_GET['datum'])){
  $db = connect();
  if($db->connect_error)die;
  if($stmt = $db->prepare('UPDATE updateTestende SET testende=?, datum=? WHERE testaufstellungID=? ORDER BY testergebnisID DESC LIMIT 1')){
    $stmt->bind_param('sss', $_GET['datum'], date('Y-d-m'), $_GET['testaufstellungID']); $stmt->execute(); $c = new StdClass;
    if($db->affected_rows){
      $c->worked = true;
    }
    echo json_encode($c);
  }
  $db->close();
}
?>

Keep in mind that AJAX is Asynchronous, so if a result is dependent on another you should nest your calls, or use Promises (although they don't work in IE). Also, I have no idea what you were trying to achieve with your last AJAX call, so I was just guessing, while showing the process.

Answer 4

There are 2 ways to do this

WAY 1: use 'await' for the first ajax. this is let your second ajax to wait until the first ajax to complete.

    await $.ajax({
    url: 'ma_get-TesterID_Testende.php',
    type: 'get',
    data: {TesterID:TesterID},
    dataType: 'json',
    success:function(response){ /* Die zurückgegebenene Daten erhalten */

    },
     error: function(jqxhtt, status, exception) {
    }
}
$.ajax({
    url: 'ma_TestendeSQL.php',
    type: 'get',
    data: {Testaufstellung:TestaufstellungID, Datum: Datum},
    dataType: 'json',
    success:function(data){

    },
    error: function(jqxhr, status, exception) {
    }
}

WAY 2:

you can put the second ajax in the 'complete' or 'success' method of the first ajax

$.ajax({
    url: 'ma_get-TesterID_Testende.php',
    type: 'get',
    data: {TesterID:TesterID},
    dataType: 'json',
    success:function(response){
        $.ajax({
            url: 'ma_TestendeSQL.php',
            type: 'get',
            data: {Testaufstellung:TestaufstellungID, Datum: Datum},
            dataType: 'json',
            success:function(data){

            },
            error: function(jqxhr, status, exception) {
            }
        }
    },
     error: function(jqxhtt, status, exception) {
    }
}

Answer 5

I don't know what you have to achieve. It is an only example I have not run the code but I think it will work properly is as under:

$(document).ready(function() {
    $.ajaxSetup(
        {
         cache : false, 
         crossDomain: true, 
         async : false, 
         type : 'POST', 
         dataType : 'json'
        });

    function FirstAjax($url, $value){
        var def = new $.Deferred();
        var ret_data;

        $.post($url, {type : 1, value : { $value}}, function(data){
            //Do things with Data
            //or
            ret_dat=data;
        }, "json");

        return ret_data;
    }


    var abc = FirstAjax("site address", "data_values");
    var def = FirstAjax("site address", "data_values");
});