CODEWITHSUNDEEP
javascriptphpjqueryhtmlcss
user6915755
user6915755

Reputation:

How to refresh a page inside another page?

I have 2 pages and in the first page, I called another page (second page) via ajax. In the second page there is a form that send via ajax then reload page once. But when the second page refreshes, my first page refreshes too. But I don't want it. I would like only to reload my inner page. Is there a way to reload only internal page? Here is my inner page codes:

$(document).ready(function() {
  $(document).on('click', '.MyForm button[type=submit]', function(e) {
    e.preventDefault() // To make sure the form is not submitted 
    var $frm = $(this).closest('.MyForm');
    console.log($frm.serialize());
    $.ajax(
        $frm.attr('action'), 
        {
          method: $frm.attr('method'),
          data: $frm.serialize(),
          success: function(data) { $(".error").html(data), window.location.reload();}
   
        }
    );
  });
});
.error{width:200px; height:50px;border:1px solid blue;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.1/jquery.min.js"></script>
  <form class="MyForm" method="post">
    <input type="text" placeholder="name" value="Aynaz" name="a1" />
    <select name="Avg">
      <option value="1">1</option>
      <option value="2">2</option>
    </select>
    <button type="submit">Submit</button>
    <div class="error">Show form success here after page reload</div>
  </form>

Upvotes: 7

Views: 1558

Answers (3)

Anupam
Anupam

Reputation: 8016

window.location.reload() will always reload the whole page. Use load() function same as you are using it in the first place for loading the inner page

 $.ajax(
            $frm.attr('action'), 
            {
              method: $frm.attr('method'),
              data: $frm.serialize(),
              success: function(data) { 
                   $(".error").html(data);
                   $('.div').html('').load('innerpage.htm');// reload the div
              }

            }
        );

Upvotes: 4

Vishal J
Vishal J

Reputation: 342

You can make internal page in <iframe> and then can reload only this section.

Upvotes: 0

Gijo Varghese
Gijo Varghese

Reputation: 11780

Remove method="post" from the form.

Upvotes: 0

Related Questions