表单提交后更新div内容而不重新加载页面

alright, I have a popup which displays some notes added about a customer. The content (notes) are shown via ajax (getting data via ajax). I also have a add new button to add a new note. The note is added with ajax as well. Now, the question arises, after the note is added into the database.

How do I refresh the div which is displaying the notes?

I have read multiple questions but couldn't get an answer.

My Code to get data.

<script type="text/javascript">
    var cid = $('#cid').val();
    $(document).ready(function() {
        $.ajax({    //create an ajax request to load_page.php
            type: "GET",
            url: "ajax.php?requestid=1&cid="+cid,             
            dataType: "html",   //expect html to be returned                
            success: function(response){                    
                $("#notes").html(response); 
                //alert(response);
            }
        });
    });
</script>

DIV

<div id="notes">
</div>

My code to submit the form (adding new note).

<script type="text/javascript">
    $("#submit").click(function() {
        var note = $("#note").val();
        var cid = $("#cid").val();
        $.ajax({
            type: "POST",
            url: "ajax.php?requestid=2",
            data: { note: note, cid: cid }
        }).done(function( msg ) {
            alert(msg);
            $("#make_new_note").hide();
            $("#add").show();
            $("#cancel").hide();
            //$("#notes").load();
        });
    });
</script>

I tried load, but it doesn't work.

Please guide me in the correct direction.

Create a function to call the ajax and get the data from ajax.php then just call the function whenever you need to update the div:

<script type="text/javascript">
$(document).ready(function() {
  // create a function to call the ajax and get the response
  function getResponse() {
    var cid = $('#cid').val();
    $.ajax({ //create an ajax request to load_page.php
      type: "GET",
      url: "ajax.php?requestid=1&cid=" + cid,
      dataType: "html", //expect html to be returned                
      success: function(response) {
        $("#notes").html(response);
        //alert(response);
      }

    });
  }
  getResponse(); // call the function on load


  $("#submit").click(function() {
    var note = $("#note").val();
    var cid = $("#cid").val();
    $.ajax({
      type: "POST",
      url: "ajax.php?requestid=2",
      data: {
        note: note,
        cid: cid
      }
    }).done(function(msg) {
      alert(msg);
      $("#make_new_note").hide();
      $("#add").show();
      $("#cancel").hide();}
      getResponse(); // call the function to reload the div

    });
  });
});

</script>

You need to provide a URL to jQuery load() function to tell where you get the content. So to load the note you could try this:

$("#notes").load("ajax.php?requestid=1&cid="+cid);