Search code examples
javascriptphpjqueryhtmlajax

How to replace the entire html webpage with ajax response?


Before going to the specific question I need to explain a few basic steps.

First, the application in question deals with the management of appointments online by customers.

The customer, after filling a form with the treatments for the beauty center and providing their information, comes to the confirmation page.

Now this page performs an ajax request to store the appointment in the database.

If everything is successful, the customer is shown a page containing the details of the appointment with the success message.

The problem is that the page is currently displayed only in the response, that is, in the tab network console browser.

So my question is simple: How do I replace the entire structure of the html page with actual one shown in the response?

I found a lot of questions on the web even on StackOverflow. But all of this is limited on an append to a div. I do not need to hang but also replace the <html>, how to rewrite the html page. I have no idea how to do this and I need some advice from you.

For completeness, this is the html code that comes back to me via an ajax response:

       $.ajax({
          'type': 'POST',
          'url': 'backend_api/ajax_save_appointment',
          'data': postData,
          'success': function(response)
           {
               console.log(response);
           },
           'error': function(jqXHR, textStatus, errorThrown)
           {
               console.log('Error on saving appointment:', jqXHR, textStatus, errorThrown);    
           }
       });

Solution

  • If your response includes the <head> and <body> tags:

    $("html").html(response);.

    If not, and it's only content, then do:

    $("body").html(response);.