dsjj15012 2015-08-08 18:02
浏览 50
已采纳

表单提交后更新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.

  • 写回答

2条回答 默认 最新

  • doujiao3998 2015-08-08 18:14
    关注

    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>
    
    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(1条)

报告相同问题?

悬赏问题

  • ¥15 求差集那个函数有问题,有无佬可以解决
  • ¥15 【提问】基于Invest的水源涵养
  • ¥20 微信网友居然可以通过vx号找到我绑的手机号
  • ¥15 寻一个支付宝扫码远程授权登录的软件助手app
  • ¥15 解riccati方程组
  • ¥15 display:none;样式在嵌套结构中的已设置了display样式的元素上不起作用?
  • ¥15 使用rabbitMQ 消息队列作为url源进行多线程爬取时,总有几个url没有处理的问题。
  • ¥15 Ubuntu在安装序列比对软件STAR时出现报错如何解决
  • ¥50 树莓派安卓APK系统签名
  • ¥65 汇编语言除法溢出问题