dpicx06888
2018-04-20 03:06
浏览 66

Ajax提交一个ajax加载表单

I load replies to comments asynchronously in php like in youtube comments. The ajax handler for forms (ie reply forms) loaded like this is not working. e.preventDefault() is not working. The forms are submitted to the action page itself and page is redirected to action url. If i edit a reply. It works but page is redirected to the action url. This happens only for the ajax loaded replies. The same handler is used for regular comments and it works fine.

A comment :

enter image description here

A comment with loaded replies :

enter image description here

When a reply is edited it just goes to /path/to/submit.php and shows the value of json output like this

result on submitting a reply form

Ajax to show or hide replies:

//load or hide replies    
function loadmore(id) {
  var val = $('#' + id).data("value");
  var count = $('#' + id).data("count");
  $.ajax({
    type: 'post',
    url: '/path/to/submit.php',
    data: {
      replyof: val
    },
    success: function(response) {
      var content = document.getElementById("show" + val);
      content.innerHTML = response;
      var clicknum = $('#' + id).data("clicknum");
      $('#' + id).data("clicknum", 2);
      if (!$("#show" + val).is(":hidden") && clicknum != 1) {
        document.getElementById(id).innerHTML =
          ' View all ' + count + ' replies <i class="fas fa-angle-down"></i>';
        $("#show" + val).hide();
      } else {
        document.getElementById(id).innerHTML =
          'Hide all replies <i class="fas fa-angle-up"></i>';
        $('#show' + val).show();
      }
    }
  });
}

I use the same class for comments as well as replies and ajax submit the form to the same page /path/to/submit.php using eg

<form class="replyform" action="/path/to/submit.php">
...
<button type="submit">Delete</button>
...
</form>

The form handler

$(".replyform").submit(function(e) {

  var URL = $(location).attr('href');
  $.ajax({
    async: true,
    type: "POST",
    url: $(this).attr('action'),
    data: $(this).closest('form').serialize(),
    success: function(data) {
      if (data.result === 1) {
        window.location = "/login";
      } else if (data.result === 2) {
        alert('Some error occured.Please try Later');
      } else if (data.result === 3) {
        replyer(data.comment);
        $('body').load(URL);
      } else {
        $('body').load(URL);
      }
    },
    dataType: "json"
  });

  e.preventDefault();
});
  • 点赞
  • 写回答
  • 关注问题
  • 收藏
  • 邀请回答

2条回答 默认 最新

  • dongzi5062 2018-04-20 03:43
    已采纳

    The .replyform render by ajax so use on instead of traditional way

    $(document).on("submit", ".replyform",function(e) {
      var URL = $(location).attr('href');
      $.ajax({
    async: true,
        type: "POST",
        url: $(this).attr('action'),
        data: $(this).closest('form').serialize(),
        success: function(data) {
          if (data.result === 1) {
            window.location = "/login";
          } else if (data.result === 2) {
            alert('Some error occured.Please try Later');
          } else if (data.result === 3) {
            replyer(data.comment);
            $('body').load(URL);
          } else {
            $('body').load(URL);
          }
        },
        dataType: "json"
     });
    
          e.preventDefault();
    });
    
    点赞 评论
  • dq1685513999 2018-04-20 03:33

    I think your calling your form wrong. You need an id attribute. I don't think you can call it by it's class name like that.

    <form id="myForm" class="replyform" action="/path/to/submit.php">
    ...
    <button type="submit">Delete</button>
    ...
    </form>
    
    
    $("#myForm").submit(function(e) {
    
    ...rest of script.
    
    点赞 评论

相关推荐 更多相似问题