CODEWITHSUNDEEP
javascriptphpjqueryhtmlajax
nandu kk
nandu kk

Reputation: 368

Ajax submit an ajax loaded form

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();
});

Upvotes: 0

Views: 590

Answers (2)

Ryuk Lee
Ryuk Lee

Reputation: 744

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();
});

Upvotes: 1

Joseph_J
Joseph_J

Reputation: 3669

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.

Upvotes: 0

Related Questions