Returned ajax result as global integer variable

Question

I cannot figure out where I'm going wrong here. I have an ajax call that calls an insert statement and returns the ID of that insert. This works.

But I'm trying to create a global variable of this so that I can use the ID as a value in another insert and update that are called in a different ajax call.

I currently get the page ID returned and can echo it in the console, but when I call the 2nd function it says invalid integer type for page_id.

The first ajax call:

<script type="text/javascript">
$(document).ready(function(){

    var page_id;

$("#submitForm").click(function(){
event.preventDefault();
var string = $('#pageForm').serialize();

// AJAX Code To Submit Form.
    $.ajax({
        type: "POST",
        url: "addPage.php",
        data: string,
        dataType: 'json',
        cache: false,
        success: function(response){
          console.log(response['last_insert_id']);
          page_id = JSON.stringify(response['last_insert_id']);
        }
    });

});

});
</script>

calls addpage.php

$addpage = "
    INSERT INTO pages (title, page_type_id, display_id, duration)
    VALUES ('$title','$page_type','$display_id','$duration');
";

if ($mysqlConn->query($addpage) === TRUE) {
    $last_id = $mysqlConn->insert_id;
    $data['last_insert_id'] = $last_id;
    echo json_encode($data);
} else {
    echo "Error: " . $addpage . "<br>" . $mysqlConn->error;
}

So now I want to store the 'last_insert_id' as a global variable back in my first file to use in another ajax call/insert

<script type="text/javascript">
    $(document).ready(function(){

    $("#form-data").submit(function(e){

        var content = tinymce.get("mytextarea").getContent();

        $(".leftContent").html(content);
        $("#new").val(content);

          var string = $('#form-data').serialize() +  page_id;

        // AJAX Code To Submit Form.
            $.ajax({
                type: "POST",
                url: "addPanel.php",
                data: string,
                cache: false,
                success: function(response){
                  console.log(JSON.stringify(response));
                }
            });



        return false;

    });

});
</script>

Answer 1

As shown in your code

<script>
    $(document).ready(function(){
        var page_id = 123;
    });
</script>
<script>
    $(document).ready(function(){
        console.log(page_id);
    });
</script>

If you run this, you will get an error "page_id" is not defined.
It gives such an error because page_id in the second $(document).ready callback is not in the same scope as where it has been declared.

Now for example :

<script>
    var page_id = 123;
    $(document).ready(function(){
        console.log(page_id);
    });
</script>
<script>
    $(document).ready(function(){
        console.log(page_id);
    });
</script>

No errors and 123 gets logged twice in the console. This is because page_id has been moved in the global scope. In JavaScript, parents variables are available to children, as long as they don't get overwritten by a declaration such as :

function test(){var page_id = 456; console.log(page_id);}

Which would log the function page_id value instead of the one in the parent scope.