How do I write to console.log() from ajax calls two levels deep?

Question

Please Note: I am new to using ajax and have no knowledge of error handling between different pages.

I am calling an ajax call from within an ajax call; and would like to obtain a console.log() return from the 2nd page, which is two levels deep. Link to related question -- but to my understanding it is only for one level deep, not two levels.

The return I am getting with this code is a portion of the second page's HTML code, and not my console.log() call from within that writefile page. How can I get this to work?

function update_static_HTML(url,filename,cdn){
    console.log('GET PAGE CONTEN FOR URL = '+url);
    console.log('cdn = '+cdn);  
    $.ajax({
        url: url,
        dataType: "html",
        success: function(data) {
            console.log('success - 1st');
            var save_to_file_url = 'https://www.example.com/writefile?name='+filename+'&cdn='+cdn;
            $.ajax({
                type: 'POST',
                url: save_to_file_url,
                dataType: "html",
                data: {
                    content: data 
                },
                success: function( result ) {
                    console.log('success - 2nd');


                    console.log( result ); // << returns page content, not console.log value

                },
                error:function(error){
                    console.log('ajax Error ' + JSON.stringify(error));
                } 
            });
        },
        error:function(error){
            console.log('ajax Error ' + JSON.stringify(error));
        } 
    }); 
    return false;
}

UPDATE:

I now understand I need to somehow handle it with some call-back using jqXHR.

I am not clear how to implement the suggested code:

// Assign handlers immediately after making the request,
// and remember the jqxhr object for this request
var jqxhr = $.get( "example.php", function() {
  alert( "success" );
})
  .done(function() {
    alert( "second success" );
  })
  .fail(function() {
    alert( "error" );
  })
  .always(function() {
    alert( "finished" );
  });
 
// Perform other work here ...
 
// Set another completion function for the request above
jqxhr.always(function() {
  alert( "second finished" );
});

What section of it needs to go onto what page?

If `console.log(result);` logs the content of a page to the console, then `result` contains the contents of a page. The fact that this is "two levels deep" doesn't affect `console.log` in any way. Logging a value to the console, well, logs a value to the console. Can you clarify what specific debugging observations you have made which would indicate that `console.log` *itself* is somehow failing here? — David, Oct 25 '22 at 16:13
The value passed to `success` is the body of the response to the AJAX request. I expect if you look in your browser's developer tools network tab then you'll see that same content. There is no jqXHR passed to the success handler in the same way that it is to the error handler. — Mike K, Oct 25 '22 at 16:20
@David `console.log` _itself_ is not failing. I am trying to debug the page two levels deep by adding `console.log` calls withing that page named `writefile`. I guess I need to have that page _hand over_ these `console.log` responses in some other way to see them from within my _top-level_ page. — MeSo2, Oct 25 '22 at 16:28

score 0 · Answer 1 · answered Oct 29 '22 at 15:31

As temporary workaround I am now writing debug notes to an id withing the returned page, and taking the debug info from there. Note that this is not a answer to my question but a way to get still use console.log to help me debug my code.

    ...
    success: function( result ) {
        var info = $(result).find('#info').html();
        console.log(info);
    },
    ...

How do I write to console.log() from ajax calls two levels deep?

UPDATE:

1 Answers1