How to display html web page in response of ajax jquery using post method

Question

Client have below web page as I click on save button my server creates new html page as response but same isn't getting displayed in browser. Please suggest how to solve this using ajax.

<div class='form-group'>
  <div style='background-color:#EFEFF4'>
    <div class='buttoncolumn' style='padding-top: 90px;padding-bottom: 5px; width:100%; background-color:#EFEFF4;'>
      <button id='disableGo' class='buttoncolumn' type='submit'  style=' background-color:#007AFF; filter: alpha(opacity=40); -moz-opacity: 0.4;opacity: 0.4;bottom:4%; margin-left:8%;position:absolute;border:none !important;' disabled> Save </button>
      <button id='go' class='buttoncolumn' type='submit'  style=' display:none;background-color:#007AFF;bottom:4%; margin-left:8%;position:absolute;border:none !important;'> Save </button>
    </div>
  </div>
</div>

<script type='text/javascript'>
  $(document).ready(function() {
    $('#TACForm').validate({
      rules: {streetnum: 'required',postalCode: 'required',},   
      highlight: function(element) { 
        $(element).closest('.form-group').addClass('has-error');
      },
      unhighlight: function(element) {
        $(element).closest('.form-group').removeClass('has-error'); 
      },
      errorElement: 'span', 
      errorClass: 'help-block', 
      errorPlacement: function(error, element) { 
        var found = $(element).closest('.checkbox');
        if(found.length) { 
          error.insertAfter(found); 
        } else { 
          error.insertAfter(element);
        }
      }, 
      submitHandler: function(form) {
        var paramsEncoded = $('form').serialize();    
        notificationRequest(paramsEncoded);
      }
    });
    function notificationRequest(params) 
    { 
      $.ajax({ type: 'post', 
              url: '/ium-tac/', 
              data: params, contentType: 'application/x-www-form-urlencoded;charset=UTF-8', 
              success: function(response) { 
                registered(true);   
                console.log(response); 
              }, 
              error: function(request, errorType, errorMessage) {
                console.log('Error ' + errorType + ' : ' + errorMessage);
              }
             });
    }
</script>

Do you want that a new window will open with the response html? an `iframe`? Replace the current page html? — Mosh Feu, Aug 21 '16 at 05:53
I want that it will replace content in current page with new html web page. — MS Malik, Aug 22 '16 at 03:15
This might be a duplicate of this post: http://stackoverflow.com/questions/483745/replace-html-page-with-contents-retrieved-via-ajax — Christian Hedemann Olsen, Aug 22 '16 at 06:26

score 0 · Answer 1 · answered Aug 22 '16 at 06:27

Basically you can replace the html content of any element you want using .html method in jQuery. Something like this:

function loadNewContent() {
  // Assowme that this content fot from the $.ajax method
  var newPageContent = 'New content';

  $('div').html(newPageContent); 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>Old content</div>
<button onclick="loadNewContent()">Load content</button>

But I don't think that is good to replace the whole html content. Just load the relevant html and append it to a specific part.

How to display html web page in response of ajax jquery using post method

1 Answers1